#ajax #asp.net-mvc #asp.net-mvc-4 #pagedlist
#ajax #asp.net-mvc #asp.net-mvc-4 #список страниц
Вопрос:
Я создаю расширенный поиск с использованием MVC. Что я подразумеваю под расширенным поиском, так это то, что пользователь может выполнять комбинированный поиск, например, пользователь может выполнять поиск по category = ‘Child’, а имя содержит ‘A’ или возраст <= 10. затем результат отображается с помощью MVC PagedList.
Я следовал ненавязчивому руководству по ajax, основанному на примере из источника PagedList. Я определил 2 файла: Index.cshtml для View и _List.cshtml для PartialView. Индекс содержит критерии поиска и кнопку для добавления дополнительного предложения.
и _List содержит таблицу для отображения результата с использованием AJAX
Проблема в том, что после того, как я отфильтровал по коду, например, содержащему ‘A’, и нажал поиск, затем перешел на страницу 2, значение фильтра отсутствует, и он отобразит код, который не содержит ‘A’. Как решить эту проблему?
ViewModel:
public class WorkflowStateListViewModel
{
public IEnumerable<string> FilterField { get; set; }
public IEnumerable<string> FilterOperator { get; set; }
public IEnumerable<string> FilterString { get; set; }
public IEnumerable<string> FilterLogical { get; set; }
public PagedList<WorkflowStateListDetailViewModel> WorkflowStateListDetailVM { get; set; }
public int? Page { get; set; }
}
Контроллер:
public ActionResult Filter(WorkflowStateListViewModel workflowStateListVM, int? page)
{
var workflowStatesQuery = from ws in db.WorkflowStates
where ws.RowStatus == true
select ws;
if (workflowStateListVM.FilterField != null)
{
for (int i = 0; i < workflowStateListVM.FilterField.Count(); i )
{
workflowStatesQuery = DoFilter(workflowStatesQuery, workflowStateListVM.FilterField.ElementAt(i), workflowStateListVM.FilterOperator.ElementAt(i), workflowStateListVM.FilterString.ElementAt(i));
}
}
workflowStatesQuery = workflowStatesQuery.OrderBy(ws => ws.Code);
var workflowStateListDetailVM = from ws in workflowStatesQuery
select new WorkflowStateListDetailViewModel()
{
WorkflowStateID = ws.WorkflowStateID,
Code = ws.Code,
Name = ws.Name,
Level = ws.Level,
PIC = ws.PIC
};
int pageNumber = (page ?? 1);
return PartialView("_List", workflowStateListDetailVM.ToPagedList(pageNumber, 5));
}
Index.cshtml
@model ViewModels.WorkflowStateListViewModel
@using (Ajax.BeginForm("Filter", "WorkflowState",
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
UpdateTargetId = "workflowStateList"
},
new { @class = "form-inline" }))
{
<div id="clauses">
</div>
<p>
<div class="form-group">
@Html.DropDownList("FilterField", new SelectList(Model.FilterField), new { @class = "form-control" })
</div>
<div class="form-group">
@Html.DropDownList("FilterOperator", new SelectList(Model.FilterOperator), new { @class = "form-control" })
</div>
<div class="form-group">
@Html.TextBoxFor(model => model.FilterString, new { @class = "form-control" })
</div>
<input type="submit" value="Search" class="btn btn-default" />
</p>
<p>
<div class="form-group">
<a href="#" id="addClause"><span class="glyphicon glyphicon-plus-sign"></span> Add new clause</a>
</div>
</p>
<div id="workflowStateList">
@{ Html.RenderPartial("_List", Model); }
</div>
}
_List.cshtml
@model JOeBilling.ViewModels.WorkflowStateListViewModel
@using PagedList.Mvc;
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<tr>
<th></th>
<th>
Code
</th>
<th>
Name
</th>
<th>
Level
</th>
<th>
PIC
</th>
</tr>
@foreach (var item in Model.WorkflowStateListDetailVM)
{
<tr>
<td>
<a href="@Url.Action("Edit", "WorkflowState", new { id = item.WorkflowStateID })"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="@Url.Action("Details", "WorkflowState", new { id = item.WorkflowStateID })"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="@Url.Action("Delete", "WorkflowState", new { id = item.WorkflowStateID })"><span class="glyphicon glyphicon-remove"></span></a>
</td>
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Level)
</td>
<td>
@Html.DisplayFor(modelItem => item.PIC)
</td>
</tr>
}
</table>
</div>
<br />
Page @(Model.WorkflowStateListDetailVM.PageCount < Model.WorkflowStateListDetailVM.PageNumber ? 0 : Model.WorkflowStateListDetailVM.PageNumber) of @Model.WorkflowStateListDetailVM.PageCount
@Html.PagedListPager(Model.WorkflowStateListDetailVM,
page => Url.Action("Filter", new { page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "workflowStateList" }))
Обновить
ОБНОВЛЕНИЕ 2
ОБНОВЛЕНИЕ 3 Вкладка ответов
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<tr>
<th></th>
<th>
<a href="/WorkflowState">Code</a>
</th>
<th>
<a href="/WorkflowState">Name</a>
</th>
<th>
Level
</th>
<th>
PIC
</th>
<th>
Created By
</th>
<th>
Created Date
</th>
<th>
Modified By
</th>
<th>
Modified Date
</th>
</tr>
<tr>
<td>
<a href="/WorkflowState/Edit/6"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="/WorkflowState/Details/6"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="/WorkflowState/Delete/6"><span class="glyphicon glyphicon-remove"></span></a>
</td>
<td>
A06
</td>
<td>
Preparing Task Code
</td>
<td>
6
</td>
<td>
</td>
<td>
JKTWLA
</td>
<td>
28/04/2014 4:24:52 PM
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="/WorkflowState/Edit/7"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="/WorkflowState/Details/7"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="/WorkflowState/Delete/7"><span class="glyphicon glyphicon-remove"></span></a>
</td>
<td>
A07
</td>
<td>
Closed
</td>
<td>
7
</td>
<td>
</td>
<td>
JKTWLA
</td>
<td>
28/04/2014 4:25:06 PM
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="/WorkflowState/Edit/8"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="/WorkflowState/Details/8"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="/WorkflowState/Delete/8"><span class="glyphicon glyphicon-remove"></span></a>
</td>
<td>
C01
</td>
<td>
New Invoice
</td>
<td>
1
</td>
<td>
</td>
<td>
JKTWLA
</td>
<td>
13/06/2014 10:49:00 AM
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<br />
Page 2 of 2
<div class="pagination-container"><ul class="pagination"><li class="PagedList-skipToPrevious"><a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#workflowStateList" href="/WorkflowState/Filter?page=1" rel="prev">«</a></li><li><a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#workflowStateList" href="/WorkflowState/Filter?page=1">1</a></li><li class="active"><a>2</a></li></ul></div>
Комментарии:
1. Пожалуйста, отправьте URL-адрес «Ненавязчивого руководства по AJAX»
2. @MalcolmFrexner Я добавил ссылку, вы можете найти пример из источника
3. Можете ли вы проверить, действительно ли запрос, который получает страницу 2, является вызовом Ajax через F12 -> Сеть
4. @MalcolmFrexner Я думаю, что это вызов ajax, я прикрепил картинку, чтобы показать вам, что это вызов ajax
5. Чтобы элементы управления фильтра сохраняли свое состояние, вам не нужно передавать их значения в ajax. Область фильтра не должна перезагружаться, когда ответ-Html записывается в dom. Для этого html -ответ не должен содержать html для файлов. Не могли бы вы показать ответ, пожалуйста?