title: Using Json Data for Bind Gridview in c#
body: <p>I am binding the Gridview using Json.I have added one textbox,Search button and one gridview in my Page.when the Page Loaded at that time all the data will bind in Gridview.and after Entering Text in textbox and click on search button then  search results will display but it just append the search result data with all data.I want just bind the search Result data.</p>
  
  <p>My code is </p>
  
  <p>.aspx Page</p>
  
  <pre><code> &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;asp:TextBox ID="txtSearch" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;asp:Button ID="btnSearch" runat="server" Text="Search" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;asp:GridView ID="gvDetails" runat="server"&gt;
                      &lt;HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" /&gt;
                  &lt;/asp:GridView&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Now Script is Like this</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          //    function () {
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "Gridview.aspx/BindDatatable",
              async: true,
              cache: false,
              data: "{}",
              dataType: "json",
              success: function (data) {
                  for (var i = 0; i &lt; data.d.length; i++) {
                      $("#gvDetails").append("&lt;tr&gt;&lt;td&gt;" + data.d[i].OfficeName + "&lt;/td&gt;&lt;td&gt;" + data.d[i].City + "&lt;/td&gt;&lt;td&gt;" + data.d[i].Country + "&lt;/td&gt;&lt;/tr&gt;");
  
                  }
              },
              error: function (result) {
                  alert("Error");
              }
          });
  
          $('#btnSearch').click
                              (
                                  function () {
  
                                      var searchtext = $("#txtSearch").val();
  
                                      alert(searchtext);
                                      $.ajax(
                                                  {
                                                      type: "POST",
                                                      url: "Gridview.aspx/BindSearchDatatable",
                                                      //data: "{officename : '"+searchtext+"'}",
                                                      data: JSON.stringify({ officename: searchtext }),
                                                      contentType: "application/json; charset=utf-8",
                                                      dataType: "json",
                                                      async: true,
                                                      cache: false,
                                                      success: function (data) {
  
  
                                                          for (var i = 0; i &lt; data.d.length; i++) {
  
                                                              $("#gvDetails").append("&lt;tr&gt;&lt;td&gt;" + data.d[i].OfficeName + "&lt;/td&gt;&lt;td&gt;" + data.d[i].City + "&lt;/td&gt;&lt;td&gt;" + data.d[i].Country + "&lt;/td&gt;&lt;/tr&gt;");
                                                          }
                                                      },
                                                      error: function (x, e) {
                                                          alert("The call to the server side failed. " + x.responseText);
                                                      }
                                                  }
                                              );
                                      return false;
                                  }
                              );
  
  
          // }
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Now .aspx.cs Page code </p>
  
  <pre><code>public partial class Gridview : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
              BindColumnToGridview();
          }
      }
  
      private void BindColumnToGridview()
      {
          DataTable dt = new DataTable();
          dt.Columns.Add("OfficeName");
          dt.Columns.Add("City");
          dt.Columns.Add("Country");
          dt.Rows.Add();
          gvDetails.DataSource = dt;
          gvDetails.DataBind();
          gvDetails.Rows[0].Visible = false;
      }
  
      [WebMethod]
      public  static OfficeDetails[] BindDatatable()
      {
          DataTable dt = new DataTable();
          List&lt;OfficeDetails&gt; details = new List&lt;OfficeDetails&gt;();
  
          using (SqlConnection con = new SqlConnection(@"Data Source=kartikpatel\SQLEXPRESS;Initial Catalog=master;Integrated Security=True"))
          {
              using (SqlCommand cmd = new SqlCommand("select  OfficeName,City,Country from Office", con))
              {
                  con.Open();
                  SqlDataAdapter da = new SqlDataAdapter(cmd);
                  da.Fill(dt);
                  foreach (DataRow dtrow in dt.Rows)
                  {
                      OfficeDetails Office = new OfficeDetails();
                      Office.OfficeName = dtrow["OfficeName"].ToString();
                      Office.City = dtrow["City"].ToString();
                      Office.Country = dtrow["Country"].ToString();
                      details.Add(Office);
                  }
              }
          }
          return details.ToArray();
  
      }
      [WebMethod]
      public static OfficeDetails[] BindSearchDatatable(string officename)
      {
  
          DataTable dt = new DataTable();
          List&lt;OfficeDetails&gt; details = new List&lt;OfficeDetails&gt;();
  
          using (SqlConnection con = new SqlConnection(@"Data Source=kartikpatel\SQLEXPRESS;Initial Catalog=master;Integrated Security=True"))
          {
              using (SqlCommand cmd = new SqlCommand("select  OfficeName,City,Country from Office where OfficeName like '%" + officename + "%'", con))
              {
                  con.Open();
                  SqlDataAdapter da = new SqlDataAdapter(cmd);
                  da.Fill(dt);
                  foreach (DataRow dtrow in dt.Rows)
                  {
                      OfficeDetails Office = new OfficeDetails();
                      Office.OfficeName = dtrow["OfficeName"].ToString();
                      Office.City = dtrow["City"].ToString();
                      Office.Country = dtrow["Country"].ToString();
                      details.Add(Office);
                  }
              }
          }
          return details.ToArray();
      }
      public class OfficeDetails
      {
          public string OfficeName { get; set; }
          public string City { get; set; }
          public string Country { get; set; }
      }
  
  
  
  }
  </code></pre>
  
  <p>If you see in  I used append thats why the search Result is appended with all data.but i want only search Result data when i click on search button.I searched on google but i didnt get anything..Please help me</p>