1

Jsonを使用してGridviewをバインドしています.Pageに1つのテキストボックス、検索ボタン、1つのグリッドビューを追加しました.その時点でページが読み込まれると、すべてのデータが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; }
    }



}

追加を使用したことがわかる場合は、検索結果がすべてのデータに追加される理由です.しかし、検索ボタンをクリックしたときに結果データのみを検索したい.Googleで検索しましたが、何も得られませんでした..助けてください.

4

1 に答える 1

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

このようにして、ヘッダーは常に表示されます

于 2012-06-04T11:47:06.567 に答える