Pass Multiple Values from a GridView to Another Page using
ASP.NET
A
common requirement in our projects is to select a GridView row and pass multiple
values of the selected row to another page. I recently got a request from a few
readers who wanted an article on this. In this article, we will explore how
simple it is to achieve this requirement.
I assume you have some basic understanding of the GridView and how
to bind it to a Data Source control. The Hyperlink control added to the GridView
makes it quiet easy to select a row and send single/multiple values to a
different page through the URL. Let us see how:
Step 1: Create a new ASP.NET website. Drag and drop a
SqlDataSource Control to the page and use the wizard to connect to the Northwind
database. Select the CustomerId, CompanyName, ContactName, Address and City from
the Customers table. The wizard will also prompt you to save the connection
string in the web.config file. Choose to do so. The design code will look
similar to the following:
<asp:SqlDataSource
ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT
[CustomerID], [CompanyName], [ContactName], [Address], [City] FROM
[Customers]">
</asp:SqlDataSource>
An entry will be
added to the web.config file as shown below:
<connectionStrings>
<add name="NorthwindConnectionString" connectionString="Data
Source=(local);Initial Catalog=Northwind;Integrated Security=True"providerName="System.Data.SqlClient"/>
</connectionStrings>
Step 2: Now add a GridView control to the page and using the
smart tag, select the DataSource to be SqlDataSource1 in the GridView tasks
panel. Using the same panel, click on the Enable Paging and Enable Sorting
checkboxes. The source will look similar to the following. Observe that the
DataKeyNames is set to ‘CustomerId’, that is the primary key of the Customers
table.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="Address"
HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City"
HeaderText="City" SortExpression="City"
/>
</Columns>
</asp:GridView>
Step 3: We will now add another page in our project. In the
Solution Explorer, right click the project > Add New Item > Web Form >
Rename it to ‘CustomerDetails.aspx’.
Step 4: Go back to Default.aspx and add two hyperlink
fields. We will see how to pass a single value as well as multiple values using
the two hyperlink fields.
Single Value:
Add the following hyperlink control after the <Columns> tag in the GridView as shown below:
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="CustomerID" DataNavigateUrlFormatString="CustomerDetails.aspx?CID={0}" Text="Pass Single
Value" />
Multiple Values:
Just
below the first hyperlink field, add another hyperlink field as shown
below:
<asp:HyperLinkField DataNavigateUrlFields="CustomerID, CompanyName, ContactName, Address,
City" DataNavigateUrlFormatString="CustomerDetails.aspx?CID={0}&CName={1}&ContactName={2}&Addr={3}&City={4}"
Text="Pass
Multiple Values" />
In the
source code shown above, we are using the hyperlink field and setting some
properties that will make it extremely easy to pass values to a different page.
The 'DataNavigateUrlFields' sets the names of the fields, that is to be used to
construct the URL in the HyperLinkField. In the first hyperlink, since we are
passing only a single value, the DataNavigateUrlFields contains only CustomerID.
However in the second hyperlink, since there are multiple values to be passed,
DataNavigateUrlFields contains all the names of the fields that are to be passed
as query string to CustomerDetails.aspx
Similarly, the 'DataNavigateUrlFormatString' sets the string that
specifies the format in which the URL is to be created. The 'Text' property represents the text that will be displayed to
the user. The entire source code will look similar to the
following:
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource
ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT
[CustomerID], [CompanyName], [ContactName], [Address], [City] FROM
[Customers]">
</asp:SqlDataSource>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:HyperLinkField
DataNavigateUrlFields="CustomerID"
DataNavigateUrlFormatString="CustomerDetails.aspx?CID={0}"
Text="Pass Single
Value" />
<asp:HyperLinkField
DataNavigateUrlFields="CustomerID, CompanyName, ContactName, Address,
City"
DataNavigateUrlFormatString="CustomerDetails.aspx?CID={0}&CName={1}&ContactName={2}&Addr={3}&City={4}"
Text="Pass Multiple
Values" />
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="Address"
HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City"
HeaderText="City" SortExpression="City"
/>
</Columns>
</asp:GridView>
</form>
</body>
Step 5: The last step is to retrieve the query string
variables from the URL in the CustomerDetails.aspx page. Add the following code
for that:
C#
protected void
Page_Load(object sender, EventArgs e)
{
string cid = Request.QueryString["CID"];
string cname = Request.QueryString["CName"];
string contactName = Request.QueryString["ContactName"];
string address = Request.QueryString["Addr"];
string city = Request.QueryString["City"];
}
VB.NET
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs)
Dim cid As String =
Request.QueryString("CID")
Dim cname As String =
Request.QueryString("CName")
Dim contactName As
String =
Request.QueryString("ContactName")
Dim address As String =
Request.QueryString("Addr")
Dim city As String =
Request.QueryString("City")
End Sub
Set a
breakpoint at the Page_Load method of the CustomerDetails.aspx. Run the
application and click on either the ‘Pass Single Value’ or ‘Pass Multiple
Values’ hyperlink to pass values to the CustomerDetails.aspx page. Using the
breakpoint, observe the values of the selected row being passed to the
CustomerDetails page.
I hope this article was useful and I thank you for
viewing it.
If you liked the article