How to Send Data from One aspx Page to Another using jquery and Not Cookies or Query String

Introduction

We will send a user name (data) obtained from an aspx page to another aspx.cs page from where we will fetch the data and show it on the rendered HTML of the welcome page.

Background

To learn how to send/receive data from code behind method to client side, please follow my previous tip/trick labelled as How to call code behind method from client side.

Using the Code

Now as we speak, let us look at the JavaScript/jquery in the login page , it will look something like this:

 function redirect()
        {
            var textUserName = document.getElementById('txtUserName').value;
            $.ajax({
                                type: "POST",
                                url: "MultiLineTitleForAnchor.aspx/getUserName",
                                data: JSON.stringify({name:textUserName}),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (msg) {
                                    
                                    window.open("MultiLineTitleForAnchor.aspx");
                                }
                            });
           
        }

Here, as you can see, the URL option of the $.ajax() method says Welcome.aspx/getUserName, so this method will send the user name to the welcome.aspx page, precisely to the method named getUserName().

I have sent the user name to the code behind and on success of that transaction, I am redirecting/ opening a new window with Welcome.aspx as the URL, you could choose to open it in the same page/tab.

Now let us see the code behind of the Welcome page, it will be something like this:

 public static string userName = "";
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string getUserName(string name)
        {
            userName ="Welcome, "+ name;
            return userName;
            
           
        }

        [WebMethod]
        public static string getUserNameToWelcome()
        {
            return userName;
        }

Now for the magic trick (a little exaggeration, no magic involved here), let me show you the welcome page, it's JavaScript will be as follows:

        function init()
        {
            $.ajax({
                type: "POST",
                url: "MultiLineTitleForAnchor.aspx/getUserNameToWelcome",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {

                    $('#anchor').html(msg.d);
                }
            });

        }

So to sum up, using the url option of the $.ajax method, I have sent the user name from the client side of the login page to the code behind method of the Welcome page.

In the welcome page, I have set the user name to a global static variable (only static variables can be accessed in static methods) and then get that value to client side of the welcome page.

Points of Interest

Every method/variable in the code behind has to be static, otherwise it won't be possible to transmit data from client side to server side and vice versa.

With [WebMethod] attribute, we have to use System.WebServices namespace to allow the method to be able to access from the client side.