Ajax submitting in asp.net

Question

I am very new to asp.net web development.
I have a form like this

<form id="frmNewUser">
    <table>
        <tr>
            <td>User ID
            </td>
            <td>
                <input id="Text1" name="txtUserId" type="text" class="easyui-validatebox" data-options="required:true" />
            </td>
        </tr>
        <tr>
            <td>User Name
            </td>
            <td>
                <input name="txtUsername" type="text" class="easyui-validatebox" data-options="required:true" />
            </td>
        </tr>
    </table>
</form>

The idea is to add a new user and I need to do it asynchronously. So I added One method behind aspx page as

[WebMethod]
 public static void AddUser()
 {

 }

And I have written ajax form submitting as

 $.ajax({
           type: "POST",
           url: "UserManagment.aspx/AddUser",
           data: $("#frmNewUser").serialize(),
           success: function (msg) {
             alert("hello");
           },
           error: function (xhr, ErrorText, thrownError) {
                    alert("Error" + xhr.status);
           }

       });

My doubts are
1. How to deserialize the form data in AddUser() method and what should be the parameters
2. The method AddUser() is never getting hit after ajax submitting .After debugging I come to know that only Page_Load() is getting Invoked. How could I get the control upto AddUser(). I already have added

<httpModules>
    <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpModules>

score 1 · Answer 1 · answered Feb 11 '14 at 09:05

to use WebMethod, you can do this... and there is no need to any httpmodule

server side (on a aspx page, it doesn't work on User Controls (.ascx)):

[WebMethod]
    public static void addUser(string Params)
    {
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var oParamter =  serializer.Deserialize<Paramter>(Params);
    }

    private class Paramter
    {
        public string id { get; set; }
        public string name { get; set; }
    }

html markup:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>

    <table>
        <tr>
            <td>User ID
            </td>
            <td>
                <input id="Text1" name="txtUserId" type="text" class="easyui-validatebox" data-options="required:true" />
            </td>
        </tr>
        <tr>
            <td>User Name
            </td>
            <td>
                <input id="Text2" name="txtUsername" type="text" class="easyui-validatebox" data-options="required:true" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>

                <input id="Button1" type="button" value="submit" onclick="Button1_click()" />

            </td>
        </tr>
    </table>

client javascript:

<script>

    function param() {

        this.id = document.getElementById("Text1").value;
        this.name = document.getElementById("Text2").value;
    };

    function Button1_click() {

        PageMethods.addUser(JSON.stringify(new param()), successHandler, failedHandler);
    };

    function successHandler() {
        alert("operation done successfully");
    };

    function failedHandler() {
        alert("operation failed");
    };

</script>

score 1 · Accepted Answer · answered Feb 11 '14 at 10:27

Ok I Sorted it out
Followed as per http://www.asp.net/ajaxlibrary/jquery_webforms_post_data_to_pagemethod.ashx

Basically page methods are expecting data in JSON format. So I modified ajax call as

$.ajax({
                type: "POST",
                url: "UserManagment.aspx/AddUser",
                dataType: "JSON",  // type of data is JSON (must be upper case!)  
                timeout: 10000,    // AJAX timeout  
                data: JSON.stringify({ formVars : $("#frmNewUser").serializeArray() }),
                contentType: "application/json",
                success: function (msg) {
                    alert("hello");
                },
                error: function (xhr, ErrorText, thrownError) {
                    alert("Error" + xhr.status);
                }  


            });

The "code behind" contains following code

public static void AddUser(NameValue[] formVars)
        {
           //formvars will contain list of values
            foreach (NameValue nv in formVars)
            {
                // strip out ASP.NET form vars like _ViewState/_EventValidation  
                if (!nv.name.StartsWith("__"))
                {
                   string ss = nv.value; 

                }
            }  
            return;
        }



        public class NameValue
        {
            public string name { get; set; }
            public string value { get; set; }
        }

Ajax submitting in asp.net

2 Answers2