title: Populating data to GridView using Ajax, Post Method is not working. How to solve this?
body: <p>I just created an ASP.Net Web Application that includes empty templates with reference to 'WEB API'. Inside that I created a Web Form named "ProductsWebForm.aspx" and a controller named "ProductsWebAPIEmptyController.cs". Data is not populated in Gridview and it alerts "Undefined". Inside the console the error message was:</p>
  
  <pre><code>&lt;Error&gt;
  &lt;Message&gt;
  No HTTP resource was found that matches the request URI 'http://localhost:55119/api/ProductsWebAPIEmptyController'.
  &lt;/Message&gt;
  &lt;MessageDetail&gt;
  No type was found that matches the controller named 'ProductsWebAPIEmptyController'.
  &lt;/MessageDetail&gt;
  &lt;/Error&gt;
  </code></pre>
  
  <p>Here is my code inside WEbForm "ProductsWebForm.aspx" :</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
         &lt;asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="False"&gt;
              &lt;Columns&gt;
                           &lt;asp:TemplateField HeaderText="Product_Id" ItemStyle-Width="110px" ItemStyle-CssClass="Product_Id"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Id") %&gt;' runat="server" /&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Id" Width="110px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Product_Name" ItemStyle-Width="150px" ItemStyle-CssClass="Product_Name"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Name") %&gt;' runat="server" /&gt;
                  &lt;asp:TextBox Text='&lt;%# Eval("Product_Name") %&gt;' runat="server" Style="display: none" /&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Name" Width="150px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Product_Description" ItemStyle-Width="150px" ItemStyle-CssClass="Product_Description"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Description") %&gt;' runat="server" /&gt;
                  &lt;asp:TextBox Text='&lt;%# Eval("Product_Description") %&gt;' runat="server" Style="display: none" /&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Description" Width="150px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Product_Category" ItemStyle-Width="150px" ItemStyle-CssClass="Product_Category"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Category") %&gt;' runat="server" /&gt;
                  &lt;asp:DropDownList ID="DropDownList1" runat="server" &gt;
                              &lt;asp:ListItem&gt;Select Category&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem&gt;Laptops&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem&gt;Mobiles&lt;/asp:ListItem&gt;
                  &lt;/asp:DropDownList&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Category" Width="150px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Product_Price" ItemStyle-Width="150px" ItemStyle-CssClass="Product_Price"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Price") %&gt;' runat="server" /&gt;
                  &lt;asp:TextBox Text='&lt;%# Eval("Product_Price") %&gt;' runat="server" Style="display: none" /&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Price" Width="150px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Prodcut_Quantity" ItemStyle-Width="150px" ItemStyle-CssClass="Product_Quantity"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:Label Text='&lt;%# Eval("Product_Quantity") %&gt;' runat="server" /&gt;
                  &lt;asp:TextBox Text='&lt;%# Eval("Product_Quantity") %&gt;' runat="server" Style="display: none" /&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;ItemStyle CssClass="Product_Quantity" Width="150px"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;
             &lt;asp:TemplateField&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:LinkButton Text="Edit" runat="server" CssClass="Edit" /&gt;
                  &lt;asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" /&gt;
                  &lt;asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" /&gt;
                  &lt;asp:LinkButton Text="Delete" runat="server" CssClass="Delete" /&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
  
      &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
   &lt;table border="1"  style="border-collapse: collapse"&gt;
        &lt;tr&gt;
           &lt;td style="width: 150px"&gt;Product
                      Name:&lt;br /&gt;
                  &lt;asp:TextBox ID="txtName" runat="server" Width="140" /&gt;
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
                  Product Description:&lt;br /&gt;
              &lt;asp:TextBox ID="txtDescription" runat="server" Width="140" /&gt;
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
              Product Category:&lt;br /&gt;
              &lt;asp:DropDownList ID="InsertDropDownList" runat="server"&gt;
                              &lt;asp:ListItem&gt;Select Category&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem&gt;Laptops&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem&gt;Mobiles&lt;/asp:ListItem&gt;
  
  
               &lt;/asp:DropDownList&gt;
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
              Product Price:&lt;br /&gt;
              &lt;asp:TextBox ID="txtPrice" runat="server" Width="140" /&gt;
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
              Product Quantity:&lt;br /&gt;
              &lt;asp:TextBox ID="txtQuantity" runat="server" Width="140" /&gt;
          &lt;/td&gt;
          &lt;td style="width: 100px"&gt;
              &lt;br /&gt;
              &lt;asp:Button ID="btnAdd" runat="server" Text="Add" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Here is my code ajax jquery code:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
       $(document).ready(function () {
          $.ajax({
              type: "POST",
              url: "/api/ProductsWebAPIEmptyController",
              data: '{}',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: OnSuccess,
              failure: function(response)
              {
                  alert(response.d);
  
              },
              error: function(response)
          {
                  alert(response.d);
          }
          });
      });
  
       function OnSuccess(response) {
           //console.log(response.d);
          var xmlDoc = $.parseXML(response.d);
          var xml = $(xmlDoc);
          var products = xml.find("Table");
          var row = $("[id*=GridView1] tr:last-child").clone(true);
          $("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove();
          $.each(products, function () {
              var customer = $(this);
              AppendRow(row, $(this).find("Product_Id").text(), $(this).find("Product_Name").text(), $(this).find("Product_Description").text(), $(this).find("Product_Category").text(), $(this).find("Product_Price").text(), $(this).find("Product_Quantity").text())
              row = $("[id*=GridView1] tr:last-child").clone(true);
          });
      }
      function AppendRow(row, Product_Id, Product_Name, Product_Description, Product_Category, Product_Price, Product_Quantity) {
          //Bind ProductId.
          $(".Product_Id", row).find("span").html(Product_Id);
  
          //Bind Name.
          $(".Product_Name", row).find("span").html(Product_Name);
          $(".Product_Name", row).find("input").val(Product_Name);
  
          $("Product_Description", row).find("span").html(Product_Description);
          $("Product_Description", row).find("input").val(Product_Description);
  
          $("Product_Category", row).find("span").html(Product_Category);
          $("Product_Category", row).find("input").val(Product_Category);
  
  
          $("Product_Price", row).find("span").html(Product_Price);
          $("Product_Price", row).find("input").val(Product_Price);
  
          $("Product_Quantity", row).find("span").html(Product_Quantity);
          $("Product_Quantity", row).find("input").val(Product_Quantity);
          $("[id*=GridView1]").append(row);
      }
  </code></pre>
  
  <p>I even tried url:"/api/ProductsWebAPIEmptyController/GetProducts". THis is my code inside ProductsWebForm.aspx.cs :</p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
              {
                  this.BindDummyRow();
              }
          }
          private void BindDummyRow()
          {
              DataTable dummy = new DataTable();
              dummy.Columns.Add("Product_Id");
              dummy.Columns.Add("Product_Name");
              dummy.Columns.Add("Product_Description");
              dummy.Columns.Add("Product_Category");
              dummy.Columns.Add("Product_Price");
              dummy.Columns.Add("Product_Quantity");
              dummy.Rows.Add();
              GridView1.DataSource = dummy;
              GridView1.DataBind();
  
  
          }
  
          protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
          {
  
          }
      }
  }
  </code></pre>
  
  <p>I created WebAPI 2 Controller Empty named "ProductsWebAPIEmptyController.cs" :</p>
  
  <pre><code>namespace GridViewWithAjaxIIIWebApplication.Controllers
  {   
      public class ProductsWebAPIEmptyController : ApiController
      {
          [WebMethod]
          public static string GetCustomers()
          {
              string query = "Select Product_Id, Product_Name, Product_Description, Product_Category, Product_Price, Product_Quantity from Items";
  
  
              String cs = ConfigurationManager.ConnectionStrings["WebShopDB"].ConnectionString;
              using (SqlConnection con = new SqlConnection(cs))
              {
                  using (SqlDataAdapter sda = new SqlDataAdapter())
                  {
                      SqlCommand cmd = new SqlCommand();
                      sda.SelectCommand = cmd;
                      cmd.Connection = con;
                      cmd.CommandText = query;
                      using (DataSet ds = new DataSet())
                      {
                          sda.Fill(ds);
                          return ds.GetXml();
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>Please help me to run this code:<a href="https://i.stack.imgur.com/ONb2r.png" rel="nofollow noreferrer">enter image description here</a></p>