Berikut merupakan cara menampilkan data yang terdapat pada gridview ke modal box milik bootstrap
HTML
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head runat="server">
3: <title></title>
4: <style type="text/css">
5: body
6: {
7: font-family: Arial;
8: font-size: 10pt;
9: }
10: table
11: {
12: border: 1px solid #ccc;
13: }
14: table th
15: {
16: background-color: #F7F7F7;
17: color: #333;
18: font-weight: bold;
19: }
20: table th, table td
21: {
22: padding: 5px;
23: border-color: #ccc;
24: }
25: </style>
26: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
27: <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
28: <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
29: </head>
30: <body>
31: <form id="form1" runat="server">
32: <div>
33: <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover"
34: DataKeyNames="student_Id" AutoGenerateColumns="false" GridLines="None">
35: <Columns>
36: <asp:TemplateField HeaderText="Admission No">
37: <ItemTemplate>
38: <asp:Label ID="lblstudent_Id" runat="server" Text='<%# Eval("student_Id") %>'></asp:Label>
39: </ItemTemplate>
40: </asp:TemplateField>
41: <asp:TemplateField HeaderText="Month">
42: <ItemTemplate>
43: <asp:Label ID="lblMonth_Name" runat="server" Text='<%# Eval("Month_Name") %>'></asp:Label>
44: </ItemTemplate>
45: </asp:TemplateField>
46: <asp:TemplateField HeaderText="Amount">
47: <ItemTemplate>
48: <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("Amount") %>'></asp:Label>
49: </ItemTemplate>
50: </asp:TemplateField>
51: <asp:TemplateField HeaderText="IsPaid">
52: <ItemTemplate>
53: <asp:Label ID="lblIsPaid" runat="server" Text='<%# Eval("IsPaid") %>'></asp:Label>
54: </ItemTemplate>
55: </asp:TemplateField>
56: <asp:TemplateField HeaderText="date">
57: <ItemTemplate>
58: <asp:Label ID="lbldate" runat="server" Text='<%# Eval("date") %>'></asp:Label>
59: </ItemTemplate>
60: </asp:TemplateField>
61: <asp:TemplateField HeaderText="Pay">
62: <ItemTemplate>
63: <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info"
64: OnClick="Display"></asp:LinkButton>
65: </ItemTemplate>
66: </asp:TemplateField>
67: </Columns>
68: </asp:GridView>
69: </div>
70: <div>
71: <div class="modal fade" id="myModal" role="dialog">
72: <div class="modal-dialog">
73: <!-- Modal content-->
74: <div class="modal-content">
75: <div class="modal-header">
76: <button type="button" class="close" data-dismiss="modal">
77: ×</button>
78: <h4 class="modal-title">
79: Student Fee Details</h4>
80: </div>
81: <div class="modal-body">
82: <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
83: <div class="form-group">
84: <asp:Label ID="lblstudent" runat="server" Text="Aadmission No: "></asp:Label>
85: <asp:Label ID="lblstudentid" runat="server" Text=""></asp:Label>
86: </div>
87: <div class="form-group">
88: <asp:Label ID="Label1" runat="server" Text="Month"></asp:Label>
89: <asp:Label ID="lblmonth" runat="server" Text=""></asp:Label>
90: </div>
91: <div class="form-group">
92: <asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>
93: <asp:TextBox ID="txtAmount" runat="server" TabIndex="3" MaxLength="75" CssClass="form-control"
94: placeholder="Enter Amount"></asp:TextBox>
95: </div>
96: </div>
97: </div>
98: <div class="modal-footer">
99: <asp:Button ID="btnSave" runat="server" Text="Pay" OnClick="btnSave_Click" CssClass="btn btn-info" />
100: <button type="button" class="btn btn-info" data-dismiss="modal">
101: Close</button>
102: </div>
103: </div>
104: </div>
105: <script type='text/javascript'>
106: function openModal() {
107: $('[id*=myModal]').modal('show');
108: }
109: </script>
110: </div>
111: </div>
112: </form>
113: </body>
114: </html>
C#
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: if (!IsPostBack)
4: {
5: DataTable dt = new DataTable();
6: dt.Columns.AddRange(new DataColumn[] {
7: new DataColumn("student_Id")
8: ,new DataColumn("Month_Name")
9: ,new DataColumn("Amount")
10: ,new DataColumn("IsPaid")
11: ,new DataColumn("date")
12: });
13: dt.Rows.Add(1, "Jan", 5200, "Yes", DateTime.Now.AddDays(-263));
14: dt.Rows.Add(2, "Feb", 6500, "No", DateTime.Now.AddDays(-50));
15: dt.Rows.Add(3, "Mar", 7500, "", "");
16: dt.Rows.Add(4, "Apr", 6333, "No", DateTime.Now.AddDays(-63));
17: dt.Rows.Add(5, "Jun", 15000, "Yes", DateTime.Now.AddDays(-93));
18: GridView1.DataSource = dt;
19: GridView1.DataBind();
20: }
21: }
22: protected void Display(object sender, EventArgs e)
23: {
24: int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
25: GridViewRow row = GridView1.Rows[rowIndex];
26: lblstudentid.Text = (row.FindControl("lblstudent_Id") as Label).Text;
27: lblmonth.Text = (row.FindControl("lblMonth_Name") as Label).Text; ;
28: txtAmount.Text = (row.FindControl("lblAmount") as Label).Text;
29: ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
30: }
31: protected void btnSave_Click(object sender, EventArgs e)
32: {
33: //Your Saving code.
34: }
VB.NET
1: Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
2: If Not IsPostBack Then
3: Dim dt As New DataTable()
4: dt.Columns.AddRange(New DataColumn() {New DataColumn("student_Id"), New DataColumn("Month_Name"), New DataColumn("Amount"), New DataColumn("IsPaid"), New DataColumn("date")})
5: dt.Rows.Add(1, "Jan", 5200, "Yes", DateTime.Now.AddDays(-263))
6: dt.Rows.Add(2, "Feb", 6500, "No", DateTime.Now.AddDays(-50))
7: dt.Rows.Add(3, "Mar", 7500, "", "")
8: dt.Rows.Add(4, "Apr", 6333, "No", DateTime.Now.AddDays(-63))
9: dt.Rows.Add(5, "Jun", 15000, "Yes", DateTime.Now.AddDays(-93))
10: GridView1.DataSource = dt
11: GridView1.DataBind()
12: End If
13: End Sub
14: Protected Sub Display(sender As Object, e As EventArgs)
15: Dim rowIndex As Integer = Convert.ToInt32(TryCast(TryCast(sender, LinkButton).NamingContainer, GridViewRow).RowIndex)
16: Dim row As GridViewRow = GridView1.Rows(rowIndex)
17: lblstudentid.Text = TryCast(row.FindControl("lblstudent_Id"), Label).Text
18: lblmonth.Text = TryCast(row.FindControl("lblMonth_Name"), Label).Text
19: txtAmount.Text = TryCast(row.FindControl("lblAmount"), Label).Text
20: ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
21: End Sub
22: Protected Sub btnSave_Click(sender As Object, e As EventArgs)
23: 'Your Saving code.
24: End Sub
sumber :
https://www.aspforums.net/Threads/893022/Display-GridView-row-details-in-Bootstrap-modal-popup-on-LinkButton-click-using-C-and-VBNet-in-ASPNet/