2012-06-04 50 views
1

我使用Json绑定Gridview。我在Page.when页面中添加了一个文本框,搜索按钮和一个GridView,当时加载的页面所有数据都将在Gridview.and中绑定在文本框中输入文本并点击搜索按钮后,搜索结果将显示,但它只是将搜索结果数据附加到所有数据。我只想绑定搜索结果数据。使用Json数据绑定Gridview在c#

我的代码是

.aspx页面中

<table> 
     <tr> 
      <td> 
       <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> 
      </td> 
      <td> 
       <asp:Button ID="btnSearch" runat="server" Text="Search" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <asp:GridView ID="gvDetails" runat="server"> 
        <HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" /> 
       </asp:GridView> 
      </td> 
     </tr> 
    </table> 

现在剧本是这样的

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
    $(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 < data.d.length; i++) { 
        $("#gvDetails").append("<tr><td>" + data.d[i].OfficeName + "</td><td>" + data.d[i].City + "</td><td>" + data.d[i].Country + "</td></tr>"); 

       } 
      }, 
      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 < data.d.length; i++) { 

                  $("#gvDetails").append("<tr><td>" + data.d[i].OfficeName + "</td><td>" + data.d[i].City + "</td><td>" + data.d[i].Country + "</td></tr>"); 
                 } 
                }, 
                error: function (x, e) { 
                 alert("The call to the server side failed. " + x.responseText); 
                } 
               } 
              ); 
            return false; 
           } 
          ); 


     // } 
    }); 

</script> 

现在.aspx.cs页面代码

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<OfficeDetails> details = new List<OfficeDetails>(); 

     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<OfficeDetails> details = new List<OfficeDetails>(); 

     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; } 
    } 



} 

如果你看到在我使用appends那为什么在搜索ch结果附加了所有data.but我只想要搜索结果数据,当我点击搜索button.I搜索谷歌,但我没有得到任何东西..请帮助我

+0

你得到正确的数据中的所有时间,同时点击按钮? – StrouMfios

+0

是的,我得到了正确的数据 –

+0

我不确定我是否完全理解您的问题,但尝试在for循环之前清除gvDetails。 $( “#gvDetails”)空(); – StrouMfios

回答

1

正如我从你的代码可以看出,你是使用GridView作为占位符。 我建议做以下

<table> 
    <tr> 
     <td> 
      <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> 
     </td> 
     <td> 
      <asp:Button ID="btnSearch" runat="server" Text="Search" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <table> 
       <thead> 
        <tr> 
        <td>OfficeName</td> 
        <tr> 
        <tr> 
        <td>City</td> 
        <tr> 
        <tr> 
        <td>Country</td> 
        <tr> 
       </thead> 
       <tbody> 
        <div id="gvDetails"></div> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
</table> 


<script> 
$('#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) { 

                $("#gvDetails").empty(); 
                for (var i = 0; i < data.d.length; i++) { 

                 $("#gvDetails").append("<tr><td>" + data.d[i].OfficeName + "</td><td>" + data.d[i].City + "</td><td>" + data.d[i].Country + "</td></tr>"); 
                } 
               }, 
               error: function (x, e) { 
                alert("The call to the server side failed. " + x.responseText); 
               } 
              } 
             ); 
           return false; 
          } 
         ); 
</script 

通过这种方式,头部有明显的

+0

你检查过了吗?它不工作.... –