كيف أُنفذ عملية Bind لـ GridView اعتمادًا على قيمة قائمة منسدلة باستخدام JQuery؟

Programmer · 20 مايو 2016

عندي نموذج يتم فيه عرض معلومات المستخدمين في GridView وقائمة منسدلة DropDownList تحوي خيارات عرض معلومات المستخدمين مثل (المستخدمين الجدد، المستخدمين الأكثر نشاطًا..الخ)

أريد عند اختيار قيمة منها أن يتم تعبئة الـ GridView على أساسها كيف يمكنني تحقيق ذلك باستخدام Jquery؟

Lujain · 20 مايو 2016

يعتمد تعبئة الـ Grid View على إنشاء تابع يقوم بملء الـ GridView باستخدام Ajax ليتم عمل append للـ Grid View وفق قيمة data المررة للـ Ajax code من التابع ready حيث يتم أخذ قيمة القائمة المنسدلة وإسنادها لمتحول أو عنصر كـ Label مثلًا في التابع ready كما في المثال التالي:

 $(document).ready(function () {
            $('#DropDownList1').change(function () {
                var SelectedText = $(this).find(":selected").text();
                var SelectedValue = $(this).val();
                $('#country').text(SelectedText);
                $('#Value').text(SelectedValue);

                BindGridView();

            });
        });

إنشاء التابع BindGridView:

<!DOCTYPE html>
<html>
<head runat="server">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function BindGridView() {

            $.ajax({
                type: "POST",
                url: "Index.aspx/GetData",
                contentType: "application/json;charset=utf-8",
                data: {},
                dataType: "json",
                success: function (data) {

                    $("#grdDemo").empty();

                    if (data.d.length > 0) {
                        $("#grdDemo").append("<tr><th>Username</th>  
                        <th>Firstname</th>  <th>Lastname</th>  
                        <th>EmailID</th></tr>");
                        for (var i = 0; i < data.d.length; i++) {

                            $("#grdDemo").append("<tr><td>" + 
                            data.d[i].Firstname + "</td> <td>" + 
                            data.d[i].Lastname + "</td> <td>" + 
                            data.d[i].Username + "</td> <td>" + 
                            data.d[i].EmailID + "</td></tr>");
                        }
                    }
                },
                error: function (result) {
                    //alert("Error login");

                }
            });
        }
    </script>
</head>

النموذج:

<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:listitem value="1">Australia</asp:listitem>
                <asp:listitem value="2">India </asp:listitem>
                <asp:listitem value="3">Singapore</asp:listitem>
                <asp:listitem value="4">South Africa</asp:listitem>
            </asp:DropDownList>
            <br />
            <asp:Label ID="country" runat="server"></asp:Label>
            <br />
            <asp:Label ID="Value" runat="server"></asp:Label>

            <asp:GridView ID="grdDemo" runat="server">
            </asp:GridView>
        </div>
    </form>
</body>