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 using
Twitter 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. See live 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 from
here.
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. See live demo. (I have created this demo using simple html table and the output will be the same in asp.net page.)
原文地址:
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
