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

时间:2014-02-04 09:16:28

标签: ajax view controller asp.net-mvc-5

我对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和model ??

请提出建议?

1 个答案:

答案 0 :(得分:0)

enter image description here

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

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

  1. SearchPage视图将具有所有控件过滤器,如果搜索将保持状态,searchResult视图在单击搜索按钮时更新。要维护过滤器,搜索关键字和页码以及其他状态,我们需要覆盖默认提交并通过ajax调用处理所有状态。

  2. SearchResult视图是部分视图,将在搜索按钮或Page click上更新。

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

  4. 为了让一切顺利,我们将在一个名为的单个动作中处理所有这些场景 使用SearchModel搜索。 searchModel将返回partialView(&#34; SearchResult&#34;)。

  5. 关于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);
                    }
                }
            });
        }
    

    你可以勾选搜索按钮,页面按钮等。