Using ASP.NET and jQuery to Pass Multiple Values from a GridView to Another Page
Using ASP.NET and jQuery to Pass Multiple
Values from a GridView to Another Page
In
one of our previous article Pass Multiple Values
from a GridView to Another Page using ASP.NET, we had seen how to select a
GridView row and pass multiple values of the selected row to another page. We
had made use of the 'DataNavigateUrlFields' to set the names of the fields and
construct the URL in the HyperLinkField.
In
this article, we will simplify the approach using jQuery and pass values without
the need of a Hyperlink field. If you are new to jQuery, I would strongly
suggest you to check this: Using jQuery with ASP.NET - A Beginner's
Guide
Open
Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5
website’ from the templates > Choose your language (C# or VB) > Enter the
location > Ok. In the Solution Explorer, right click your project > New
Folder > rename the folder as ‘Scripts’.
Right
click the Scripts folder > Add Existing Item > Browse to the path where
you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense
documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.
Now
drag and drop the jquery-1.2.6.js file from the Solution Explorer to the
<head> section of your page to create a reference as shown
below:
<head runat="server">
<title></title>
<script src="Script/jquery-1.2.6.js" type="text/javascript"></script>
Now
drag and drop a SqlDataSource Control to the Default.aspx 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>
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>
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’. In the Page_Load of CustomerDetails.aspx, add the
following code to retrieve the query string variables from the URL:
C#
protected void
Page_Load(object sender, EventArgs e)
{
string cid = Request.QueryString["CID"];
string cname = Request.QueryString["CName"];
Response.Write("CustomerID= " + cid + " : " + "CompanyName=
" + cname);
}
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")
Response.Write("CustomerID= " & cid & " : " & "CompanyName= " &
cname)
End Sub
Time
to see some jQuery magic. Go back the Default.aspx and add the following jQuery
code in the <head>:
<script type="text/javascript">
$(document).ready(function() {
$("tr").click(function(event) {
var row = jQuery(this)
var firstParam = row.children("td:eq(0)").text();
var secondParam = row.children("td:eq(1)").text();
var navUrl = "http://localhost:7250/GridViewRowJQuery/CustomerDetails.aspx?cid="
+ firstParam + "&cname=" +
secondParam;
top.location
= navUrl;
});
});
</script>
The
code handles the click event on a table row and extracts the first and second
column value for that row. The url is then formed using the two parameters and
passed to the CustomerDetails.aspx page. That’s it. Run the code and on click of
every row of the GridView, the CustomerId and CustomerName are passed to the
next page. Simple!
I
hope this article was useful and I thank you for viewing it. The entire source
code of the article can be downloaded from here.
If
you liked the article
