Продолжайте предыдущую статью, сегодня я расскажу, как использовать AJAX для разбивки на страницы в ASP.NET MVC 5. В предыдущей статье у нас был простой пример построения разбиения на страницы, вы можете увидеть снова
В статье я использую код из предыдущего поста
вы открываете файл HomeController.cs в папке Controller и передаете ему следующий код ниже
public ActionResult Lists() { return View(); }[HttpGet] public JsonResult getAllPost(string txtSearch, int? page) { var data = (from s in _db.Posts select s); if (!String.IsNullOrEmpty(txtSearch)) { ViewBag.txtSearch = txtSearch; data = data.Where(s => s.Title.Contains(txtSearch)); }if (page > 0) { page = page; } else { page = 1; } int start = (int)(page - 1) * pageSize;ViewBag.pageCurrent = page; int totalPage = data.Count(); float totalNumsize = (totalPage / (float)pageSize); int numSize = (int)Math.Ceiling(totalNumsize); ViewBag.numSize = numSize; var dataPost = data.OrderByDescending(x => x.Id).Skip(start).Take(pageSize); List<Post> listPost = new List<Post>(); listPost = dataPost.ToList(); // return Json(listPost); return Json(new { data = listPost,pageCurrent = page,numSize=numSize }, JsonRequestBehavior.AllowGet); }
- getAllPost(): я получаю все данные в таблице сообщений, после чего возвращаю тип Json
- List(): используйте шаблон отображения, чтобы можно было создать Lists.cshtml в каталоге Views/Post/Lists.cshtml.
Хорошо, вы открываете файл Lists.cshtml и редактируете интерфейс.
@model MVC5_HelloWorld.Models.Post <div class="container"> <div class="row justify-content-center"> <div class="col-md-10"> <div class="card"><div class="card-header"> List Posts <a href="@Url.Action("Store", "Post")" class="btn btn-success">Add</a> </div> <div class="card-body"> <div class="card-header"> Search <input type="text" name="txtSearch" placeholder="Search!" class="txtSearch"/> <button type="button" class="btn btn-warning" id="search">Search</button></div> <table class="table table-bordered"> <thead> <tr> <th>STT</th> <th>Title</th> <th>Body</th> <th>Created_at</th> <th>Updated_at</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody class="load-list"></tbody></table> <div class="card-footer"> <nav aria-label="Page navigation example"> <ul class="pagination" id="load-pagination"></ul> </nav> </div> </div> </div> </div> </div> </div>
Примечание: class="load-list" и id="load-pagination", я использую отображение данных и отображение списка страниц.
$(document).ready(function () {//function load pagination var load = function (txtSearch, page) { $.ajax({ url: '@Url.Action("getAllPost","Post")', type: "GET", data: { txtSearch:txtSearch , page: page }, dataType: 'json', contentType: 'application/json;charset=utf-8', success: function (result) { console.log(result); var str = ""; $.each(result.data, function (index, value) {//convert date to string var dateCreated = value.Created_at; var dateCreated_string = new Date(parseInt(dateCreated.replace("/Date(", "").replace(")/", ""), 10)); var created_at = dateCreated_string.getFullYear() + "/" + dateCreated_string.getMonth() + "/" + dateCreated_string.getDate();var dateUpdated = value.Updated_at; var dateUpdated_string = new Date(parseInt(dateUpdated.replace("/Date(", "").replace(")/", ""), 10)); var Updated_at = dateUpdated_string.getFullYear() + "/" + dateUpdated_string.getMonth() + "/" + dateUpdated_string.getDate(); ////create list post var dateUpdated = new Date(value.Updated_at); str += "<tr>"; str += "<td>"+(value.Id)+"</td>"; str += "<td>"+value.Title + "</td>"; str += "<td>" + value.Body + "</td>"; str += "<td>" + created_at+ "</td>"; str += "<td>"+ Updated_at + "</td>"; str += "<td><a href='/Post/Edit/"+value.id+"' class='badge badge-warning'>Modify</a></td>"; str += "<td><a href='/Post/Delete/"+value.id+"' class='badge badge-danger'>Delete</a></td>"; str += "</tr>";//create pagination var pagination_string = ""; var pageCurrent = result.pageCurrent; var numSize = result.numSize;//create button previous if (pageCurrent > 1) { var pagePrevious = pageCurrent - 1; pagination_string += '<li class="page-item"><a href="" class="page-link" data-page=' + pagePrevious + '>Previous</a></li>'; }for (i = 1; i <= numSize; i++){ if (i == pageCurrent) { pagination_string += '<li class="page-item active"><a href="" class="page-link" data-page=' + i + '>'+pageCurrent+'</a></li>'; } else { pagination_string += '<li class="page-item"><a href="" class="page-link" data-page=' + i + '>'+i+'</a></li>'; } }//create button next if (pageCurrent > 0 && pageCurrent < numSize) { var pageNext = pageCurrent + 1; pagination_string += '<li class="page-item"><a href="" class="page-link" data-page=' + pageNext + '>Next</a></li>'; }//load pagination $("#load-pagination").html(pagination_string); });//load str to class="load-list" $(".load-list").html(str); } }); }//load init load(null, 1); });
В приведенном выше коде у меня есть обработка разбиения на страницы, вы можете вставить два параметра (txtSearch, page), страница по умолчанию = 1, txtSearch = null
URL: '@ Url.Action ("getAllPost", "Post »)': URL:/Post/GetAllPost в классе HomeController.cs
Хорошо, вы видите в приведенном выше коде, мы используем вставку нумерации страниц, после чего с помощью ajax получаем значение
Мы создадим функцию пагинации кликов
//click event pagination $("body").on("click",".pagination li a",function (event) { event.preventDefault(); var page = $(this).attr('data-page');//load event pagination var txtSearch = $(".txtSearch").val(); if (txtSearch != "") { load(txtSearch, page) } else { load(null, page); }});
Продолжить, функция нажмите поиск
//click event search $("#search").click(function () { var txtSearch = $(".txtSearch").val(); if (txtSearch != "") { load(txtSearch, 1) } else { load(null, 1); }});
Демо:
Сообщение: ASP.NET MVC 5 Ajax Pagination для результатов поиска
