在ASP.NET Web窗体中使用$ .ajax进行ajax调用

Question

I am trying to use $.ajax method in my example program. I have designed the page like below:

<form id="form1" runat="server">
        <div>
            Country:
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            Title:
            <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
            <asp:Button ID="btnAjax" runat="server" Text="$.ajax()" />
            <div id="container"></div>
        </div>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnAjax").click(function (evt) {
                    debugger;
                    var data = {};
                    data.country = $("#txtCountry").val();
                    data.title = $("#txtTitle").val();
                    $.ajax({
                        url: "PostTarget.aspx",
                        type: "POST",
                        data: data,
                        contentType: "x-www-form-urlencoded;charset=UTF-8",
                        dataType: "json",
                        success: SuccessfulAjaxResponse,
                        error: ErroticAjaxResponse
                    });
                    evt.preventDefault();
                });
            });
            function SuccessfulAjaxResponse(results, status, jqXHR) {
                $("#container").empty();
                for (var i = 0; i < results.length; i++) {
                    $("#container").append("<tr>" +
                        "<td>" + results[i].EmployeeID + "</td>" + 
                        "<td>" + results[i].FirstName + "</td>" + 
                        "<td>" + results[i].LastName + "</td>"
                        );
                }
            }

            function ErroticAjaxResponse(jqXHR, status, error) {
                alert("Error: " + status);
            }
        </script>
    </form>

Code inside PostTarget.aspx.cs is defined below.

protected void Page_Load(object sender, EventArgs e)
{
    var country = Request.Form["country"];
    var title = Request.Form["title"];
    var db = new NORTHWNDEntities();
    var emps = db.Employees
        .Where(x => x.Country.Contains(country) || x.Title.Contains(title))
        .Select(x => new EmployeeSearchResult
    {
        EmployeeID = x.EmployeeID,
        FirstName = x.FirstName,
        LastName = x.LastName
    });
    Response.Clear();
    Response.Write(JsonConvert.SerializeObject(emps));
    Response.Flush();
    Response.End();
}

When debugging the above, I am not getting values into country , and title variables.

Verified some online resources, but code is almost similar.

Can anyone please check and suggest me if I am doing wrong anywhere?

Answer 1

You are not sending the data correctly. For the 'x-www-form-urlencoded' type the string should be in the format:

country=countryName&title=titleName

As it is not, the Request.Form method is not being given the data in the format it expects.