نحوه ایجاد یک 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();
        }
    }
}

خروجی: