jquery - 使用实体框架在 ASP.NET MVC 中进行 Ajax 搜索和分页
问题描述
我能够使用实体框架在 ASP.NET MVC 中通过搜索和分页创建 CRUD 操作,现在我想使用 Ajax 进行搜索和分页。
创建它的步骤是什么?
这是我的代码:
客户控制器
using MvcCRUDSearching.Models;
using PagedList;
namespace MvcCRUDSearching.Controllers
{
public class CustomerController : Controller
{
// GET: Customer
public ActionResult Index(string searchBy, string searchString, int? page)
{
using (DbModels dbModel = new DbModels())
{
if (searchBy == "Department")
{
IPagedList<Customer> dep = dbModel.Customers.Where(x => x.Department == searchString || searchString == null).ToList().ToPagedList(page ?? 1, 2);
return View(dep);
}
else if (searchBy == "Name")
{
IPagedList<Customer> nam = dbModel.Customers.Where(y => y.Name.StartsWith(searchString) || searchString == null).ToList().ToPagedList(page ?? 1, 2);
return View(nam);
}
else
{
return View(dbModel.Customers.ToList().ToPagedList(page ?? 1, 2));
}
}
}
}
}
索引.cshtml
@using MvcCRUDSearching.Models;
@using PagedList.Mvc;
@using PagedList;
@model IPagedList<MvcCRUDSearching.Models.Customer>
@{
ViewBag.Title = "Index";
}
<div id="div1">
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<p>
@using (@Html.BeginForm("Index", "Customer", FormMethod.Get))
{
<b> Search By:</b>
@Html.RadioButton("searchBy", "Name", true)<text>Name</text>
@Html.RadioButton("searchBy", "Department")<text>Department</text>
@Html.TextBox("searchString") <input type="submit" value="Search" class="btn" />
}
</p>
<table class="table">
<tr>
<th>
Name
</th>
<th>
Department
</th>
<th>Action</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Department)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, searchBy = Request.QueryString["searchBy"], search = Request.QueryString["searchBy"] }))
</div>
我只知道我需要一个局部视图,但是我应该把它放在什么地方?
~/Views/Shared
或者
~/Views/Customer
抱歉这么长的问题,但我有点绿。
解决方案
不完全确定这是否会对您有所帮助,但似乎与您正在采取的方法有所不同。
我最近构建了类似的东西并使用了DataTables
一旦用户提供了数据搜索,您就可以进行简单的 ajax 调用,然后重新填充表:
JS:
var data = JSON.stringify({
'Searchby': '',
'SearchString': ''
})
$.ajax({
type: 'POST',
url: '/Cutomers/GetCustomers',
data: data,
contentType: 'application/json',
dataType: 'json',
success: function (result) {
var table = $('#TableID').DataTable();
table.destroy();
var table = $('#TableID').DataTable({
responsive: true,
"scrollY":true,
"scrollX":true,
"data": result,
"columns": [
{ "data": "Name" },
{ "data": "Department" },
]
});
$('#divResults').show();
}
HTML:
<div class="centerContainer">
<div class="main row">
<div id="divResults">
<table id="TableID" class="table">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="table"></tbody>
</table>
</div>
</div>
这可能不是最佳实践,但它工作得非常好并且可以为您处理分页。
推荐阅读
- google-sheets - 如何在 Google 表格中分别对负值和正值求和
- spring-boot - 需要使用 Spring Boot 通过 IBM MQ 发送和接收 SOAP XML 消息的指导
- javascript - 有没有办法让按钮显示多个文本?
- python - 计算 cat 字符串中的单词
- rtools - R-4.0.1 Rtools 不可用
- r - 导入不带 '' 的数据名称
- assembly - 需要帮助,在 rdmsr 指令中出现分段错误
- java - 如何在 arrayList.remove() 中获取新对象
- installation - 使用自制软件安装后未找到 GDL
- reactjs - Redux Store 更新速度不够快