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.

• From the "MVC4 Project" window 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.

• Click on the "Add" button.

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace SelectGridAPI.Models

{

    public class PersonModel

    {

        public int ID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public int Contact { get; set; }

        public static List<PersonModel> GetPersonDetail()

        {

            return new List<PersonModel>

                       {

                           new PersonModel { ID = 1, FirstName = "Joy", LastName = "Khanna", Contact = 87965 },

                           new PersonModel { ID = 2, FirstName = "Piyush", LastName  = "Mehra", Contact = 98754 },

                           new PersonModel { ID = 3, FirstName = "Tanya", LastName  = "Kapoor", Contact = 45678 },

                           new PersonModel { ID = 3, FirstName = "Neha", LastName  = "Jain", Contact = 48654 },

                       };

        }

    }

}

Step 3

Now select the "HomeController".

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

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using SelectGridAPI.Models;

namespace SelectGridAPI.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View(PersonModel.GetPersonDetail());

        }

        [HttpPost]

        public ActionResult Display(FormCollection Col)

        {

            return PartialView("~/Views/Home/DisplayDetail.cshtml" , new PersonModel {FirstName = "Priyanka",LastName = "Sinha",Contact = 73234});

        }

    }

}

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".

Add the following code.

@model IEnumerable<SelectGridAPI.Models.PersonModel>

@{

    ViewBag.Title = "Index";   

}

<h2>Person Detail</h2>

@{

    WebGrid grid = new WebGrid(Model, selectionFieldName: "SelectedRow");

    @grid.GetHtml(

        columns: grid.Columns(

            grid.Column("Select", header: null, format: @<text>@item.GetSelectLink("Select")</text>),           

            grid.Column("Firstname", format: @<text>@item.FirstName</text>),

            grid.Column("LastName", format: @<text>@item.LastName</text>),

            grid.Column("Contact", format: @<text>@item.Contact</text>)

        )

    )

} 

@if (grid.HasSelection)

{   

    @RenderPage("~/Views/Home/DisplayDetail.cshtml", new { PersonModel = grid.SelectedRow })        

}

 

 

 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".

• Click on the "Add" button.

Add the following code:

@{

    ViewBag.Title = "DisplayDetail";

} 

<h2>DisplayDetail</h2>

<text>

    @Page.PersonModel.FirstName @Page.PersonModel.LastName @Page.PersonModel.Contact

</text>

 

Step 6

Execute the application:

Select any row and click on the Select link: