2012-06-04 2 views
1

Json.I를 사용하여 Gridview를 바인딩합니다. 내 페이지에서 한 개의 텍스트 상자, 검색 버튼 및 하나의 gridview를 추가했습니다. 그 시점에로드 된 페이지는 모든 데이터가 Gridview.and에 바인딩됩니다. 텍스트 상자에 텍스트 입력 후 검색 버튼을 클릭하면 검색 결과가 표시되지만 모든 데이터가 포함 된 검색 결과 데이터가 추가됩니다. 검색 결과 데이터를 바인딩하기 만하면됩니다.Json 데이터를 사용하여 바인딩 된 Gridview에 대한 #

내 코드는

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



} 

당신이 볼 경우 나는 그것을 왜 사용 했는가? ch 결과는 모든 data.but와 함께 추가됩니다. 검색 결과 만 원하는 경우 검색 버튼을 클릭합니다. Google에서 검색했지만 아무 것도받지 못했습니다. 제발 도와주세요.

+0

가 정확한 데이터를 얻을나요 항상 볼 수 할 제안? – StrouMfios

+0

예 올바른 데이터를 얻었습니다 –

+0

문제를 완전히 이해했는지 모르겠지만 for 루프 전에 gvDetails를 지우십시오. $ ("# gvDetails"). empty(); – 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

확인해 봤어? 그것의 작동하지 않습니다 .... –

관련 문제