Error with Using jQuery to POST Form Data to an ASP.NET ASMX AJAX Web Service

Question

I am trying to implement a jquery ajax method that post a whole form. Now I got the jquery successfully execute the server side code, but the server side variable NameValue[] formVars is empty !! I can't figure out why. Could anyone help with this issue. thanks

But my jquery ajax call always return blank error.

Here is my javascript code

 <script type="text/javascript">

    $(document).ready(function () {


        var MaxInputs = 8; //maximum input boxes allowed
        var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
        var AddButton = $("#AddMoreFileBox"); //Add button ID

        var x = InputsWrapper.length; //initlal text box count
        var FieldCount = 1; //to keep track of text box added

        $(AddButton).click(function (e)  //on add input button click
        {
            if (x <= MaxInputs) //max input box allowed
            {
                FieldCount++; //text box added increment
                //add input box
                $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_' + FieldCount + '" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">&times;</a></div>');
                x++; //text box increment
            }
            return false;
        });

        $("#main_container").on("click", ".removeclass", function (e) { //user click on remove text
            //alert("clicked");
            if (x > 1) {
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
            }
            return false;
        })


        // Add the page method call as an onclick handler for the div.
        $("#Result").click(function () {
            $.ajax({
                type: "POST",
                url: "testingJqueryAjax.aspx/GetDate",
                data: "{'msg':'hello'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // Replace the div's content with the page method's return.
                    $("#Result").text(msg.d);
                }
            });
        });
        function sendRegistration() {
            var arForm = $("#form1").serializeArray();

            $.ajax({
                type: "POST",
                url: "testingJqueryAjax.aspx/ExecuteRegistration",
                contentType: "application/json",
                data: JSON.stringify({ formVars: arForm }),
                dataType: "json",
                success: function (result) {
                     var jEl = $("#msgdiv");
                    jEl.html(result.d).fadeIn(1000);
                    setTimeout(function () { jEl.fadeOut(1000) }, 5000);
                   // $("#msgdiv").text(result.d);
                },
                error: function (ts) {
                    alert("An error occurred: " + ts.responseText);
                }
            });
        }


        $("#btnSend").click(function () {
            alert("btnSend clicked");
            sendRegistration();
        });
    });
</script>

Here is my server side code

 [WebMethod]
    public static string ExecuteRegistration(NameValue[] formVars)
    {
        StringBuilder sb = new StringBuilder();

        sb.AppendFormat("Thank you {0}, <br/><br/>",
                        HttpUtility.HtmlEncode(formVars.Form("txtName")));

        sb.AppendLine("You've entered the following: <hr/>");

        foreach (NameValue nv in formVars)
        {
            // strip out ASP.NET form vars like _ViewState/_EventValidation
            if (!nv.name.StartsWith("__"))
            {
                if (nv.name.StartsWith("txt") || nv.name.StartsWith("lst") || nv.name.StartsWith("chk"))
                    sb.Append(nv.name.Substring(3));
                else
                    sb.Append(nv.name);
                sb.AppendLine(": " + HttpUtility.HtmlEncode(nv.value) + "<br/>");
            }
        }
        sb.AppendLine("<hr/>");

        string[] needs = formVars.FormMultiple("lstSpecialNeeds");
        if (needs == null)
            sb.AppendLine("No Special Needs");
        else
        {
            sb.AppendLine("Special Needs: <br/>");
            foreach (string need in needs)
            {
                sb.AppendLine("&nbsp;&nbsp;" + need + "<br/>");
            }
        }

        return sb.ToString();
    }

Here are the html

<hr />
 <div id="msgdiv">
    divmsg : 
</div>
<div id="div1" class="errordisplay" style="display: none">
</div>

<div>
    <div class="label">Name:</div>
    <div>
        <asp:TextBox runat="server" ID="txtName" />
    </div>
</div>
<div>
    <div class="label">Company:</div>
    <div>
        <asp:TextBox runat="server" ID="txtCompany" />
    </div>
</div>
<div>
    <div class="label"></div>
    <div>
        <asp:DropDownList runat="server" ID="lstAttending">
            <asp:ListItem Text="Attending" Value="Attending" />
            <asp:ListItem Text="Not Attending" Value="NotAttending" />
            <asp:ListItem Text="Maybe Attending" Value="MaybeAttending" />
            <asp:ListItem Text="Not Sure Yet" Value="NotSureYet" />
        </asp:DropDownList>
    </div>
</div>
<div>
    <div class="label">
        Special Needs:<br />
        <small>(check all that apply)</small>
    </div>
    <div>
        <asp:ListBox runat="server" ID="lstSpecialNeeds" SelectionMode="Multiple">
            <asp:ListItem Text="Vegitarian" Value="Vegitarian" />
            <asp:ListItem Text="Vegan" Value="Vegan" />
            <asp:ListItem Text="Kosher" Value="Kosher" />
            <asp:ListItem Text="Special Access" Value="SpecialAccess" />
            <asp:ListItem Text="No Binder" Value="NoBinder" />
        </asp:ListBox>
    </div>
</div>
<div>
    <div class="label"></div>
    <div>
        <asp:CheckBox ID="chkAdditionalGuests" Text="Additional Guests" runat="server" />
    </div>
</div>

<hr />

<input type="button" id="btnSend" value="Send Registration" />

I follow the tutorialon the following link, instead of using asmx, I used aspx static method. now running the code I can successfully execute the server side code, but it does not pick up any data from the webform.

The NameValue[] formVars variable has no entries. WHY??

An update on this, I have put the code on a blank aspx page, then the program works. Originally I put it on an aspx page built on a master page. So it appears to have something to do with the master page.

Answer 1

I have managed to solve this problem, the issue was caused by java script references on the master page that my testing page is inherited from.

Answer 2

Comment in this block:

// [System.Web.Script.Services.ScriptService]