Creating Grid View In ASP.NET MVC With Search, Pagination And Export To Excel

In this example, create an ASP.Net MVC project by selecting File -> New -> Project from Visual Studio. Now you can see the below window popped up, from that select “Web” template from the left panel and from the right panel select “ASP.Net Web Application (.Net Framework)” then give the name for the project, select the path, and click “OK” to continue.

 

 

After that you can see one more window, from that select “Empty” Template and select MVC as Core references as shown below,

 

Now you can see the solution structure as shown below,

 

• Now let’s begin coding. First create model by right clicking on Models folder and select Add -> Class and give some name to that. For my example, I have created 2 classes as shown below:
  

  public class GridModel
  {
      public int Id { get; set; }
      public string Name { get; set; }
  
      public string Desc { get; set; }
      public string Date { get; set; }
  }
  public class GridModelList
  {
      public List<GridModel> GridData { get; set; }
  }

• Next Create a controller to use this model and pass to the view, to create a controller right click on the Controllers folder and select Add -> Controller, after that you can see a window shown below is popped up, from that select the first one (MVC 5 Controller- Empty) , then click on Add.
  
  

Now you can see a small pop up to give a name as shown below, provide name and click Add to continue.

• Inside controller write an action method to fill the “GridModelList”, for this I am using the default-created method “Index” as shown below.
  

  public ActionResult Index()
    {
        GridModelList glm = new GridModelList();
        List<GridModel> gl = new List<GridModel>();
        GridModel gm = new GridModel();
        gm.Id = 1;
        gm.Name = "Test1";
        gm.Desc = "Test 1 Description";
        gm.Date = "29-03-2019";
        gl.Add(gm);
  
        GridModel gm1 = new GridModel();
        gm1.Id = 2;
        gm1.Name = "Test2";
        gm1.Desc = "Test 2 Description";
        gm1.Date = "30-03-2019";
        gl.Add(gm1);
  
        GridModel gm2 = new GridModel();
        gm2.Id = 3;
        gm2.Name = "Test3";
        gm2.Desc = "Test 3 Description";
        gm2.Date = "01-04-2019";
        gl.Add(gm2);
  
        glm.GridData = gl;
  
        return View();
    }

• Next we need to create the View and call that View by passing this model (ex: GridModelList) from the Controller. To create view select “Views” folder or inside “Views” folder you may see the folder name as your controller name (as per my example “Grid” ) is created, Right click on that and select Add -> View then you can see a window has opened. Fill the window by giving name, selecting Empty Template, and selecting Model as show below.
  
  

• After adding View, design the view using model as shown below,
  

  @model MVCGridExample.Models.GridModelList
  
  @if(@Model!=null)
  {
      <br />
      <br />
  
      <table id="tblGrid">
          <thead>
              <tr>
                  <th>No</th>
                  <th>Name</th>
                  <th>Description</th>
                  <th>Date</th>
              </tr>
          </thead>
          <tbody>
  
                  @foreach (var data in @Model.GridData)
                  {
                      <tr>
                          <td>@data.Id </td>
                          <td>@data.Name </td>
                          <td>@data.Desc </td>
                          <td>@data.Date </td>
                      </tr>
                  }
  
          </tbody>
      </table>
  }

• After view is ready, go to controller and call the view with model as shown below,
  

  return View("~/Views/Grid/GridView.cshtml",glm);

• Now run and check. The design will look as shown below,
  
  
   As you can see, the above design does not look good, and there is no option to search or export the data. To make this table design a grid view and give options to search and export data we can use Table plugin for JQuery from here.

After downloading files, add .js files into scripts -> Grid folder and add “jquery.dataTables.min.css” file into Content folder as shown below,

 

Next add these script references into view and call datatable function inside script by adding export button.

The full code is as  follows,

@model MVCGridExample.Models.GridModelList
<script src="~/scripts/jquery-1.12.4.min.js"></script>
<script src="~/scripts/Grid/jquery.dataTables.min.js"></script>
<script src="~/scripts/Grid/jszip.min.js"></script>
<script src="~/scripts/Grid/dataTables.buttons.min.js"></script>
<script src="~/scripts/Grid/buttons.html5.min.js"></script>
<script src="~/scripts/Grid/jquery-ui.min.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />

@if(@Model!=null)
{
    <br />
    <br />

    <table id="tblGrid">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Description</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>

                @foreach (var data in @Model.GridData)
                {
                    <tr>
                        <td>@data.Id </td>
                        <td>@data.Name </td>
                        <td>@data.Desc </td>
                        <td>@data.Date </td>
                    </tr>
                }

        </tbody>
    </table>
}
<script>

    $(document).ready(function () {
       gridDataTableView("Grid Example.xls");
    });

    gridDataTableView = function (fname) {
        $('#tblGrid').dataTable({
            "bFilter": true,
            "bLengthChange": false, "bPaginate": true, "bInfo": true,
            dom: 'Bfrtip',
            "order": [[0, 'desc'], [1, 'desc']],
            buttons: [{ extend: 'excelHtml5', text: 'Export to Excel', className: 'link_button', title: fname }]
        });
    }
</script>

 Here above in datatable for the JQuery function:

• "bfilter" is used to give filter option for grid view, if you do not want filter option just make it false.
• "bPaginate" is used to make pagination.
• "bInfo" is used to show how many records are displaying out of total record in grid view, example here "Showing 1 to 3 of 3 entries".
• "order" is used to order the data based on column ascending or descending, here we're ordering first and second column in descending order
  

The output will look as follows:

 

• Using Export to Excel you can export grid data into excel file·
•  Using search box you can search data.
•  When you click on headings you can sort by that header data.

This is just an example; there is  even more you can do with this datatable JQuery.

For more examples click here.