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:

Step 2

Create a Model Class.

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 { get; set; }
  10. public string FirstName { get; set; }
  11. public string LastName { get; set; }
  12. public int Contact { get; set; }
  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".

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:

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:

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