HOW TO SEARCH LIST DATA IN MVC USING AJAX

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
Mvc  Mvc3  Mvc2  Mvc4  Mvc5  Ajaxform 
 1626  View(s)
Ratings:
Rate this:
I want to  search list data in mvc using ajax how to do this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: how to search list data in mvc using ajax

    Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")  
        <script src="~/Scripts/jquery-2.1.4.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    </head>
    <body class="PageContainer">

        <div class="divMain">
            @RenderBody()
        </div>
        <div class="popup" style="display: none;" id="modelpopup">
        </div>
    </body>
    </html>
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '.openDialog', function (e) {
                e.preventDefault();;
                $.get($(this).attr("href"), function (response) {
                    $('#modelpopup').html(response);
                    $('#modelpopup').slideDown();
                });
            });
        });
        function onSuccess() {
            $.ajax({
                type: "POST",
                url: "/Home/Search",
                data: {},
                success: function (response) {
                    $('#divUserList').html(response);
                    $('#modelpopup').slideUp();
                },
            });

        }
        $(document).on('click', '.pagination li a', function (e) {
            e.preventDefault();
            if ($(this).attr("href") != "" && $(this).attr("href") != undefined) {
                $.post($(this).attr("href"), { SearchText: $('#SearchText').val() }, function (response) {
                    $('#divUserList').html(response);
                });
            }
        });
        function showWindow() {
            $('#modelpopup').slideDown();
        }
        function HideWindow() {
            $('#modelpopup').slideUp();
        }
        function Confirmation() {
            if (confirm("Are you sure you want to Delete ?")) {
                return true;
            } else {
                return false;
            }
        }


    </script>

    _header.cshtml

    <div class="searchBox">
        @using (Ajax.BeginForm("Search", "Home", new AjaxOptions
                {
                    HttpMethod = "POST",
                     UpdateTargetId="divUserList"               
                                
                }))
        {
            <span style="float: left; width: 80px;">Search:</span> @Html.TextBox("SearchText", null, new { Class = "Search" });       
            <input id="button" type="submit" value="Search" style="padding: 8px; width: 100px; margin-left: 100px; float: left;"  />             
            @Html.ActionLink("Add", "Add", "Home", null, new { @class = "openDialog", @style = "padding: 8px; width: 100px; margin-left: 100px; float: right;" }) 
        }
    </div>

    _UserList.cshtml

    @model PagedList.PagedList<TestProjectMvc.Models.UserBAL>
    @using PagedList
    @using PagedList.Mvc
    <div class="Middle1">

        @if (Model != null)
        {

            foreach (var obj in Model)
            {
            <div class="Rowbox">
                <div class="Name">@obj.UserName </div>
                <div class="Phone">@obj.PhoneNumber </div>
                <div class="Email">@obj.EmailId </div>
                <div class="Action">
                    @Html.ActionLink("Edit", "Edit", "Home", new { @id = obj.UserId }, new { @class = "openDialog" })
                    @Ajax.ActionLink("Delete", "Delete", "Home", new { @id = obj.UserId }, new AjaxOptions { OnBegin = "Confirmation", OnSuccess = "onSuccess" }, new { @class = "deleteDialog" })
                </div>
            </div>
              
            }
        }
        <div class="pagedList">
            @Html.PagedListPager(Model, page => Url.Action("Search", new { page }), PagedListRenderOptions.PageNumbersOnly)
        </div>

    </div>

    Index.cshtml

    @model TestProjectMvc.Models.UserViewModel
    @using TestProjectMvc.Models
    @{
        ViewBag.Title = "Index";
    }
    <div class="container">
        <div class="PageContainer" id="page">
            <div class="header">User Master</div>
            @Html.Partial("_Header")
            <div id="divUserList">
                @Html.Partial("_UserList", Model.UserList )
            </div>
        </div>
    </div>

     

    HomeController

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using TestProjectMvc.Models;
    using PagedList;
    using PagedList.Mvc;
    namespace TestProjectMvc.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                UserViewModel obj = new UserViewModel();
                UserBAL user = new UserBAL();
                obj.UserList = user.GetListRecord(user).ToPagedList(1, 2);
                return View(obj);
            }
         
            [HttpPost]
            public ActionResult Search(string SearchText, int page = 1)
            {
                UserViewModel obj = new UserViewModel();
                UserBAL user = new UserBAL();
                user.Keword = SearchText;
                obj.UserList = user.GetSearch(user);
                return PartialView("_UserList", obj.UserList.ToPagedList(page, 2));
            }
        }
    }

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!