Get Selected Row From WebGrid in Web API

Introduction

This article explains how to a row from a WebGrid in the Web API. We use a Grid with  4 rows and select the row from the WebGrid and get the desired row.

Let's see an example.

Step 1

Create a Web Application as in the following:

  • Start Visual Studio 2012.
  • From the Start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

    Select MVC4 Web Application

  • From the "MVC4 Project" window select "Web API".

    Select Web API

  • Click on the "OK" button.

Step 2

Create a Model Class.

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    Add Model Class

  • Click on the "Add" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace SelectGridAPI.Models  
  6. {  
  7.     public class PersonModel  
  8.     {  
  9.         public int ID { getset; }  
  10.         public string FirstName { getset; }  
  11.         public string LastName { getset; }  
  12.         public int Contact { getset; }  
  13.         public static List<PersonModel> GetPersonDetail()  
  14.         {  
  15.             return new List<PersonModel>  
  16.             {  
  17.                 new PersonModel { ID = 1, FirstName = "Joy", LastName = "Khanna", Contact = 87965 },  
  18.                 new PersonModel { ID = 2, FirstName = "Piyush", LastName  = "Mehra", Contact = 98754 },  
  19.                 new PersonModel { ID = 3, FirstName = "Tanya", LastName  = "Kapoor", Contact = 45678 },  
  20.                 new PersonModel { ID = 3, FirstName = "Neha", LastName  = "Jain", Contact = 48654 },  
  21.             };  
  22.         }  
  23.     }  
  24. } 

Step 3

Now select the "HomeController".

  • In the "Solution Explorer".
  • Expand the Controller folder.
  • Select the "HomeController".

    Select Controller

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using SelectGridAPI.Models;  
  7. namespace SelectGridAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View(PersonModel.GetPersonDetail());  
  14.         }  
  15.         [HttpPost]  
  16.         public ActionResult Display(FormCollection Col)  
  17.         {  
  18.             return PartialView("~/Views/Home/DisplayDetail.cshtml" , new PersonModel {FirstName = "Priyanka",LastName = "Sinha",Contact = 73234});  
  19.         }  
  20.     }  
  21. } 

Step 4

Now write some HTML code in the "index.cshtml" file. This file exists:

  • In the "Solution Explorer".

  • Expand "Views" folder.

  • Select "Home" -> "index.cshtml".

    Select Index View

Add the following code.

  1. @model IEnumerable<SelectGridAPI.Models.PersonModel>  
  2. @{  
  3.     ViewBag.Title = "Index";  
  4. }  
  5. <h2>Person Detail</h2>  
  6. @{  
  7.     WebGrid grid = new WebGrid(Model, selectionFieldName: "SelectedRow");  
  8.     @grid.GetHtml(  
  9.         columns: grid.Columns(  
  10.             grid.Column("Select", header: null, format: @<text>@item.GetSelectLink("Select")</text>),  
  11.             grid.Column("Firstname", format: @<text>@item.FirstName</text>),  
  12.             grid.Column("LastName", format: @<text>@item.LastName</text>),  
  13.             grid.Column("Contact", format: @<text>@item.Contact</text>)  
  14.         )  
  15.     )  
  16. }   
  17. @if (grid.HasSelection)  
  18. {  
  19.     @RenderPage("~/Views/Home/DisplayDetail.cshtml"new { PersonModel = grid.SelectedRow })  
  20. }   

Step 5

Create a Partial View:

  • In the HomeController.

  • Right-click on the "Index" Action method.

  • Select "Add View" and change the name to "DisplayDetail".

    Create Partial View

  • Click on the "Add" button.

Add the following code:

  1. @{  
  2.     ViewBag.Title = "DisplayDetail";  
  3. }  
  4. <h2>DisplayDetail</h2>  
  5. <text>  
  6.     @Page.PersonModel.FirstName @Page.PersonModel.LastName @Page.PersonModel.Contact  
  7. </text> 

Step 6

Execute the application:

Display WebGrid Data

Select any row and click on the Select link:

Display Selected Row from WebGrid