• 0

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

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يعتمد تعبئة الـ 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>

Bind Data to GridView Using jQuery

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن