我正在尝试按照本教程here，但尝试在模式中执行它。我基本上调用我的模态中的索引视图（不确定这是否是最佳实践）但是，每次我点击标题进行排序或其他任何模式消失，页面被重定向到索引视图。这可能与我正在进行的方式有关，如果没有，也许有人可以建议一个替代解决方案，我对所有这些都是新手！
这是包含调用模态的按钮的部分。
@model IEnumerable<ReconciliationApp.Models.IReconciliationForm>
<div class="img-responsive center-block" id="formButtons">
<div>
<div class="btn-group row col-sm-12">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".browse-modal-lg">Browse</button>
</div>
<div class="btn-group row col-sm-12">
<button type="button" class="btn btn-primary">Modify</button>
<button type="button" class="btn btn-primary">Delete</button>
<button type="button" class="btn btn-primary">New</button>
</div>
</div>
</div>
<div class="modal fade browse-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Browse Members</h4>
</div>
<div class="container-fluid" style="padding-left: 50px;">
@Html.EditorForModel("Index")
</div>
</div>
</div>
</div>
这是我的索引视图
@model IEnumerable<ReconciliationApp.Models.CSReconForm>
@{
ViewBag.Title = "Modal";
}
<h2>CSRecon Browse</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.ActionLink("Member ID", "Index", new { sortOrder = ViewBag.DateSortParm })
</th>
<th>
@Html.ActionLink("Brand ID", "Index", new { sortOrder = ViewBag.MemberSortParm })
</th>
<th>
@Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.BrandSortParm })
</th>
<th>
@Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.FirstNameSortParm })
</th>
<th>
@Html.ActionLink("Processed By", "Index", new { sortOrder = ViewBag.LastNameSortParm })
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.MemberID)
</td>
<td>
@Html.DisplayFor(modelItem => item.BrandID)
</td>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProcessedBy)
</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>
我正在使用的控制器部分
public class CSReconFormsController : ApplicationBaseController
{
private ReconciliationContext db = new ReconciliationContext();
private ApplicationDbContext adb = new ApplicationDbContext();
// GET: CSReconForms
public ActionResult Index(string sortOrder)
{
var usersContext = new ApplicationDbContext();
var users = usersContext.Users.Select(u => u.UserName).ToList();
ViewBag.Users = users;
ViewBag.Title = "Modal";
ViewBag.DateSortParm = String.IsNullOrEmpty(sortOrder) ? "dateCreated_desc" : "";
ViewBag.MemberSortParm = sortOrder == "MemberId" ? "memberId_desc" : "MemberId";
ViewBag.BrandSortParm = sortOrder == "BrandId" ? "brandId_desc" : "BrandId";
ViewBag.FirstNameSortParm = sortOrder == "FirstName" ? "firstName_desc" : "FirstName";
ViewBag.LastNameSortParm = sortOrder == "LastName" ? "lastName_desc" : "LastName";
var reconForms = from s in db.CSReconForms select s;
switch (sortOrder)
{
case "MemberId":
reconForms = reconForms.OrderBy(s => s.MemberID);
break;
case "memberId_desc":
reconForms = reconForms.OrderByDescending(s => s.MemberID);
break;
case "BrandId":
reconForms = reconForms.OrderBy(s => s.BrandID);
break;
case "brandId_desc":
reconForms = reconForms.OrderByDescending(s => s.BrandID);
break;
case "FirstName":
reconForms = reconForms.OrderBy(s => s.FirstName);
break;
case "firstName_desc":
reconForms = reconForms.OrderByDescending(s => s.FirstName);
break;
case "LastName":
reconForms = reconForms.OrderBy(s => s.LastName);
break;
case "lastName_desc":
reconForms = reconForms.OrderByDescending(s => s.LastName);
break;
case "dateCreated_desc":
reconForms = reconForms.OrderByDescending(s => s.WhenCreated);
break;
default:
reconForms = reconForms.OrderBy(s => s.WhenCreated);
break;
}
return View(reconForms.ToList());
}
...
}
如果您认为其他任何其他内容可能有用，请随时提出！提前谢谢！
答案 0 :(得分：1)
这种情况正在发生，因为您的标头实际上是重定向到Index()方法的操作链接，后者又会返回Index视图。
@ Html.ActionLink（“会员ID”，“索引”，新{sortOrder = ViewBag.DateSortParm}）
除了在局部视图中的模态内部使用Index视图外，您应该以相反的方式执行此操作。然后，当您创建标题链接时，如果您只是想要客户端排序，请不要将它们链接到服务器端操作方法。而是使用JavaScript实现客户端排序。你不希望服务器旅行只是为了对客户端已经存在的一些元素进行排序！
答案 1 :(得分：0)
是的，在@AmateurProgrammer之后（谢谢！）评论我去了，并决定尝试一些我之前从未做过的javascript。因此经过一些研究后我最终使用了数据表JQuery插件来处理。我找到了这个教程here，并对其进行了相应的修改。我正在为可能处于类似情况的任何人发布我的代码。
这是我获取数据的控制器方法
public JsonResult DataTableGet([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel)
{
IQueryable<CSReconForm> query = db.CSReconForms;
var totalCount = query.Count();
// Apply filters
if (requestModel.Search.Value != String.Empty)
{
var value = requestModel.Search.Value.Trim();
query = query.Where(p => p.MemberID.Contains(value) || p.BrandID.Contains(value));
}
var filteredCount = query.Count();
// Sort
var sortedColumns = requestModel.Columns.GetSortedColumns();
var orderByString = String.Empty;
foreach (var column in sortedColumns)
{
orderByString += orderByString != String.Empty ? "," : "";
orderByString += (column.Data == "MemberID" ? "MemberID" : column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc");
}
query = query.OrderBy(orderByString == String.Empty ? "MemberID asc" : orderByString);
// Paging
query = query.Skip(requestModel.Start).Take(requestModel.Length);
var data = query.Select(p => new
{
Id = p.Id,
MemberID = p.MemberID,
BrandID = p.BrandID,
FirstName = p.FirstName,
LastName = p.LastName,
WhenCreated = p.WhenCreated,
ProcessedBy = p.ProcessedBy
}).ToList();
return Json(new DataTablesResponse(requestModel.Draw, data, filteredCount, totalCount), JsonRequestBehavior.AllowGet);
}
这是我在HTML中构建表的地方（是的，我添加了这个脚本，它自己构建了表 - 不需要为表本身添加标记）
<script type="text/javascript">
$(function () {
var controller = "@ViewData["controller"]";
var productListVM = {
dt: null,
init: function (oObj) {
dt = $('#data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": "/" + controller + "/DataTableGet",
"columns": [
{ "title": "MemberID", "data": "MemberID", "searchable": false },
{ "title": "BrandID", "data": "BrandID" },
{ "title": "FirstName", "data": "FirstName" },
{ "title": "LastName", "data": "LastName" },
{ "title": "WhenCreated", "data": "WhenCreated" },
{ "title": "ProcessedBy", "data": "ProcessedBy" },
{
data: null,
className: "center",
//re: `<a href="/${controller}/Edit/${}" class="editor_edit">Edit</a> / <a href="/${controller}/Delete/" class="editor_remove">Delete</a>`,
"render": function (data, type, full, meta) {
return '<a href="/' + controller + '/Edit/' + data.Id + '" class="editor_edit">Edit</a> / <a href="/' + controller + '/Delete/' + data.Id + '">Delete</a>';
}
},
],
"lengthMenu": [[5, 10, 25, 50], [5, 10, 25, 50]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor
.title('Edit record')
.buttons({ "label": "Update", "fn": function () { editor.submit() } })
.edit($(this).closest('tr'));
});
// Delete a record
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor
.title('Edit record')
.message("Are you sure you wish to delete this row?")
.buttons({ "label": "Delete", "fn": function () { editor.submit() } })
.remove($(this).closest('tr'));
});
$('#refresh-button').on("click", productListVM.refresh);
productListVM.init();
})
</script>