اذهب إلى المحتوى
  • 0

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

Programmer

السؤال

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...