Introduction

This blog demonstrate how to open a GridView in a modal pop-up on another GridView link button clicked using bootstrap. This shows a pop-up on link button clicked inside first grid and then open second grid in a modal-popup of bootstrap. Bootstrap is easy to design responsive sites. In this I’ve used jQuery library and Bootstrap.

Background

I got an opportunity from a problem to show one gridview on linkbutton click in modal pop-up programmatically, so wrote this blog for helping some other developer.

Add library in your design page inside the head section. You can also download this in your code file and add in your solution as well:

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  3. <!-- Optional theme -->
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  5. <!-- Latest compiled and minified JavaScript -->
  6. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Design your page like the following:
  1. <body>
  2. <form id="form1" runat="server">
  3. <div>
  4. <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
  5. <Columns>
  6. <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
  7. <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
  8. <asp:BoundField DataField="Price" HeaderText="Price" />
  9. <asp:TemplateField HeaderText="Show related">
  10. <ItemTemplate>
  11. <asp:LinkButton ID="lnkdelete" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
  12. </ItemTemplate>
  13. </asp:TemplateField>
  14. </Columns>
  15. </asp:GridView>
  16. </div>
  17. <!-- this is bootstrp modal popup -->
  18. <div id="myModal" class="modal fade">
  19. <div class="modal-dialog">
  20. <div class="modal-content">
  21. <div class="modal-header">
  22. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  23. <h4 class="modal-title">Article for C# Corner</h4>
  24. </div>
  25. <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
  26. <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
  27. <asp:GridView ID="GridView2" runat="server"></asp:GridView>
  28. </div>
  29. <div class="modal-footer">
  30. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <!-- end -->
  36. </form>
  37. </body>
Now go to code behind page and put this in namespace section
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  9. //then write below code-
  11. protected void BindGridView1() {
  12. DataSet ds = new DataSet();
  13. DataTable dt;
  14. DataRow dr;
  15. DataColumn pName;
  16. DataColumn pQty;
  17. DataColumn pPrice;
  18. int i = 0;
  19. dt = new DataTable();
  20. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  21. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  22. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  23. dt.Columns.Add(pName);
  24. dt.Columns.Add(pQty);
  25. dt.Columns.Add(pPrice);
  26. dr = dt.NewRow();
  27. dr["Product_Name"] = "Product 1";
  28. dr["Quantity"] = 2;
  29. dr["Price"] = 200;
  30. dt.Rows.Add(dr);
  31. dr = dt.NewRow();
  32. dr["Product_Name"] = "Product 2";
  33. dr["Quantity"] = 5;
  34. dr["Price"] = 480;
  35. dt.Rows.Add(dr);
  36. dr = dt.NewRow();
  37. dr["Product_Name"] = "Product 3";
  38. dr["Quantity"] = 8;
  39. dr["Price"] = 100;
  40. dt.Rows.Add(dr);
  41. dr = dt.NewRow();
  42. dr["Product_Name"] = "Product 4";
  43. dr["Quantity"] = 2;
  44. dr["Price"] = 500;
  45. dt.Rows.Add(dr);
  46. ds.Tables.Add(dt);
  47. GridView1.DataSource = ds.Tables[0];
  48. GridView1.DataBind();
  49. }
  50. protected void BindGrid2() {
  51. DataSet ds = new DataSet();
  52. DataTable dt;
  53. DataRow dr;
  54. DataColumn pName;
  55. DataColumn pQty;
  56. DataColumn pPrice;
  57. int i = 0;
  58. dt = new DataTable();
  59. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  60. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  61. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  62. dt.Columns.Add(pName);
  63. dt.Columns.Add(pQty);
  64. dt.Columns.Add(pPrice);
  65. dr = dt.NewRow();
  66. dr["Product_Name"] = "FMCG";
  67. dr["Quantity"] = 2;
  68. dr["Price"] = 200;
  69. dt.Rows.Add(dr);
  70. dr = dt.NewRow();
  71. dr["Product_Name"] = "Cold Drink";
  72. dr["Quantity"] = 5;
  73. dr["Price"] = 480;
  74. dt.Rows.Add(dr);
  75. dr = dt.NewRow();
  76. dr["Product_Name"] = "Biscuits";
  77. dr["Quantity"] = 8;
  78. dr["Price"] = 100;
  79. dt.Rows.Add(dr);
  80. dr = dt.NewRow();
  81. dr["Product_Name"] = "Mixture";
  82. dr["Quantity"] = 2;
  83. dr["Price"] = 500;
  84. dt.Rows.Add(dr);
  85. ds.Tables.Add(dt);
  86. GridView2.DataSource = ds.Tables[0];
  87. GridView2.DataBind();
  88. }
  89. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
  90. if (e.Row.RowType == DataControlRowType.DataRow) {
  92. string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));
  93. LinkButton lnkbtnresult = (LinkButton) e.Row.FindControl("lnkdelete");
  94. BindGrid2();
  95. }
  96. }
Now your page looks like the following:

Design Page-
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewPopup.aspx.cs" Inherits="GridviewPopup" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. <!-- Optional theme -->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  11. <!-- Latest compiled and minified JavaScript -->
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <div>
  17. <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
  18. <Columns>
  19. <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
  20. <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
  21. <asp:BoundField DataField="Price" HeaderText="Price" />
  22. <asp:TemplateField HeaderText="Show related">
  23. <ItemTemplate>
  24. <asp:LinkButton ID="lnkdelete" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
  25. </ItemTemplate>
  26. </asp:TemplateField>
  27. </Columns>
  28. </asp:GridView>
  29. </div>
  30. <!-- this is bootstrp modal popup -->
  31. <div id="myModal" class="modal fade">
  32. <div class="modal-dialog">
  33. <div class="modal-content">
  34. <div class="modal-header">
  35. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  36. <h4 class="modal-title">Article for C# Corner</h4>
  37. </div>
  38. <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
  39. <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
  40. <asp:GridView ID="GridView2" runat="server"></asp:GridView>
  41. </div>
  42. <div class="modal-footer">
  43. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <!-- end -->
  49. </form>
  50. </body>
  51. </html>
Your Code file-
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  9. public partial class GridviewPopup: System.Web.UI.Page {
  10. protected void Page_Load(object sender, EventArgs e) {
  11. if (!IsPostBack) {
  12. BindGridView1();
  13. }
  14. }
  16. protected void BindGridView1() {
  17. DataSet ds = new DataSet();
  18. DataTable dt;
  19. DataRow dr;
  20. DataColumn pName;
  21. DataColumn pQty;
  22. DataColumn pPrice;
  23. int i = 0;
  24. dt = new DataTable();
  25. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  26. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  27. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  28. dt.Columns.Add(pName);
  29. dt.Columns.Add(pQty);
  30. dt.Columns.Add(pPrice);
  31. dr = dt.NewRow();
  32. dr["Product_Name"] = "Product 1";
  33. dr["Quantity"] = 2;
  34. dr["Price"] = 200;
  35. dt.Rows.Add(dr);
  36. dr = dt.NewRow();
  37. dr["Product_Name"] = "Product 2";
  38. dr["Quantity"] = 5;
  39. dr["Price"] = 480;
  40. dt.Rows.Add(dr);
  41. dr = dt.NewRow();
  42. dr["Product_Name"] = "Product 3";
  43. dr["Quantity"] = 8;
  44. dr["Price"] = 100;
  45. dt.Rows.Add(dr);
  46. dr = dt.NewRow();
  47. dr["Product_Name"] = "Product 4";
  48. dr["Quantity"] = 2;
  49. dr["Price"] = 500;
  50. dt.Rows.Add(dr);
  51. ds.Tables.Add(dt);
  52. GridView1.DataSource = ds.Tables[0];
  53. GridView1.DataBind();
  54. }
  55. protected void BindGrid2() {
  56. DataSet ds = new DataSet();
  57. DataTable dt;
  58. DataRow dr;
  59. DataColumn pName;
  60. DataColumn pQty;
  61. DataColumn pPrice;
  62. int i = 0;
  63. dt = new DataTable();
  64. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  65. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  66. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  67. dt.Columns.Add(pName);
  68. dt.Columns.Add(pQty);
  69. dt.Columns.Add(pPrice);
  70. dr = dt.NewRow();
  71. dr["Product_Name"] = "FMCG";
  72. dr["Quantity"] = 2;
  73. dr["Price"] = 200;
  74. dt.Rows.Add(dr);
  75. dr = dt.NewRow();
  76. dr["Product_Name"] = "Cold Drink";
  77. dr["Quantity"] = 5;
  78. dr["Price"] = 480;
  79. dt.Rows.Add(dr);
  80. dr = dt.NewRow();
  81. dr["Product_Name"] = "Biscuits";
  82. dr["Quantity"] = 8;
  83. dr["Price"] = 100;
  84. dt.Rows.Add(dr);
  85. dr = dt.NewRow();
  86. dr["Product_Name"] = "Mixture";
  87. dr["Quantity"] = 2;
  88. dr["Price"] = 500;
  89. dt.Rows.Add(dr);
  90. ds.Tables.Add(dt);
  91. GridView2.DataSource = ds.Tables[0];
  92. GridView2.DataBind();
  93. }
  94. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
  95. if (e.Row.RowType == DataControlRowType.DataRow) {
  97. string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));
  98. LinkButton lnkbtnresult = (LinkButton) e.Row.FindControl("lnkdelete");
  99. BindGrid2();
  100. }
  101. }
  102. }
Output:


Figure 1: Output 1


Figure 2: Output 2

Important points:
  • You have learned here how to show the modal pop-up using BootStrap and ASP.NET.
  • You have learned how to show other grid inside a grid using link-button.