JQuery-AJAX:Pass two parameters and concatenate two string at server side with ASP.Net

[Original Post from my another blog] - visit it for better design and reading friendly.

This is advance article of my previous post on JQuery-AJAX in ASP.Net JQuery-AJAX: Get Server Time using jQuery AJAX in ASP.Net. In earlier post I have describe how to get server time using ASP.Net with Jquery ajax technology. How I shall describe little bit advance things, that is how to pass two parameter from client and catch these values in server then concatenate in server and response result to client to show it.

Step 1: As previous declare a webmethod or webservice at backend.

[WebMethod]

    public static string ConcateName(string fname,string lname)

    {

        return fname +" "+lname;

    }

Note here I have passed two parameter with name 'fnale' and 'lname'. In JQuery you have to invoke method with exactly same name of parameter otherwise code will not run.

Step 2: Declare HTML control, tow text box, a button and a DIV to show server response. (visit my primary blog for better view of HTML and JQuery).

For 'First Name' input HTML id="txtFName" type="text".

Last Name: input id="txtLName" type="text" and a button.    

with id="btnClick" type="button" value="Concat Name".

And response in a DIV with id="dvResponse".

 Step 3: Write JQuery code in ASPX page as below:




        $(document).ready(function () {

            $("#btnClick").click(function () {

                //alert($("#txtFName").val());

                $.ajax({

                    type: "POST",

                    url: "ConcatName.aspx/ConcateName",

                    data: JSON.stringify({ fname: $("#txtFName").val(), lname:$("#txtLName").val() }),

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (msg) {

                        $("#dvResponse").append(msg.d+"
");

                        //$("#dvResponse").html(msg.d);

                    }

                });

            });

        });

    

 Note here most important two lines as below:

url: "ConcatName.aspx/ConcateName",

data: JSON.stringify({ fname: $("#txtFName").val(), lname:$("#txtLName").val() }),

First line is describing which WebService should invoke and next line the parameter for webservice. Note here I have mentioned exactly same name of WebService parameter.

When you will run this code and type value in two text box and then click on button, browser will invoke server WebService and concatenate two name and then response to server. Which will catch by JQuery ajax part and result will be shown in DIV 'dvResponse'.
How you have enjoyed my post and it has helped for your learning on JQuery AJAX technology in ASP.Net-C#.