Friday, January 20, 2017

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 5Jquery DataTable in MVCJquery DataTable multisearch paging and Sorting in MVC server sideJquery DataTable paging, Sorting and Multi search with datepicker in MVC server sideCascading DropDowns in Asp.Net MVC

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";

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

@*@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 class="col-xs-2">
            <label for="searchLName">Last Name</label>
            <input type="search" placeholder="Last Name" id="searchLName" name="searchLName" class="form-control" />
        <div class="col-xs-2">
            <label for="searchGender">Gender</label>
            <input type="search" placeholder="Gender" id="searchGender" name="searchGender" class="form-control" />
        <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">
        <div class="col-xs-2">
            <input type="submit" value="Search" class="btn btn-primary form-control" />

@Html.Partial("_Employees", Model)

<script type="text/javascript">
  $(function() {
      pickTime: false

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

  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">
                <th>First Name</th>
                <th>Last Name</th>
            @foreach (var item in Model)

No comments:

Post a Comment