forum

home / developersection / forums / how to search list data in mvc using ajax

Ask Question

how to search list data in mvc using ajax

Anonymous User 3599 20-Nov-2015
I want to  search list data in mvc using ajax how to do this please help me.
.net mvc  mvc3  mvc2  mvc4  mvc5  ajaxform 
Updated on 20-Nov-2015
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

20-Nov-2015 
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));
        }
    }
}
how to search list data in mvc using ajax

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy