Fcloud)
Source: www.dotnetjunkie.com
This articleArticleFrom a loyal dotnetjunkie suggestion, he initially sent us an email,
We need to give an example to illustrate how to set a dialog box in the DataGrid to pop up when a user clicks
The hyperlink column of the new window that displays its details. Before we reply to him, he has provided us
One method, and we recommend that you write a tutorial. So I got this article. This article contains two webforms and one CSS first webform contains a DataGrid, which shows a column of products in the northwind database and a hyperlink with the keyword "seedetails. Once you click this link, the window. Open Method of JavaScript will be called to open a new window. A URL contains the query string parameter of the productid of the product you want to know in detail. In the second webform, it is another DataGrid, which displays all the details of the product selected by the user. Now let's take a look at webform1.aspx and webform1.aspx. CS.
Webform1.aspx
<% @ Page Language = "C #" autoeventwireup = "false" inherits = "howtos. DataGrid. popupwindow. webform1" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<LINK rel = "stylesheet" type = "text/CSS" href = "stylesheet1.css"> </link>
</Head>
<Body>
<Center>
<Form runat = "server" id = "form1">
<Asp: DataGrid id = "datagrid1" runat = "server" font-size = "12" autogeneratecolumns = "false">
<Columns>
<Asp: boundcolumn datafield = "productid" headertext = "Product ID" headerstyle-cssclass = "headerstyle" itemstyle-cssclass = "itemstyledefault"/>
<Asp: boundcolumn datafield = "productname" headertext = "productname" headerstyle-cssclass = "headerstyle" itemstyle-cssclass = "itemstyledefault"/>
<Asp: hyperlinkcolumn datatextformatstring = "showdetails..." datatextfield = "productid" datanavigateurlfield = "productid" datanavigateurlformatstring = "javascript: varwin = Window. Open ('webform2. aspx? Productid = {0} ', null, 'width = 692, Height = 25 '); "headertext =" See details "headerstyle-cssclass =" headerstyle "itemstyle-cssclass =" itemstylehyperlink "/>
</Columns>
</ASP: DataGrid>
</Form>
</Center>
</Body>
</Html>
Webform1.aspx. CS
Using system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. Data. sqlclient;
Using system. drawing;
Using system. Web;
Using system. Web. sessionstate;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;
Namespace howtos. DataGrid. popupwindow
{
Public class webform1: system. Web. UI. Page
{
Protected system. Web. UI. webcontrols. DataGrid datagrid1;
# Region user defined code
Private void page_load (Object sender, system. eventargs E)
{
If (! This. ispostback)
This. binddata ();
}
Protected void binddata ()
{
Sqlcommand cmd = new sqlcommand ("select top 10 productid, productname from products", con ("Server = localhost; database = northwind; trusted_connection = true "));
This. Maid = cmd. executereader (commandbehavior. closeconnection );
This. datagrid1.databind ();
}
Protected sqlconnection con (system. String connectionstring)
{
Sqlconnection c = new sqlconnection (connectionstring );
C. Open ();
Return C;
}
# Endregion
# Region web form designer generated code
override protected void oninit (eventargs e)
{< br>
initializecomponent ();
base. oninit (E);
}
Private void initializecomponent ()
{
This. Load + = new system. eventhandler (this. page_load );
}
# Endregion
}
}
In fact, there are no difficulties in these two files, except datanavigateurlformatstring. open writing (Note: I can also create a JS file or use <SCRIPT> </SCRIPT> In webform. I directly write this Javascript file for simplicity ).CodeIt should be very familiar to everyone, so I will not discuss it in depth. It is used to open webform2.aspx in a new window and use the productid parameter. This value is from our data source. Let's take a look at webform2.aspx and webform2.aspx. CS.
Webform2.aspx
<% @ Page Language = "C #" autoeventwireup = "false" inherits = "howtos. DataGrid. popupwindow. webform2" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> product details </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "stylesheet1.css"> </link>
</Head>
<Body>
<Asp: dataGrid headerstyle-cssclass = "headerstyle" itemstyle-cssclass = "itemstyledefault" runat = "server" id = "datagrid1" font-size = "8" Height = "50" width =" 675 "> </ASP: dataGrid>
<P align = "center">
<A href = "javascript: window. Close ()"> Close Window </a>
</P>
</Body>
</Html>
Webform2.aspx. CS
Using system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. Data. sqlclient;
Using system. drawing;
Using system. Web;
Using system. Web. sessionstate;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;
Namespace howtos. DataGrid. popupwindow
{
Public class webform2: system. Web. UI. Page
{
Protected system. Web. UI. webcontrols. DataGrid datagrid1;
# Region user defined code
Private void page_load (Object sender, system. eventargs E)
{
If (! This. ispostback)
This. binddata ();
}
Protected void binddata ()
{
Sqlcommand cmd = new sqlcommand ("select * from products where productid = @ productid", con ("Server = localhost; database = northwind; trusted_connection = true "));
Cmd. Parameters. Add (New sqlparameter ("@ productid", sqldbtype. varchar, 200 ));
Cmd. Parameters ["@ productid"]. value = request ["productid"]. tostring ();
This. Maid = cmd. executereader (commandbehavior. closeconnection );
This. datagrid1.databind ();
}
Protected sqlconnection con (system. String connectionstring)
{
Sqlconnection c = new sqlconnection (connectionstring );
C. Open ();
Return C;
}
# Endregion
# Region web form designer generated code
Override protected void oninit (eventargs E)
{
Initializecomponent ();
Base. oninit (E );
}
Private void initializecomponent ()
{
This. Load + = new system. eventhandler (this. page_load );
}
# Endregion
}
}
Webform2.aspx is also quite simple. There is only one DataGrid bound to sqldatareader. Sqldatareader obtains product data through the query string parameter.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
