Introduction

This article describes how to search the records and displays in a WebGrid in the Web API.

The following is the procedure for creating the application.

Step 1

First create an Web API Application using the following:

Step 2

In this step add 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 GridViewAPI.Models
  6. {
  7. public class StudentModel
  8. {
  9. public string key { get; set; }
  10. public List<StudentRecord> StudentRModel { get; set; }
  11. }
  12. public class StudentRecord
  13. {
  14. public string Name {get; set;}
  15. public string Course{get;set;}
  16. public string Rank{get;set;}
  17. public string City { get; set; }
  18. }
  19. }

Step 3

In the "HomeController" write some code. This file exists:

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 GridViewAPI.Models;
  7. namespace GridViewAPI.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. [HttpGet]
  12. public ActionResult Index()
  13. {
  14. StudentModel obj = new StudentModel();
  15. obj.StudentRModel = new List<StudentRecord>();
  16. obj.StudentRModel = GetData().OrderBy(m => m.Course).ToList();
  17. return View(obj);
  18. }
  19. [HttpPost]
  20. public ActionResult Index(StudentModel student)
  21. {
  22. student.StudentRModel = GetData().Where(m => m.Course == student.key.ToUpper()).ToList();
  23. return View(student);
  24. }
  25. public List<StudentRecord> GetData()
  26. {
  27. List<StudentRecord> objmodel = new List<StudentRecord>();
  28. objmodel.Add(new StudentRecord { Course = "MCA", Name = "Smith", Rank = "10",City="Kanpur" });
  29. objmodel.Add(new StudentRecord { Course = "MCA", Name = "Jhon", Rank = "5", City = "Lucknow" });
  30. objmodel.Add(new StudentRecord { Course = "MBA", Name = "Tanya", Rank = "3", City = "Delhi" });
  31. objmodel.Add(new StudentRecord { Course = "MBA", Name = "Malini", Rank = "4", City = "Banglore" });
  32. objmodel.Add(new StudentRecord { Course = "MBA", Name = "Varun", Rank = "19", City = "Gurgao" });
  33. objmodel.Add(new StudentRecord { Course = "BTech", Name = "Arun", Rank = "13", City = "Noida" });
  34. objmodel.Add(new StudentRecord { Course = "BTech", Name = "Vishakha", Rank = "7", City = "Rajasthan" });
  35. objmodel.Add(new StudentRecord { Course = "BCA", Name = "Tarun", Rank = "9", City = "Gujrat" });
  36. objmodel.Add(new StudentRecord { Course = "BCA", Name = "Mayank", Rank = "1", City = "Kannauj" });
  37. objmodel.Add(new StudentRecord { Course = "BCA", Name = "Ram", Rank = "2", City = "Jaipur" });
  38. return objmodel;
  39. }
  40. }
  41. }

Step 4

In the "View" write some code. This view exists:

Add the following code:

  1. @model GridViewAPI.Models.StudentModel
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. <style type="text/css">
  6. table.gridtable {
  7. font-family: verdana,arial,sans-serif;
  8. font-size:11px;
  9. color:#333333;
  10. border-width: 1px;
  11. border-color: #4800ff;
  12. border-collapse: collapse;
  13. }
  14. table.gridtable th {
  15. border-width: 1px;
  16. padding: 8px;
  17. border-style: solid;
  18. border-color: #4800ff;
  19. background-color: #ffd800;
  20. }
  21. table.gridtable td {
  22. border-width: 1px;
  23. padding: 8px;
  24. border-style: solid;
  25. border-color: #4800ff;
  26. background-color: #999999;
  27. }
  28. </style>
  29. @using (Html.BeginForm())
  30. {
  31. <table width="40%" cellpadding="0" cellspacing="0">
  32. <tr>
  33. <td align="right">
  34. Search :
  35. </td>
  36. <td align="left">@Html.TextBoxFor(m => m.key) <input type="submit" value="Search" />
  37. </td>
  38. <td align="left">
  39. </td>
  40. </tr>
  41. <tr>
  42. <td colspan="2">
  43. <br />
  44. @{
  45. var grid = new WebGrid(source: Model.StudentRModel, rowsPerPage: 10);
  46. }
  47. @grid.GetHtml(alternatingRowStyle: "even",
  48. tableStyle: "gridtable",
  49. columns: grid.Columns(
  50. grid.Column("Course", "Course"),
  51. grid.Column("Name", header: "Name"),
  52. grid.Column("Rank", "Rank"),
  53. grid.Column("City", "City")
  54. ))
  55. </td>
  56. </tr>
  57. </table>
  58. }

Step 5

Now execute the application:

gd5.jpg

Search the record type and Course name in the search box then click on the search button.

gd6.jpg