How to Pass Messages and Actions between Server and Client

By Eliyahu Goldin  

Last edited November 26, 2006

Scenarios

There are numerous scenarios in web application when the server and the client side have to pass text messages one to another. The most typical scenarios are:

From client to server

The standard channel for passing data from client to server is a hidden <input> control.

<input type=”hidden” runat=”server” id=”inhMessage” />

Place it somewhere inside the <form id=”Form1”> … </form> tags of your page.

The actual message text is stored in the control’s value property. On client-side it can be reached in javascript as

Form1.inhMessage.value

or

document.getElementById(“inhMessage”).value

Get it on server side as this.inhMessage.Value.

From server to client

The standard hidden input element serves its purpose very well. That is still the most universal and clear way. The same inhMessage element can be used both directions.

Besides placing html controls in the page markup declaratively, ASP.NET offers means of client code injection into the page’s http response. ASP.NET 2.0 provides ClientScriptManager class. A reference to the class is available from the ClientScript property of the Page object. One of the class methods, RegisterHiddenField, produces a hidden input element with given text value.

An example: bi-directional action-data channel

Two hidden input control used in both direction will cover all 4 typical scenarios mentioned in the beginning of this article.

Run live example

<%@ Page Language="C#" %>

 

<script runat="server">

    private void Page_Load(object sender, System.EventArgs e)

    {

        if (!this.IsPostBack)

        {

            this.inhAction.Value = "MESSAGE";

            this.inhMessage.Value = "Welcome to the example!";

        }

        else

        {

            string action = this.inhAction.Value;

            this.inhAction.Value = String.Empty; // clear action here. Can be set in the switch cases

            switch (action)

            {

                case "GOTCOMMAND":

                    this.inhAction.Value = this.inhMessage.Value;

                    break;

            }

        }

    }

</script>

 

<html>

<head>

    <title>How to Pass Messages and Actions between Server and Client</title>

    <script type="text/javascript">

    function checkAction ()

    {

        switch(form1.inhAction.value)

        {

            case "MESSAGE":

                alert(form1.inhMessage.value);

                break;

            case "CLOSE":

                close();

                break;

            default:

                alert(form1.inhMessage.value);

                break;   

        } 

      form1.inhAction.value='';

    }

    function sendAction (action, message)

    {

        form1.inhAction.value = action;

        form1.inhMessage.value = message;

        form1.submit();

    }

    </script>

</head>

<body onload="checkAction ()">

    <form id="form1" runat="server">

        <input type="button" value="Ask" onclick="sendAction ('GOTCOMMAND', prompt('What would you like to do?','DEFAULT'));" />

        <input type="hidden" runat="server" id="inhAction" />

        <input type="hidden" runat="server" id="inhMessage" />

    </form>

</body>

</html>