Practical Approach to Learn MVC: Part 5

Introduction

This is the continuation from Part 4. If you are new to MVC then I will strongly recommend you to please go through Part Four before proceeding to this article. Click the following links for the previous parts of this tutorial.

• Practical Approach to Learn MVC: Part 1
• Practical Approach to Learn MVC: Part 2
• Practical Approach to Learn MVC: Part 3
• Practical Approach to Learn MVC: Part 4

In the last tutorial we see how to edit rows and add new rows from an existing table using the Code First Approach of Entity Framework and create views. In this session will discuss various customizations based on our requirements of the Index view.

In this session we will implement the following customization in the default Index view.

• Search
• Conductional Search
• Paging
• Shorting

Implementation of search in Index View



For getting the preceding user interface we need to add a form tag inside the Index view just below the Create New form. The form tag contains one TextBox and one button with a label. Use the following code for this purpose.

@using (Html.BeginForm("Index", "Employees", FormMethod.Get))
{
    <text >Employee Name</text>
    <input id="tbtEmployeeName" type="text" name="EmpName" />
    <input id="Submit1" type="submit" value="submit" />
}

We use @ symbol to switch razor to C# mode. The BeginForm html helper has some overloaded form in which we select the preceding form that contains three parameters. The syntax will be like follows:

Html.BeginForm("<Controller Action Method Name>", "<ControllerName>", FormMethod.Get)

The form method will be Get in this case. That's it, our user interface is ready. Now we need to change the Index action method of the Employees Controller. Use the following code to do that:

// GET: Employees
        public ActionResult Index(string EmpName)
        {

            if (string.IsNullOrEmpty(EmpName))
            {
                return View (db.Employees.Include(e => e.Department).ToList());
            }
            else
            {
                return View (db.Employees.Include(e => e.Department)
                    .Where (x=>x.EmpName.StartsWith(EmpName)).ToList ());
            }
        }

This is simple and straightforward code that I have written. A simple LINQ query I have used to filter the employees whose name starts with the name provided by the user.

Note: Here one thing should be kept in mind. That is, the name of the TextBox and the parameter name of the Index action method must be the same. In this case it's EmpName. So that the MVC model binder can understand what value is passing from the view. Suppose we have more than one TextBox for a search. Then there must be a same name parameter available in that method otherwise it will return an error.

Here if we want to add a message for no row found if no employee name matches the search criteria then we need to modify the table like:

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EmpName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MobileNo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EmailId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EmpDOB)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department.DeptName)
        </th>
        <th>Action</th>
    </tr>
    @if (Model.Count() == 0)
    {
        <tr>
            <td colspan="8"><text>No Data Found.</text></td>
        </tr>
    }
    else
    {
        foreach(var item in Model)
        {
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.EmpName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Salary)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MobileNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmailId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmpDOB)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Department.DeptName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    }

</table>

I have just added an if condition that checks if the model does not contain any row and renders a simple message there. Here we need to remove the foreach(var item in Model) @ symbol because all the cs code is available inside one if block.

Implementation of Conductional Search



Now our requirement has been modified as you can see from the preceding image. We need to make our search screen more flexible by adding a search by department option also. So for doing this we need to modify our form element with the following code.

@using (Html.BeginForm("Index", "Employees", FormMethod.Get))
{
    <text><b>Search By : </b></text>
    @Html.RadioButton("searchBy", "Name")<text>Name</text>
    @Html.RadioButton("searchBy","Department")<text>Department</text>
    <br />
    <input id="txtsearchTerm " type="text" name="searchTerm" />
    <input id="btnsubmit" type="submit" value="submit" />
}

Now run the index view and notice the URL by selecting one option with some data in the text box. The URL will be something like.

http://localhost/CodeFirstApproachWithEmployeesInfo/Employees?searchBy=Name&EmpName=m

Here I select the name radio button and enter “m” inside TextBox. searchBy=Name&EmpN here searchBy is passing a value Name so inside the Index action method we need to find this parameter value and modify it. After modification the index action method will be like:

// GET: Employees
      public ActionResult Index(string searchTerm, string searchBy)
      {
          if (searchBy=="Name")
          {
              return View(db.Employees.Include(e => e.Department).Where(
                  x => x.EmpName.StartsWith(searchTerm) || searchTerm==null).ToList());
          }
          else
          {
              return View(db.Employees.Include(e => e.Department)
                  .Where(x => x.Department.DeptName.StartsWith(searchTerm)||searchTerm==null).ToList());

          }
      }

This is a straightforward LINQ query. One thing should always be kept in mind. The name of the parameter must match the user interface tag name otherwise you will get an error.

Note: If you want to make the name radio button selected by default when the Index view loads then we need to just pass one additional Boolean flag to that radio button's HTML helper.

@Html.RadioButton("searchBy", "Name",true)<text>Name</text>

Implementation of Paging in Index view

For implementing the paging control we need to add the PagedList.MVC package. For adding PagedList.MVC right-click on the references tab and click on Manage NuGet packages and search PagedList.MVC.



Click Install to install that package. Then use the following procedure.

Step 1

After successful installation go to the controller action method for the index view and import the following namespace:

using PagedList;

Step 2

Pass the page number parameter in the Index action method.

public ActionResult Index(string searchTerm, string searchBy, int? page)
{
}

Page is of Nullable int because first the time value will be null.

Step 3

Modify the preceding method using the following code.

public ActionResult Index(string searchTerm, string searchBy, int? page)
{
     if (searchBy=="Name")
     {
         return View(db.Employees.Include(e => e.Department).Where(
             x => x.EmpName.StartsWith(searchTerm) || searchTerm==null).ToList()
             .ToPagedList(page ?? 1, 3));
     }
     else
     {
         return View(db.Employees.Include(e => e.Department)
             .Where(x => x.Department.DeptName.StartsWith(searchTerm)||searchTerm==null).ToList()
             .ToPagedList(page ?? 1, 3));

     }
 }

Now hover the mouse over return to see which type of list it is returning.



It's of type IpagedList<Employee>.

Step 4

As we know the return type of the view is of type IpagedList<Employee> but currently our Employee view is of type IEnumerable so we need to modify that.

@model PagedList.IPagedList<CodeFirstApproachWithEmployeesInfo.Models.Employee>

We need to add the following namespace also.

@using PagedList.Mvc;

Step 5

Now the view is of type IPagedList< Employee > so for accessing the list value from the type IPagedList type we need to use model.First().EmpName and so on.

Step 6

Now we need to write the following code to display the page list inside the Index view.

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, searchBy =
Request.QueryString["searchBy"], search = Request.QueryString["search"] }))

There might be some confusion in the preceding code so let me explain it a bit.

Request.QueryString["searchBy"],search = Request.QueryString["search"] if we did not pass this parameter then when we move to the second page we will lose the filter condition. If you are not using more than one condition then you may skip this code.

The final Index view code will be like:

@model PagedList.IPagedList<CodeFirstApproachWithEmployeesInfo.Models.Employee>
@using PagedList.Mvc;
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("Index", "Employees", FormMethod.Get))
{
    <text><b>Search By : </b></text>
    @Html.RadioButton("searchBy", "Name", true)<text>Name</text>
    @Html.RadioButton("searchBy", "Department")<text>Department</text>
    <br />
    <input id="tbtsearchTerm" type="text" name="searchTerm" />
    <input id="btnsubmit" type="submit" value="submit" />
}
<br />
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.First().EmpName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().MobileNo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().EmailId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().EmpDOB)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().Department.DeptName)
        </th>
        <th>Action</th>
    </tr>
    @if (Model.Count() == 0)
    {
        <tr>
            <td colspan="8"><text>No Data Found.</text></td>
        </tr>
    }
    else
    {
        foreach (var item in Model)
        {
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.EmpName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Salary)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MobileNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmailId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmpDOB)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Department.DeptName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    }

</table>
@Html.PagedListPager(Model, page => Url.Action("Index", new
{
    page,
    searchBy = Request.QueryString["searchBy"],
    search = Request.QueryString["search"]
}),
new PagedListRenderOptions()
{
    Display = PagedListDisplayMode.IfNeeded,
    DisplayItemSliceAndTotal = true
})

Now run the Index view to get the following results.



Now the problem with the preceding code is that when only three records will display then also the page number will. So how to modify page number to be shown when a second page of records exist else no?

@Html.PagedListPager(Model, page => Url.Action("Index", new
{
    page,
    searchBy = Request.QueryString["searchBy"],
    search = Request.QueryString["search"]
}),
new PagedListRenderOptions()
{
    Display = PagedListDisplayMode.IfNeeded
})

So now the page list will display only if there are more records than will be in the table.



Note: PagedListRenderOptions() is one of the very important property to edit the design of paging.

There are several parameters or flags available for various purposes.



You can use it for various purposes.

 

1. If you want to display the current active page and the total number of pages.
   
   Just make the following flag true.
   

   DisplayPageCountAndCurrentLocation = true

   Now the paging code will be like:
   

   @Html.PagedListPager(Model, page => Url.Action("Index", new
   {
       page,
       searchBy = Request.QueryString["searchBy"],
       search = Request.QueryString["search"]
   }),
   new PagedListRenderOptions()
   {
       Display = PagedListDisplayMode.IfNeeded,
       DisplayPageCountAndCurrentLocation = true
   })

   And the output result for that page will be:
   
   
   
   
2. If you want to display the number of rows displayed, of the total number of rows available.
   Mark following flag true instead of the preceding flag:
   

   DisplayItemSliceAndTotal = true

   The code will be like:
   

   new PagedListRenderOptions()
   {
      Display = PagedListDisplayMode.IfNeeded,
      DisplayItemSliceAndTotal = true
   })

   And the output will be:
   
   
   
   In the same way you can use the other properties, just check the type of value that the flag is accepting and use it.
   
   Implementation of Shorting controls in Index view.
   
   Now we try to implement sorting in the preceding table. When we click department the first time it will sort the department by salary the first time in ascending order. If I click again then the records will be sorted in descending order. Let's see how to implement this.
   
   For implementing sorting we need to use the following procedure.
   
   Step 1
   
   Go to the Index action method inside the Employees controller and modify the method using the following code.
   

   public ActionResult Index(string searchTerm, string searchBy, int? page, string sortBy)
   {
       ViewBag.DeptSortParm = String.IsNullOrEmpty(sortBy) ? "DeptDesc" : "";
       ViewBag.NameSortParm = sortBy == "EmpName" ? "EmpNameDesc" : "EmpName";
       var employees = db.Employees.AsQueryable();
   
       if (searchBy == "DeptDesc")
       {
           employees = employees.Include(e => e.Department)
                 .Where(x => x.Department.DeptName.Equals(searchTerm) || searchTerm == null);
   
       }
       else
       {
           employees = employees.Where(x => x.EmpName.Equals(searchTerm) || searchTerm == null);
       }
       switch (sortBy)
       {
           case "DeptDesc":
               employees = employees.OrderByDescending(x => x.Department.DeptName);
               break;
           case "EmpNameDesc":
               employees = employees.OrderByDescending(x => x.EmpName);
               break;
           case "EmpName":
               employees = employees.OrderBy(x => x.EmpName);
               break;
           default:
               employees = employees.OrderBy(x => x.Department.DeptName);
               break;
       }
       return View(employees.ToPagedList(page ?? 1, 3));
   }

   Step 2
   
   Now our Index action method is ready. In the view we need to create two link buttons on the department and Empname header text. When we click on that button sorting will be in action. For generating a link button we need to use the following HTML helper.
   
   Replace the Employee name field with the following code:
   

   @Html.ActionLink("Name", "Index", new
           {
               sortBy = ViewBag.NameSortParm,
               searchBy = Request["searchBy"],
               search = Request["search"]
           })

   And replace the department with the following code:
   

   @Html.ActionLink("Department", "Index", new
           {
               sortBy = ViewBag.DeptSortParm,
               searchBy = Request["searchBy"],
               search = Request["search"]
           })

   Thant's it, sorting is ready. Run the Index view and you will get the following results.
   
   
   
   As shown in the preceding image we are getting the hyperlink for the name and department field. When we click on that we will get the output as we want.
   
   Note: The problem with this code is that when we clicked on page number two we lost our filter condition. This is basically because when we click on the page the page the URL is changed.
   
   One page number one after sorting the URL is (click on the Name for example).
   
   http://localhost/CodeFirstApproachWithEmployeesInfo/Employees?sortBy=EmpName
   
   But when we click on the page two the URL will be:
   
   http://localhost/CodeFirstApproachWithEmployeesInfo/Employees?page=2
   
   Look at the difference on page two. We are losing our shortBy parameter. So we lost our sort results. For maintaining the sort results show how we need to pass the shortBy parameter on page two also. So for doing this we need to modify our paging code a bit like by adding:
   
   sortBy = Request["sortBy"]
   
   So the final code will be:
   

   @Html.PagedListPager(Model, page => Url.Action("Index", new
   {
       page,
       searchBy = Request.QueryString["searchBy"],
       search = Request.QueryString["search"],
       sortBy = Request["sortBy"]
   }),
   new PagedListRenderOptions()
   {
       Display = PagedListDisplayMode.IfNeeded,
       DisplayItemSliceAndTotal = true
   })

   That's it, we are now all done. The sorting will work fine. The index view will look like:
   

   @using PagedList.Mvc;
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   @using (Html.BeginForm("Index", "Employees", FormMethod.Get))
   {
       <text><b>Search By : </b></text>
       @Html.RadioButton("searchBy", "Name", true)<text>Name</text>
       @Html.RadioButton("searchBy", "Department")<text>Department</text>
       <br />
       <input id="tbtsearchTerm" type="text" name="searchTerm" />
       <input id="btnsubmit" type="submit" value="submit" />
   }
   <br />
   <table class="table">
       <tr>
           <th>
               @Html.ActionLink("Name", "Index", new
               {
                   sortBy = ViewBag.NameSortParm,
                   searchBy = Request["searchBy"],
                   search = Request["search"]
               })
   
           </th>
           <th>
               @Html.DisplayNameFor(model => model.First().Salary)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.First().Gender)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.First().MobileNo)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.First().EmailId)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.First().EmpDOB)
           </th>
           <th>
               @Html.ActionLink("Department", "Index", new
               {
                   sortBy = ViewBag.DeptSortParm,
                   searchBy = Request["searchBy"],
                   search = Request["search"]
               })
   
           </th>
           <th>Action</th>
       </tr>
       @if (Model.Count() == 0)
       {
           <tr>
               <td colspan="8"><text>No Data Found.</text></td>
           </tr>
       }
       else
       {
           foreach (var item in Model)
           {
               <tr>
   
                   <td>
                       @Html.DisplayFor(modelItem => item.EmpName)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.Salary)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.Gender)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.MobileNo)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.EmailId)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.EmpDOB)
                   </td>
                   <td>
                       @Html.DisplayFor(modelItem => item.Department.DeptName)
                   </td>
                   <td>
                       @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                       @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                       @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                   </td>
               </tr>
           }
       }
   
   </table>
   @Html.PagedListPager(Model, page => Url.Action("Index", new
   {
       page,
       searchBy = Request.QueryString["searchBy"],
       search = Request.QueryString["search"],
       sortBy = Request["sortBy"]
   }),
   new PagedListRenderOptions()
   {
       Display = PagedListDisplayMode.IfNeeded,
       DisplayItemSliceAndTotal = true
   })

Summary

In this illustration you came to understand the basics of customization on the Index view.

Thanks.

I would like to get feedback from my readers. Please post your feedback, question, or comments about this article.