MVC 正确处理 ajax 搜索表单和分页

Question

我有一个关于 ajax 和简单过滤的问题。在写这篇文章之前，我确实或多或少地阅读了一些关于这个主题的问题，但它不一样，我没有在那里收到我的答案！

我有一个简单的搜索页面，只有很少的过滤，这个过滤不应该立即调整到结果或其他什么。因此，当用户更改过滤器并单击搜索时，他会得到结果，当他修改过滤器时，在他再次单击搜索之前不会发生任何事情。

所以我的问题更多是关于处理分页，我知道分页是如何在服务器端使用 .Skip() .Take() 进行的，但是当我点击页码时，我仍然需要进行 ajax 调用并仅使用其他页码提交相同的模型，但分页在表单之外并且没有提交内容......那么我如何重新提交带有所有过滤器的模型？

这是我的看法：

@using (Ajax.BeginForm("Index", "Search", new AjaxOptions { UpdateTargetId = "searchResults" }, new { @role = "form", @class = "form-horizontal" }))
            {
                @Html.AntiForgeryToken();
                 @Html.EditorFor(m => m.IsOnline)

                 @Html.EditorFor(m => m.UserLocation)
                        </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">@Base.Search</button>
                    </div>
                </div>
            }

分页是：

@if(Model.TotalPages>1)
{
    <div class="row">
        <div class="col-sm-12 col-centered">
            <ul class="pagination text-center">
                <li class="disabled"><a href="#">&laquo;</a></li>
                @{
                    for(int i = 1; i<=Model.TotalPages; i++)
                    {
                        <li><a href="#">@i 
                            @if(Model.CurrentPage==i)
                            {
                                <span class='sr-only'>(current)</span>
                            }
                        </a></li>
                    }    

                }
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
}

这是我的控制器：

    [ValidateAntiForgeryToken]
    [HttpPost]
    public ActionResult Index(SearchModel searchModel)
    {
        if (ModelState.IsValid)
        {
            searchModel = Operations.GetSearchedListUsers(searchModel);
        }

        return View(searchModel);
    }

所以我是怎么看的，即使我点击页码，我也应该做一个索引发布操作并重新提交模型，但是例如使用其他页码我应该怎么做？

还是我的想法完全错误，首先我不应该使用 ajax.form 和模型？？

请指教？

Answer 1

让我们从一般搜索页面开始。

在搜索页面中，我们将有一个 SearchPage 视图，该视图具有部分视图 SearchResult 视图，该视图也可能具有另一个分页控件

1. SearchPage 视图将具有所有控制过滤器，如果搜索将保持状态，当单击搜索按钮时，searchResult 视图会更新。为了维护过滤器、搜索关键字和页码等状态，我们需要覆盖默认提交并通过 ajax 调用处理所有内容。

2. SearchResult 视图是局部视图，将在搜索按钮或页面单击时更新。

3. 我们可能需要创建具有所有必需属性的 searchModel 模型：Filters、keyword 和 Page。

4. 为了让一切变得轻松，我们将在一个名为 使用 SearchModel 进行搜索。 searchModel 将返回一个 partialView("SearchResult")。

关于 ajax 调用，假设我们有

  var keyword=$("#txtKeyword").val();
  var filter1=$("#txtFilter11").val();
  function SubmitSearch() {
        $.ajax({
            url: '/Home/Search',
            type: 'POST',
            data: { keyword: keyword, Filter1: filter1}
            timeout: 50000,
            success: function (data) {
                //Process data
                                },
            error: function (x, t, m) {
                if (t === "timeout") {
                    alert("got timeout");
                } else {
                    alert(t);
                }
            }
        });
    }

你可以挂在搜索按钮，页面按钮等。