我能够使用Entity Framework在ASP.NET MVC中通过搜索和分页来创建CRUD操作,现在我想使用Ajax进行搜索和分页。
创建它的步骤是什么?
这是我的代码:
CustomerController
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));
}
}
}
}
}
Index.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>
这可能不是最佳实践,但它确实可以很好地工作并可以为您处理分页。