ASP.NET: Display GridView Row Details in Modal Popup using Twitter Bootstrap
来源:互联网 发布:站长之家seo综合查询 编辑:程序博客网 时间:2024/05/03 19:38
There are several ways in which you can display details of a gridview row in order for the user to have a quick overview of the complete row. Especially when there are lot of columns in the gridview the user may find it difficult to scroll the page and view the details of entire row. This is why we have a control called 'DetailsView', a data-bound control that can be used to display single record at a time. There are many options to do this such as displaying details in a tooltip on mouseover event using jQuery, using AJAX ModalPopupExtender on click event etc. A more simple yet efficient approach is to display details of a gridview row in a modal popup dialog usingTwitter Bootstrap's Modals plugin.
In the above code, I have used a gridview and detailsview. To open detailsview in modal popup on button click, detailsview is placed inside a div with class='modal'.
3. In code-behind page use the below code. Here I am populating gridview with values from mysql table and using linq query to populate detailsview.
Note in the above code I am opening the div containing details view in modal popup using single line of jQuery code,
That is all, now clicking the button field in gridview row will open a modal popup that consists of detailsview populated with the corresponding row data. Seelive demo. (I have created this demo using simple html table and the output will be the same in asp.net page.)
Steps to Follow,
1. Download bootstrap files fromhere.
2. Include the latest jQuery library, bootstrap files (bootstrap.js,bootstrap.css) from the download and use below html code in .aspx page.
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Modal Popup using Bootstrap</title> <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="Scripts/bootstrap.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <h2 style="text-align:center;"> Display GridView Row Details in Modal Dialog using Twitter Bootstrap</h2> <p style="text-align:center;"> Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a> </p> <asp:GridView ID="GridView1" runat="server" Width="940px" HorizontalAlign="Center" OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="false" DataKeyNames="Code" CssClass="table table-hover table-striped"> <Columns> <asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View"/> <asp:BoundField DataField="Code" HeaderText="Code" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Continent" HeaderText="Continent" /> <asp:BoundField DataField="Region" HeaderText="Surface Area" /> <asp:BoundField DataField="Population" HeaderText="Population" /> <asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" /> <asp:BoundField DataField="LocalName" HeaderText="Local Name" /> <asp:BoundField DataField="Capital" HeaderText="Capital" /> <asp:BoundField DataField="HeadOfState" HeaderText="Head of State" /> </Columns> </asp:GridView> </div> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <img src="" alt="Loading.. Please wait!"/> </ProgressTemplate> </asp:UpdateProgress> <div id="currentdetail" class="modal hide fade" tabindex=-1 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Detailed View</h3> </div> <div class="modal-body"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White" ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush" FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False"> <Fields> <asp:BoundField DataField="Code" HeaderText="Code" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Continent" HeaderText="Continent" /> <asp:BoundField DataField="Region" HeaderText="Surface Area" /> <asp:BoundField DataField="Population" HeaderText="Population" /> <asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" /> <asp:BoundField DataField="LocalName" HeaderText="Local Name" /> <asp:BoundField DataField="Capital" HeaderText="Capital" /> <asp:BoundField DataField="HeadOfState" HeaderText="Head of State" /> </Fields> </asp:DetailsView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" /> </Triggers> </asp:UpdatePanel> <div class="modal-footer"> <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> </div> </div> </form></body></html>
In the above code, I have used a gridview and detailsview. To open detailsview in modal popup on button click, detailsview is placed inside a div with class='modal'.
3. In code-behind page use the below code. Here I am populating gridview with values from mysql table and using linq query to populate detailsview.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data;using MySql.Data.MySqlClient;namespace DetailModalExample{ public partial class Default : System.Web.UI.Page { DataTable dt; protected void Page_Load(object sender, EventArgs e) { try { //Fetch data from mysql database MySqlConnection conn = new MySqlConnection("server=localhost;uid=root; password=priya123;database=world;pooling=false;"); conn.Open(); string cmd = "select * from country limit 7"; MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn); DataSet ds = new DataSet(); dAdapter.Fill(ds); dt=ds.Tables[0]; //Bind the fetched data to gridview GridView1.DataSource = dt; GridView1.DataBind(); } catch (MySqlException ex) { System.Console.Error.Write(ex.Message); } } protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if(e.CommandName.Equals("detail")) { int index = Convert.ToInt32(e.CommandArgument); string code = GridView1.DataKeys[index].Value.ToString(); IEnumerable<DataRow> query = from i in dt.AsEnumerable() where i.Field<String>("Code").Equals(code) select i; DataTable detailTable = query.CopyToDataTable<DataRow>(); DetailsView1.DataSource = detailTable; DetailsView1.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append(@"<script type='text/javascript'>"); sb.Append("$('#currentdetail').modal('show');"); sb.Append(@"</script>"); ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ModalScript", sb.ToString(), false); } } }}
Note in the above code I am opening the div containing details view in modal popup using single line of jQuery code,
$('#currentdetail').modal('show');
That is all, now clicking the button field in gridview row will open a modal popup that consists of detailsview populated with the corresponding row data. Seelive demo. (I have created this demo using simple html table and the output will be the same in asp.net page.)
原文地址:
http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html
- ASP.NET: Display GridView Row Details in Modal Popup using Twitter Bootstrap
- ASP.NET: GridView CRUD using Twitter Bootstrap Modal Popup
- 在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup
- Using a modal .NET dialog to display AutoCAD object properties
- How to get the Values of Selected Row from a Gridview using ASP.NET
- Working with Data in ASP.NET 2.0 :: Using TemplateFields in the GridView Control
- Using Cookies in ASP.NET
- Using Plupload in ASP.NET
- Bootstrap Pagination for ASP.NET GridView
- ASP.NET GridView的Bootstrap分页样式
- ASP.NET GridView的Bootstrap分页样式
- 在ASP.NET MVC 4中使用TWITTER BOOTSTRAP
- Dynamically creating bound and template columns in GridView using ASP.Net
- ASP.NET里面的GridView的Row操作
- ASP.NET 控件Gridview中e.Row…
- Performance Improvement in ASP.NET using Caching
- Using AJAX (Atlas in Asp.Net)
- MVC architecture in ASP.Net using C#
- 自己的底层代码库(十五)——对象队列
- 红外遥控接收
- NSString,NSArray,NSNumber等类的继承问题
- 苹果推送APNS
- YCSB 测试 MongoDB
- ASP.NET: Display GridView Row Details in Modal Popup using Twitter Bootstrap
- java 线程
- hadoop 调度器
- XML和YAML的使用方法
- 深入了解scanf()getchar()和gets()等函数
- 无刷新上传图片 可以实时预览 选择图片后即自动上传,没有上传按钮
- match_parent和fill_parent的区别
- 为SyntaxHighlighter添加新语言的方法
- 列表框设置每行行高