Asp.net MVC5 partial refresh Ajax, mvc5ajax

Asp.net MVC5 partial refresh Ajax, mvc5ajax

Install and modify the js package first

Code homepage file code Index. cshtml

@ Model IEnumerable <Nineksy. Models. LabTable> @ {ViewBag. Title = "Index"; Layout = "~ /Views/Shared/_ MainView. cshtml ";}< div class =" mrcTable "> @ using (Ajax. beginForm ("GetrListLabResult", "TeaBespeakLab", new AjaxOptions {InsertionMode = InsertionMode. replaceWith, HttpMethod = "Get", OnFailure = "searchFailed", LoadingElementId = "load_ajax", UpdateTargetId = "mrcTableContent "})) {<div class = "mrcTableNav"> <input type = "text" name = "name" id = "" placeholder = "lab name" class = "mrcTableNav-input"> <button name = "" id = "btSelect" class = "btn-success" type = "submit"> <I class = "Hui-iconfont" >&# xe665; </I> search for information </button> </div>} <div id = "load_ajax" style = "display: none "> loading ......... </div> <div class = "mrcTableContent" id = "mrcTableContent"> </div> background code on the home page

Public ActionResult Index (int page = 1) {LabListVm model = new LabListVm {LabListTables = _ db. labTables. orderBy (d => d. labId ). skip (page-1) * _ pageSize ). take (_ pageSize), PagingInfo = new PagingInfo {CurrentPage = page, ItemsPerPage = _ pageSize, TotalItems = _ db. deviceTables. count () }}; return View (model );}
Classes used in the background

public class LabListVm{    public static int PageSize = int.Parse(ConfigurationManager.AppSettings["pageSize"]);    public IEnumerable<LabTable> LabListTables { get; set; }    public PagingInfo PagingInfo { get; set; }}

Public class LabTable {public int LabTableId {get; set;} public string LabId {set; get;} public string LabName {set; get;} public string LabAddress {set; get ;} public string LabStatus {set; get;} public int? LabUseNum {set; get;} public string LabSynopsis {set; get ;}}
Partial Page code file name

_LabListSelect.cshtml

@ Using Web. BLL; @ model Web. areas. labArea. models. labListVm <div class = "mrcTableContent" id = "mrcTableContent"> <div class = "mrcTableContentbody"> <table class = "table-border table-bordered table-bg table-hover table-width "> <thead> <tr class =" text-c "> <th width =" 80 "> Lab No. </th> <th> lab name </th> <th width = "80"> lab address </th> <th width = "80"> lab status </th> <th width = "75"> lab usage </th> <th width = "120"> laboratory overview </th> </tr> </thead> <tbody> @ foreach (var item in Model. labListTables) {<tr class = "text-c"> <td> @ Html. displayFor (modelItem => item. labId) </td> <td> @ Html. displayFor (modelItem => item. labName) </td> <td> @ Html. displayFor (modelItem => item. labAddress) </td> <td> @ Html. displayFor (modelItem => item. labStatus) </td> <td> @ Html. displayFor (modelItem => item. labUseNum) </td> <td> @ Html. displayFor (modelItem => item. labSynopsis) </td> </tr >}</tbody> </table> </div> <div class = "pagehtml"> <div class = "pages"> <div class = "pagingtext"> every page @ Model. pagingInfo. itemsPerPage records, total @ Model. pagingInfo. totalPages, the current @ Model. pagingInfo. currentPage </div> @ Html. pageLinksHtmlString (Model. pagingInfo, d => Url. action ("Index", new {page = d}) </div>
Background code is required for partial pages

public ActionResult GetrListLabResult(string name,int page=1){            LabListVm labs=new LabListVm        {            LabListTables = db.LabTables.Where(lb => lb.LabName == name).OrderBy(d => d.LabId).Skip((page - 1) * LabListVm.PageSize).Take(LabListVm.PageSize),            PagingInfo = new PagingInfo            {                CurrentPage = page,                ItemsPerPage = LabListVm.PageSize,                TotalItems = db.LabTables.Count()            }         };        return PartialView("_LabListSelect",labs);}