نمایش رکوردها از گریدویو در یک مدل Popup با استفاده از Jquery

در این مقاله ما درمورد کنترل گریدویو و چگونگی نمایش اطلاعات آن به صورت Popup با استفاده از Jquery و Ajax یاد خواهیم کرد.

ما همچنین یاد خواهیم گرفت که در پنجره Popup ،اطلاعات را ویرایش و بروزرسانی کنیم و در Database ذخیره کنیم.

در این مقاله ما ابن موارد را با استفاده از دو روش متفاوت در دو مثال متفاوت بررسی خواهیم کرد.

- نمایش اطلاعات انتخاب شده با استفاده از Jquery

- نمایش اطلاعات انتخاب شده با استفاده از Ajax

نمایش اطلاعات انتخاب شده با استفاده از Jquery

ما یک مثال ساده از یک پنجره Popup با استفاده از Jquery در گرید ویو می سازیم.

مرحله اول

ویژوال استودیو را باز می کنید و project را انتخاب می کنید.

مرحله دوم

یک Empty Template را انتخاب می کنید.

مرحله سوم

New Item را Add کرده و WebForm را انتخاب کرده و یک نام زیبا به آن می دهید.

مرحله 4

یک Jquery به پروژه اضافه کنید

روی پروژه راست کلیک کنید و Manage NuGet Packeges را انتخاب کنید و آخرین ورژن Jquey vh دانلود کنید.

مرحله 5

به صفحه ،یک گریدویو اضافه کنید و تعدادی داده به آن بایند کنید.

نمایش اطلاعات در یک dialog box ،نیاز به استفاده از یک مدل JqueryUI همانند زیر دارد

مرحله 7

در گرید ویو یک باتن با یک ID وجود دارد . برای این ID ما دایالوگ باکس مدل Popup را صدا میکنیم.


    $(document).on("click", "[id*=btn]", function () {  
            $("#id").html($(".Id", $(this).closest("tr")).html());  
            $("#name").html($(".Name", $(this).closest("tr")).html());  
            $("#add").html($(".add", $(this).closest("tr")).html());  
            $("#dialog").dialog({  
                title: "View Details",  
                buttons: {  
                    Ok: function () {  
                        $(this).dialog('close');  
                    }  
                },  
                modal: true  
            });  
            return false;  
        });

خروجی:

وقتی شما روی view button کلیک می کنید پنجره Jquery با اطلاعات مربوط به آن سطر باز می شود.

کد:



    <html>  
    <head runat="server">  
        <title>Untitled Page</title>  
        <script src="Scripts/jquery-2.1.1.min.js"></script>  
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>  
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"  
            rel="stylesheet" type="text/css" />  
        <script type="text/javascript">  
            $(document).on("click", "[id*=btn]", function () {  
                $("#id").html($(".Id", $(this).closest("tr")).html());  
                $("#name").html($(".Name", $(this).closest("tr")).html());  
                $("#add").html($(".add", $(this).closest("tr")).html());  
                $("#dialog").dialog({  
                    title: "View Details",  
                    buttons: {  
                        Ok: function () {  
                            $(this).dialog('close');  
                        }  
                    },  
                    modal: true  
                });  
                return false;  
            });  
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
            <asp:GridView ID="GridView1" HeaderStyle-BackColor="Blue" HeaderStyle-ForeColor="White"  
                runat="server" AutoGenerateColumns="false">  
                <Columns>  
                    <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />  
                    <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />  
                    <asp:BoundField DataField="Address" ItemStyle-CssClass="add" HeaderText="Address"  
                        ItemStyle-Width="150" />  
                    <asp:TemplateField>  
                        <ItemTemplate>  
                            <asp:Button Text="View" ID="btn" runat="server" BackColor="AliceBlue" />  
                        </ItemTemplate>  
                    </asp:TemplateField>  
                </Columns>  
            </asp:GridView>  
            <div id="dialog" style="display: none">  
                <b>Id:</b> <span id="id"></span>  
                <br />  
                <b>Name:</b> <span id="name"></span>  
                <br />  
                <b>Address:</b> <span id="add"></span>  
            </div>  
       
        </form>  
    </body>  
    </html>

نمایش اطلاعات انتخاب شده با استفاده از Ajax

نمایش تمامی اطلاعات با استفاده Ajax toolkit.

ما برای نمایش اطلاعات در یک پنجره Popup با استفاده از Ajax به روش زیر عمل می کنیم.

مرحله اول:

ما هم اکنون نیاز داریم 5 مرحله قبل را انجام دهیم. ما باید Ajax Library را نصب کنیم.

مرحله دوم:

Ajax Control Toolkit را دانلود می کنیم.

مرحله سوم:

بعد از دانلود،همه ی فایل ها را extract می کنیم.

مرحله 4:

Dll file را در ویژوال استودیو اضافه می کنیم.

مرحله 5:

گریدویو را اضافه می کنیم.

مرحله 6:

یک css file را به پروژه اضافه می کنیم.

مرحله 7:

ToolScriptManager را به Webform اضافه کرده و رویداد SelectedIndexChanged گریدویو را فعال می کنیم.

مرحله 8:

ModelpopupExtender را به webform اضافه می کنیم.

مرحله 9:

پنلی را که شبیه یک پنجره popup است را اضافه می کنیم.

مرحله 10:

هم اکنون یک datatable همراه با داده های آنرا به گریدویو اضافه میکنیم


    if (!this.IsPostBack)  
               {  
                   DataTable dt = new DataTable();  
                   dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Address") });  
                   dt.Rows.Add(1, "Rajeev", "Hazaribagh");  
                   dt.Rows.Add(2, "Ranjan", "New Delhi");  
                   dt.Rows.Add(3, "Prerana Tiawri", "Noida");  
                   dt.Rows.Add(4, "Kumar Rohit", "Pune");  
                   GridView1.DataSource = dt;  
                   GridView1.DataBind();  
                   GridView1.DataSource = dt;  
                   GridView1.DataBind();  
               }

مرحله 11:

حال یک مدل pop-up را از داخل رویداد OnSelectedIndexChanged باز کنید



    lblId.Text = GridView1.SelectedRow.Cells[0].Text;  
               lblName.Text = GridView1.SelectedRow.Cells[1].Text;  
               lblCountry.Text = (GridView1.SelectedRow.FindControl("lblAdd") as Label).Text;  
               mp.Show();

خروجی:

بعد از کلیک روی باتن ،اطلاعات سطر مربوطه در یک پنجره popup نمایش داده میشود

از همراهی شما در این مقاله سپاسگزارم.

فایل های ضمیمه

gridAjaxAndjQuery.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان