Working With Searching Panel Application in MVC 5

Introduction

I developed an ASP.NET MVC application in which I used CRUD Operations, working process of LocalDB, Adding View, Working with Model Class and adding a new field using MVC 5 in Visual Studio 2013 Preview. Today I am adding a Search Panel in it to retrieve the information of Cricketers. You can search the information of Cricketer.

In the previous article, I developed an application for Code First Migration in which you will learn to add a new field. Go to the following link:

Introduction of Code First Migration and Adding New Property in Application in MVC5

In that context, I am developing a search in two ways as in the following:

By Name
By Grade

Search By Name

Let's start with searching Cricketer by name with the following procedure.

Step 1: At first debug your application and open Cricketers in your browser URL.

Step 2: Open your "CricketersController.cs" file and change the Index method code with the following code:

public ActionResult Index(string SearchName)
{
var cricketers = from cr in db.Cricketers select cr;
if (!String.IsNullOrEmpty(SearchName))
{
cricketers = cricketers.Where(c => c.Name.Contains(SearchName));
}
return View(cricketers);
}

In the code above I used a LINQ query that will select the name of Cricketers:

var cricketers = from cr in db.Cricketers select cr;

There is a Lambda Expression ("c=>c.Name") in the code above that is used in the method-based queries of LINQ. This LINQ query is executed in the "index.cshtml" file.

Note: If you want to learn more about Query Execution, Click Here.

Step 3: Go to your "Views\Cricketers\Index.cshtml" file to represent the search.

Modify your code to be as shown below:

<p>
@Html.ActionLink("Create New", "Create")
@using (Html.BeginForm())
{
<p>Name: @Html.TextBox("SearchName")<br />
<input type="submit" value="Search" />
</p>
}
</p>

Step 4: Debug your application.

Search the Cricketer.

Search By Grade

In the preceding option we were searching Cricketer by name, here we'll search Cricketer by grade also. For searching for a grade use the following procedure.

Step 1: Open your "CricketersController.cs" file and change the Index method code so it has the following code:

public ActionResult Index(string CricketerGrade, string SearchName)
{
var GradeList = new List<string>();
var GradeQuery = from gq in db.Cricketers orderby gq.Grade select gq.Grade;
GradeList.AddRange(GradeQuery.Distinct());
ViewBag.CricketerGrade = new SelectList(GradeList);
var cricketers = from cr in db.Cricketers select cr;
if (!String.IsNullOrEmpty(SearchName))
{
cricketers = cricketers.Where(c => c.Name.Contains(SearchName));
}
if (!string.IsNullOrEmpty(CricketerGrade))
{
cricketers = cricketers.Where(g => g.Grade == CricketerGrade);
}
return View(cricketers);
}

In the code above there are two parameters passed in the Index method. The following code elaborates that a List object is created that will hold the grade of cricketers from the database:

var GradeList = new List<string>();

There is again a LINQ query used to retrieve all grades of cricketers from the database as in the following:

var GradeQuery = from gq in db.Cricketers orderby gq.Grade select gq.Grade;

The preceding query is not run on the database untill the movie list is iterated over.

Step 2: Now to add code to the UI layer by adding markup. Go to your "Views\Cricketers\Index.cshtml" file and change the code as in the following:

<p>
@Html.ActionLink("Create New", "Create")
@using (Html.BeginForm("Index", "Cricketers", FormMethod.Get))
{
<p>
Name: @Html.TextBox("SearchName")
Grade:@Html.DropDownList("CricketerGrade", "All")
<input type="submit" value="Search" />
</p>
}
</p>

In the code above, I designed a DropDownList and a TextBox to search Cricketer. From the code above the following line contains a parameter named "CricketerGrade". The code above provides the key for the DropDownList helper to find an "IEnumerable<ListItem>" in the ViewBag.

Step 3: Debug your application.

Select your grade from the DropDownList and click on "Search".

Step 4: You can also provide a specific grade like "A". If you provide "A" in the code as I did in the following code then only A Grade will display at first:

Grade:@Html.DropDownList("CricketerGrade", "A")

Summary

So far this article will help to create a Search Panel in your User Interface Layer in your MVC application. You will create an action method and a view to support for your change in an action method that you will search Cricketers by name or by grade or both. So do read my previous articles to better understand this.

Thanks for reading my article and don't forget to comment.