title: Making ajax calls using $.ajax in ASP.NET Web Forms
body: <p>I am trying to use <code>$.ajax</code> method in my example program. I have designed the page like below:</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              Country:
              &lt;asp:TextBox ID="txtCountry" runat="server"&gt;&lt;/asp:TextBox&gt;
              Title:
              &lt;asp:TextBox ID="txtTitle" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;asp:Button ID="btnAjax" runat="server" Text="$.ajax()" /&gt;
              &lt;div id="container"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(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 &lt; results.length; i++) {
                      $("#container").append("&lt;tr&gt;" +
                          "&lt;td&gt;" + results[i].EmployeeID + "&lt;/td&gt;" + 
                          "&lt;td&gt;" + results[i].FirstName + "&lt;/td&gt;" + 
                          "&lt;td&gt;" + results[i].LastName + "&lt;/td&gt;"
                          );
                  }
              }
  
              function ErroticAjaxResponse(jqXHR, status, error) {
                  alert("Error: " + status);
              }
          &lt;/script&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Code inside <strong>PostTarget.aspx.cs</strong> is defined below.</p>
  
  <pre><code>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 =&gt; x.Country.Contains(country) || x.Title.Contains(title))
          .Select(x =&gt; new EmployeeSearchResult
      {
          EmployeeID = x.EmployeeID,
          FirstName = x.FirstName,
          LastName = x.LastName
      });
      Response.Clear();
      Response.Write(JsonConvert.SerializeObject(emps));
      Response.Flush();
      Response.End();
  }
  </code></pre>
  
  <p>When debugging the above, I am not getting values into <code>country</code>, and <code>title</code> variables.</p>
  
  <p>Verified some online resources, but code is almost similar.</p>
  
  <p>Can anyone please check and suggest me if I am doing wrong anywhere?</p>