Ajax helper Based Search in MVC

In this post I will show how to use Ajax Helper for searching as shown below.
Previously I had shown How to use
DataTables:  Code First Migrations in MVC 5, Jquery DataTable in MVC, Jquery DataTable multisearch paging and Sorting in MVC server side, Jquery DataTable paging, Sorting and Multi search with datepicker in MVC server side, Cascading DropDowns in Asp.Net MVC

AngularJS: Two way Binding in AngularJS, Simple Routing in AngularJS, Datatables in AngularJS and asp.net mvc, Datatables Column Filter with AngularJS and asp.net mvc, Datatable Exporting with AngularJS and asp.net mvc, AngularJS with Web Api in Asp.net MVC using Token based Authentication

Out Put:

Create MVC Project and ADD jquery.unobtrusive-ajax.js in _Layout.cshtml page.

If the file is not there in scripts folder add from nuget.

ADD Ado.Net Entity Model as shown in
CRUD Operations in ASP.Net MVC 5 without writing single line of Code

SQL DB Script can be downloaded from HERE

Open Index.cshtml and add the script as shown.

  

@model IEnumerable<MVC_AjaxHelper_Search.Models.Employee>
@{
    ViewBag.Title = "Home Page";
}

<center>
    <h2 style="color:gold">Ajax Form Based Search</h2>
</center>

@*@using (Ajax.BeginForm("AjaxSearch", new AjaxOptions*@

@using (Ajax.BeginForm(new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "employeeDiv"
}))
{
    <div class="form-group">
        <div class="col-xs-2">
            <label for="searchFName">Firs Name</label>
            <input type="search" placeholder="First Name" id="searchFName" name="searchFName" class="form-control" />
        </div>
        <div class="col-xs-2">
            <label for="searchLName">Last Name</label>
            <input type="search" placeholder="Last Name" id="searchLName" name="searchLName" class="form-control" />
        </div>
        <div class="col-xs-2">
            <label for="searchGender">Gender</label>
            <input type="search" placeholder="Gender" id="searchGender" name="searchGender" class="form-control" />
        </div>
        <div class="col-xs-2">
            <label for="searchDOJ">DOJ</label>
            <div id="divDateDOJ" class="input-append">
                <input type="text" placeholder="dd-MM-yyyy" data-format="dd-MM-yyyy" id="searchDOJ" name="searchDOJ" class="form-control" />
                <span class="add-on">
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                    </i>
                </span>
            </div>
        </div>
        <div class="col-xs-2">
            <label></label>
            <input type="submit" value="Search" class="btn btn-primary form-control" />
        </div>
    </div>
}

@Html.Partial("_Employees", Model)

<script type="text/javascript">
  $(function() {
      $('#divDateDOJ').datetimepicker({
      pickTime: false
    });
  });
</script>

Open HomeController.cs files and replace Index ActionResult as shown below

  

public ActionResult Index(string searchFName = null, string searchLName = null,
      string searchGender = null, string searchDOJ = null)
{
 using (EmployeeDBEntities ent = new EmployeeDBEntities())
 {
  DateTime dt = DateTime.Now.AddYears(-50);
  if (searchDOJ != null && searchDOJ.Trim() != "")
   dt = DateTime.ParseExact(searchDOJ, "dd-MM-yyyy", CultureInfo.InvariantCulture);

  var rslt = ent.Employees
   .Where(a =>
    (searchFName == null || a.FirstName.Contains(searchFName)) &&
    (searchLName == null || a.LastName.Contains(searchLName)) &&
    (searchGender == null || a.Gender.StartsWith(searchGender)) &&
    DbFunctions.TruncateTime(a.DOJ) >= dt
   ).Take(5)
   .ToList();

  if (Request.IsAjaxRequest())
  {
   return PartialView("_Employees", rslt);
  }

  return View(rslt);
 }
}

Create a Partial class with the name "_Employees" with out modal class in the "Views/Home" folder as add the below code in it.

  

@model IEnumerable<MVC_AjaxHelper_Search.Models.Employee>

<div id="employeeDiv">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Sal</th>
                <th>DOJ</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.FirstName</td>
                    <td>@item.LastName</td>
                    <td>@item.Gender</td>
                    <td>@item.Salary</td>
                    <td>@item.DOJ.ToString("dd-MM-yyyy")</td>
                </tr>
            }
        </tbody>
    </table>
</div>