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
分类:
asp.net
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix