专栏首页c#开发者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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Use P/Invoke to Develop a .NET Base Class Library for Serial Device Communications

    Serial Comm Use P/Invoke to Develop a .NET Base Class Library for Serial Device ...

    阿新
  • Developing a Transactional Biztalk adapter

    Contents Developing a Transactional BizTalk Adapter Using the Microsoft Base Ada...

    阿新
  • Paging of Large Resultsets in ASP.NET

    The paging of a large database resultset in Web applications is a well known pro...

    阿新
  • DAY2:阅读CUDA C Programming Guide之编程模型

    GPUS Lady
  • Face_Recognition_v3a

    In this assignment, you will build a face recognition system. Many of the ideas ...

    列夫托尔斯昊
  • gcc x64 asm 内联汇编尝试

    asm volatile(assembler template : output : input : clobber);

    战神伽罗
  • 为什么要学习现代控制理论(机器人方向)?

    一个如此重要并且可以将数字计算机优势应用于实际系统的课程,在学生看来,不过是做题和考试。

    zhangrelay
  • HDU - 6187 (最大生成树) 最小生成树

    Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Ot...

    风骨散人Chiam
  • QQ x KAKAO 全系列联名设计来袭!

    ? 01 关于项目 | About the Project Kakao friends以手机聊天软件Kakao talk表情包为起点,推出家族八位成员的故事...

    腾讯ISUX
  • Deploying to Amazon EC2 in Mulesoft

    The EC2 plugin allows you to create Amazon machine instances (AMIs) of your exis...

    用户6790598

扫码关注云+社区

领取腾讯云代金券