[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

Get Selected Row from ASP.NET MVC 3 WebGrid

Abstract: The following article demonstrates how to get the selected row from the ASP.NET MVC 3 WebGrid and what to do to display data.

Every website has to display data and every website has a Grid control. In ASP.NET MVC 3 there’s the WebGrid, which is part of the Microsoft Web Helpers library. This can be downloaded through NuGet (formerly NuPack). NuGet is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. One piece of functionality that is critical is reacting when the user selects an item in the WebGrid. This article will focus on finding out which row was selected, but also how to find out more about the data that is selected.

Before moving on, you need to download ASP.NET MVC 3. Click here to download and install them using the Microsoft Web Platform Installer.

Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. To focus on the answer, I’ve got a simple model as seen below.

[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

Using the WebGrid, it’s easy to display this data to the user.

[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

The first column is the key to making this work. @item.GetSelectLink outputs a HTML anchor tag with the row selected. This is passed as aQueryString, and the name of the QueryString is set by the selectionFieldName property set on the grid.

[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

To find out what row is selected is just as easy. The WebGrid has a property called SelectedRow. This sets a reference to a GridViewRow object that represents the selected row in the control. When you combine this with the HasSelection property, you can get the selected row like this.

[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

I’ve created a partial view called _Person.cshtml. The file begins with an underscore (_) because I don’t want this file called directly from the web. The second parameter is the data being passed into the partial view. The data in this instance is the selected row.

[webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

The partial view has then got access to all the data in the selected row. Nice and easy. Thanks Microsoft!!

The entire source code of this article can be downloaded over here

上一篇:vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)


下一篇:spark2的编译