نحوه ایجاد یک GridView به صورت Modal Pop-Up بر روی یک Gridview دیگر

یکشنبه 7 تیر 1394

در این مقاله خواهیم آموخت که چگونه می توانیم یک GridView به صورت Modal Pop-Up بر روی یک Gridview دیگر ایجاد کنیم.

نحوه ایجاد یک GridView به صورت Modal Pop-Up بر روی یک Gridview دیگر

در این مقاله نشان میدهیم که با استفاده از bootstrap چگونه می توانیم  یک GridView به صورت Modal Pop-Up بر روی یک Gridview دیگر با کلیک برروی link button نمایش دهیم.

خواهیم آموخت که یک صفحه pop-up بعد از کلیک برروی link button که در کنار اولین Grid قرار دارد نمایش دهیم. صفحه Grid دوم در یک modal-popup از bootstrap باز می شود. Bootstrap برای طراحی صفحات واکنش گرای سایت بسیار مناسب است. در اینجا از کتابخانه jQuery و Bootstrap استفاده کرده ایم.

در صفحه Design در بخش head کتابخانه موردنظر را اضافه کنید. همچنین می توانید این کتابخانه را در کد خود دانلود کرده و به پروژه اضافه کنید.

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
        <!-- Optional theme -->  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
            <!-- Latest compiled and minified JavaScript -->  
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

صفحه موردنظر را با توجه به کدهای زیر طراحی کنید.

<body dir="rtl" >
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
                <Columns>
                    <asp:BoundField DataField="Product_Name" HeaderText="نام محصول" />
                    <asp:BoundField DataField="Quantity" HeaderText="تعداد" />
                    <asp:BoundField DataField="Price" HeaderText="قیمت" />
                    <asp:TemplateField HeaderText="نمایش جزئیات">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkdelete" href="#myModal" data-toggle="modal" runat="server">نمایش اطلاعات</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <!-- کدهای مربوط به bootstrp modal popup  -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">مرجع تخصصی برنامه نویسان</h4>
                    </div>
                    <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
                        <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
                        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
                            <Columns>
                                <asp:BoundField DataField="Product_Name" HeaderText="نام محصول"></asp:BoundField>
                                <asp:BoundField DataField="Quantity" HeaderText="تعداد"></asp:BoundField>
                                <asp:BoundField DataField="Price" HeaderText="قیمت"></asp:BoundField>
                            </Columns>
                        </asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">بستن</button>
                        
                    </div>
                </div>
            </div>
        </div>

       
    </form>
</body>

 

حال به صفحه دستورات رفته و فضای نام موردنظر را به آن اضافه کنید و دستورات را در آن درج کنید.

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridviewPopup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridView1();
        }
    }

    protected void BindGridView1() {
        DataSet ds = new DataSet();
        DataTable dt;
        DataRow dr;
        DataColumn pName;
        DataColumn pQty;
        DataColumn pPrice;
        int i = 0;
        dt = new DataTable();
        pName = new DataColumn("Product_Name", Type.GetType("System.String"));
        pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
        pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
        dt.Columns.Add(pName);
        dt.Columns.Add(pQty);
        dt.Columns.Add(pPrice);
        dr = dt.NewRow();
        dr["Product_Name"] = "محصول شماره 1";
        dr["Quantity"] = 2;
        dr["Price"] = 200;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "محصول شماره 2";
        dr["Quantity"] = 5;
        dr["Price"] = 480;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "محصول شماره 3";
        dr["Quantity"] = 8;
        dr["Price"] = 100;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "محصول شماره 4";
        dr["Quantity"] = 2;
        dr["Price"] = 500;
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
        GridView1.DataSource = ds.Tables[0];
        GridView1.DataBind();
    }
    protected void BindGrid2() {
        DataSet ds = new DataSet();
        DataTable dt;
        DataRow dr;
        DataColumn pName;
        DataColumn pQty;
        DataColumn pPrice;
        int i = 0;
        dt = new DataTable();
        pName = new DataColumn("Product_Name", Type.GetType("System.String"));
        pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
        pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
        dt.Columns.Add(pName);
        dt.Columns.Add(pQty);
        dt.Columns.Add(pPrice);
        dr = dt.NewRow();
        dr["Product_Name"] = "پیراهن مردانه";
        dr["Quantity"] = 2;
        dr["Price"] = 200;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "کفش ورزشی";
        dr["Quantity"] = 5;
        dr["Price"] = 480;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "تی شرت";
        dr["Quantity"] = 8;
        dr["Price"] = 100;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "شلوار جین";
        dr["Quantity"] = 2;
        dr["Price"] = 500;
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
        GridView2.DataSource = ds.Tables[0];
        GridView2.DataBind();
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            
            string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));
            LinkButton lnkbtnresult = (LinkButton)e.Row.FindControl("lnkdelete");   
            BindGrid2();
        }
    }
}

 

خروجی:

خروجی برنامه بعد از نمایش Modal Pop-Up:

نکات قابل توجه:

1- در اینجا آموختید که چگونه می توانید در ASP.NET با استفاده از BootStrap یک modal pop-up نمایش دهید.

2- همینطور آموختید که چگونه میتوانید در کنار Grid، با استفاده از link-button یک Grid دیگر نمایش دهید.

 

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید