باز کردن GridView در یک Popup با استفاده از Bootstrap plugin

Bootstrap plugin

در این مقاله با هم به سراغ نمایش یک Pop-up میرویم که به وسیله ی کلیک بر روی یک Link Button در داخل Grid اول ، در یک پنجره ی Bootstrap Modal ؛ Grid دوم به نمایش درخواهد آمد. با استفاده از  Bootstrap plugin طراحی سایت های Responsive کاری بسیار آسان است. در این مقاله من از کتابخانه ی jQuery و Bootstrap استفاده کرده ام.

پس زمینه

در کارهایم با موقعیتی که در بالا توضیح دادم مواجه شدم و پس از رفع مشکل تصمیم گرفتم که مقاله ی آن را برایتان قرار دهم.

Bootstrap plugin

بخش ورودی

گام اول

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

گام دوم

در قسمت Solution Explorer پس از دریافت وب سایت خالی تان ، وی فرم ها را بیافزایید.

برای وب فرم ها

بر روی GridViewPopup راست کلیک کنید و گزینه ی Add New Item و سپس Web Form را انتخاب کنید. نام آن را GridviewPopup.aspx قرار دهید.

بخش طراحی

گام سوم

فایل GridViewPopup.aspx را باز کنید و مقداری کد برای طراحی برنامه بنویسید.

ابتدا jQuery plugin را در قسمت head اضافه کنید. در اینجا من از jquery-1.10.2.js plugin برای دستیابی به اهدافم استفاده میکنم.

چگونه آن را به صفحه مان اضافه کنیم ؟

در قسمت head صفحه تان :

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

Bootstrap CSS plugin را اضافه کنید :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

آنگاه plugin زیر را برای theme انتخابی اضافه کنید :

<!-- Optional theme -->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>  

پس از آن من Bootstrap plugin را برای کار با Bootstrap همانند زیر اضافه کردم :

<!-- Optional theme -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>  
After this I’ve added Bootstrap plugin for working with bootstrap-  
<!-- Latest compiled and minified JavaScript -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
Add control on your page and your page looks like below-  
div style="background-color:mediumaquamarine;">  
            <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">  
                <Columns>  
                    <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />  
                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" />  
                    <asp:BoundField DataField="Price" HeaderText="Price" />  
                    <asp:TemplateField HeaderText="Show related">  
                        <ItemTemplate>  
                            <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>  
                        </ItemTemplate>  
                    </asp:TemplateField>  
                </Columns>  
            </asp:GridView>  
        </div>  

اکنون طراحی ما مشابه زیر خواهد بود :

Bootstrap plugin

حال یک GridView برای نمایش در Modal popup اضافه کنید :

<!-- this is 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">×</button>  
                        <h4 class="modal-title">Welcome in detail page</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"></asp:GridView>  
                    </div>  
                    <div class="modal-footer">  
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                          
                    </div>  
                </div>  
            </div>  
        </div>  

در اینجا من از یک Div برای نمایش GridView در یک Popup استفاده کرده ام و ID آن همان myModal است و در قسمت url مربوط به Link Button من ID آن را صدا میزنم تا پنجره ی popup به نمایش در آید.

<asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>

حال صفحه ی شما مانند زیر خواهد بود :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewPopup.aspx.cs" Inherits="GridviewPopup" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
     <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>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <center>  
        <div style="background-color:mediumaquamarine;">  
            <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">  
                <Columns>  
                    <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />  
                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" />  
                    <asp:BoundField DataField="Price" HeaderText="Price" />  
                    <asp:TemplateField HeaderText="Show related">  
                        <ItemTemplate>  
                            <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>  
                        </ItemTemplate>  
                    </asp:TemplateField>  
                </Columns>  
            </asp:GridView>  
        </div>  
        <!-- this is 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">×</button>  
                        <h4 class="modal-title">Welcome in detail page</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"></asp:GridView>  
                    </div>  
                    <div class="modal-footer">  
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                          
                    </div>  
                </div>  
            </div>  
        </div>  
        </center>  
        <!-- end -->  
    </form>  
</body>  
</html>  

در صفحه ی Code Behinde

فضای نام ها را به صفحه اضافه کنید :

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

در اینجا من یک data table برای پر کردن GridView ایجاد کرده ام. حال صفحه به صورت زیر خواهد بود :

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"] = "Product 1";  
        dr["Quantity"] = 2;  
        dr["Price"] = 200;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Product 2";  
        dr["Quantity"] = 5;  
        dr["Price"] = 480;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Product 3";  
        dr["Quantity"] = 8;  
        dr["Price"] = 100;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Product 4";  
        dr["Quantity"] = 2;  
        dr["Price"] = 500;  
        dt.Rows.Add(dr);  
        ds.Tables.Add(dt);  
        GridView1.DataSource = ds.Tables[0];  
        GridView1.DataBind();  
    }  
//for pop-up gridview  
    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"] = "FMCG";  
        dr["Quantity"] = 2;  
        dr["Price"] = 200;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Cold Drink";  
        dr["Quantity"] = 5;  
        dr["Price"] = 480;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Biscuits";  
        dr["Quantity"] = 8;  
        dr["Price"] = 100;  
        dt.Rows.Add(dr);  
        dr = dt.NewRow();  
        dr["Product_Name"] = "Mixture";  
        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("lnkdetail");     
            BindGrid2();  
        }  
    }  
}  

حال خروجی به شکل زیر خواهد بود :

Bootstrap pluginBootstrap plugin

امیدوارم از آن لذت برده باشید !
موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    عباس پاسخ

    مهندس فرخی عالی بود

      داریوش فرخی پاسخ

      خیلی ممنون !
      موفق باشید !
      :)