Download Source Code Live Demo
When you display records using ASP.NET GridView control it displays all the columns on the page and often you want to display only few columns in GridView due to the available space on the page. You can easily achieve this functionality by adding your own columns declaratively in the GridView control. But if you want to display other columns in a popup window for each row in the GridView control you need to use AJAX Popup Control with the GridView. In this tutorial I will show you how you can display GridView row details using ASP.NET AJAX Popup control extender.
To start this tutorial, create a new website in
Visual Studio 2008 and add ScriptManager control on the page.
This control is required to use any AJAX functionality on ASP.NET page.
<asp:ScriptManager ID="ScriptManager1"
runat="server"> </asp:ScriptManager> Next
you need to add GridView control on the page that has
AutoGenerateColumns property set to false to stop ASP.NET to
generate columns automatically. You also need to attach OnRowCreated
event handler with the grid which I will use later in this tutorial to
attach some JavaScript events with a magnify icon to display popup window on
mouse over. Following is the complete markup of the GridView control.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
BorderColor="#336699" BorderStyle="Solid"
BorderWidth="1px"
CellPadding="3"
Font-Names="Verdana" Font-Size="10pt"
onrowcreated="GridView1_RowCreated">
<Columns>
<asp:BoundField DataField="ProductID"
HeaderText="Product ID"
/>
<asp:BoundField DataField="ProductName"
HeaderText="Product Name"
/>
<asp:TemplateField
ItemStyle-Width="40"
ItemStyle-HorizontalAlign="Right">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/magnify.gif"
/>
<ajax:PopupControlExtender ID="PopupControlExtender1"
runat="server"
PopupControlID="Panel1"
TargetControlID="Image1"
DynamicContextKey=‘<%# Eval("ProductID")
%>‘
DynamicControlID="Panel1"
DynamicServiceMethod="GetDynamicContent"
Position="Bottom">
</ajax:PopupControlExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#336699" ForeColor="White"
/>
</asp:GridView> The most
important thing in the above markup is the TemplateField column
definition in which I have used an image control to display
magnify icon and ASP.NET AJAX Popup Control Extender.
The
PopupControlID property needs the id of the control you want to
use as a popup window with AJAX Popup Control in this case I have used Panel
control.
The TargetControlID property needs the id of the
control that will display the popup window in this case I have used Image1
control that shows magnify icon in the GridView column.
The
DynamicServiceMethod property needs the name of the web service
method you want to call for every popup window to load additional details from
the database.
The DynamicContextKey property needs the
dynamic value you want to pass to the dynamic web service method. In this
example I am passing ProductID to load more details of the product in the popup
window dynamically.
In the end you need a Panel control on
the page which will be used as a popup window by the
PopupControlExtender control. <asp:Panel ID="Panel1" runat="server"><
/asp:Panel> Now I am moving to the
code behind file of the ASP.NET page that has Page Load event
to bind data with the GridView control as shown below: protected
void Page_Load(object sender, EventArgs e) { if
(!Page.IsPostBack)
{
LoadData();
} }
private void LoadData() {
string constr = "Server=TestServer;Database=SampleDatabase;uid=test;pwd=test;";
string query = "SELECT ProductID, ProductName FROM Products";
SqlDataAdapter da = new SqlDataAdapter(query,
constr); DataTable
table = new DataTable();
da.Fill(table);
GridView1.DataSource =
table;
GridView1.DataBind(); } Next
you need the OnRowCreated event definition that will perform
two operations during the creation of every data row of the GridView control.
First it will find the Popup Extender Control using the FindControl
method and will add a unique behavior id with each popup control.
Secondly it will find Image control in every row and will
attach showPopup() and hidePopup() script with
the image onmouseover and onmouseout events.
This is required to display popup window on mouse over and hide popup window on
mouse out automatically. protected void
GridView1_RowCreated(object sender, GridViewRowEventArgs
e) {
if (e.Row.RowType == DataControlRowType.DataRow)
{
PopupControlExtender pce =
e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;
string behaviorID
= "pce_" + e.Row.RowIndex; pce.BehaviorID =
behaviorID;
Image img =
(Image)e.Row.FindControl("Image1");
string OnMouseOverScript =
string.Format("$find(‘{0}‘).showPopup();",
behaviorID);
string OnMouseOutScript =
string.Format("$find(‘{0}‘).hidePopup();",
behaviorID);
img.Attributes.Add("onmouseover",
OnMouseOverScript);
img.Attributes.Add("onmouseout",
OnMouseOutScript);
} } In the
end, you need the definition of GetDynamicContent service
method that will be called by every ASP.NET AJAX Popup Control Extender to load
dynamic data from the database and to display additional details in the popup
window. The first few lines in the method below are loading additional columns
from the Products table in database. The StringBuilder object
is created to build html string for the tabular output in the popup window. You
can build any type of html for display such as bullets, paragraphs, links etc.
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string GetDynamicContent(string
contextKey) { string
constr =
"Server=TestServer;Database=SampleDatabase;uid=test;pwd=test;";
string query = "SELECT UnitPrice, UnitsInStock, Description FROM
Products WHERE ProductID = " +
contextKey;
SqlDataAdapter da = new SqlDataAdapter(query, constr); DataTable
table = new DataTable();
da.Fill(table);
StringBuilder b = new StringBuilder();
b.Append("<table
style=‘background-color:#f3f3f3; border: #336699 3px solid; ");
b.Append("width:350px; font-size:10pt; font-family:Verdana;‘ cellspacing=‘0‘
cellpadding=‘3‘>");
b.Append("<tr><td colspan=‘3‘
style=‘background-color:#336699; color:white;‘>");
b.Append("<b>Product
Details</b>");
b.Append("</td></tr>");
b.Append("<tr><td style=‘width:80px;‘><b>Unit
Price</b></td>"); b.Append("<td
style=‘width:80px;‘><b>Stock</b></td>");
b.Append("<td><b>Description</b></td></tr>");
b.Append("<tr>"); b.Append("<td>$" +
table.Rows[0]["UnitPrice"].ToString() + "</td>");
b.Append("<td>" + table.Rows[0]["UnitsInStock"].ToString() +
"</td>"); b.Append("<td>" +
table.Rows[0]["Description"].ToString() +
"</td>");
b.Append("</tr>");
b.Append("</table>");
return b.ToString(); } If
you have implemented everything in this tutorial properly you will see the
output similar to the figure shown in the start of this tutorial. Please make
sure that you have imported the following namespaces in the code file before you
run this project. using System; using
System.Collections.Generic; using System.Web; using System.Web.UI; using
System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data;
using AjaxControlToolkit; using System.Text;Also make sure that
you have registered the AjaxControlToolkit in your aspx file using the Register
directive as shown below: <%@ Register
Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax"
%> Feel free to experiment with this tutorial and customize the output
and data according to your own requirements.
PopupControlExtender DynamicServiceMethod,布布扣,bubuko.com
PopupControlExtender DynamicServiceMethod
原文：http://www.cnblogs.com/happy-Chen/p/3615655.html