Download Project  (Full Project)

Step-1

In this tutorial I am going to show you “Jquery Live Search” how to implement search functionality in ASP.NET MVC. First open visual studio then creates an ASP.NET web application. Then Select MVC and click ok. Now create database in SQL server management studio. Now connect ADO.NET Entity framework and connect database. Now build the project. Under the table have some property. First create database object. Then the Home controller under index method fined the search value by the parameter over load. And pass the view. Given bellow the controller code:

public ActionResult Index(string Name, string Surname)
    {
        var SearchList = from m in db.Klienci
                         select m;
        if (!String.IsNullOrEmpty(Name))
        {
            SearchList = SearchList.Where(s => s.Name.Contains(Name));
        }
        if (!String.IsNullOrEmpty(Surname))
        {
            SearchList = SearchList.Where(s => s.Nazwisko.Contains(Surname));
        }
        return View(SearchList);
    }

Step-2

Now “Id” pass the value into the method under view Get the input search value by the rezor syntax using JavaScript. Also find value show the view under table tag. When data is not finding then the red message show on the view otherwise find the value and show the view by using foreach loop under table tag. Given bellow the view code:

<div class="form-horizontal">
        <hr />
        <h4>Search for a client: </h4>

        <div class="input-group">
            <span class="input-group-addon" id="Name">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </span>
            @Html.TextBox("Name", "", new { @class = "form-control", placeholder = "Name" })
        </div>
        <div><h6></h6></div>
        <div class="input-group">
            <span class="input-group-addon" id="Surname">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </span>
            @Html.TextBox("Surname", "", new { @class = "form-control", placeholder = "Surname" })
        </div>
        <div><h6></h6></div>
        <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#infoModal">Search</button>


<script>
$(function() {

    $("#Name,#SurName").keyup(function(e) {
            var n = $("#Name").val();
            var sn = $("#SurName").val();
            $.get("/Home/Index?Name="+n+"&SurName="+sn,function(r){
               //update ui with results
               $("#resultsTable").html(r);
            });

    });

});

</script>

    </div>

Step-3

Now build and run the project.