在C＃中使用Json数据绑定Gridview

Question

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.

My code is

.aspx Page

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

Now Script is Like this

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

Now .aspx.cs Page 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<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; }
    }



}

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

Answer 1

As I can see from your code, you are using the GridView just as a placeholder. I would suggest to do the following

<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

By this way, the header will be visible all the time