how to search list data in mvc using ajax

I want to search list data in mvc using ajax how to do this please help me.

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));
        }
    }
}

forum

how to search list data in mvc using ajax

Can you answer this question?

1 Answers