Home > DeveloperSection > Forums > how to search list data in mvc using ajax
Ankit Singh

Total Post:341

Points:2389
Posted on    November-20-2015 9:56 PM

 .NET Mvc  Mvc3  Mvc2  Mvc4  Mvc5  Ajaxform 
Ratings:


 1 Reply(s)
 466  View(s)
Rate this:
I want to  search list data in mvc using ajax how to do this please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    November-20-2015 10:14 PM

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick