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

باز کردن 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

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

  • پسورد: www.mspsoft.com
داریوش فرخی

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

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

دیدگاه‌ها

*
*

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

    عباس پاسخ

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

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

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