带有 Ajax 表单的 ASP.NET MVC 5 部分视图

Question

我正在尝试创建带有部分视图的搜索表单。目前我有两个部分视图正确渲染并且搜索功能正在工作。我遇到困难的部分是使用从动作控制器方法返回的内容更新项目列表。

呈现局部视图的视图。

<div>
<hr />
    @if(Model.Count == 0)
    {
        <h2>No existing announcements.</h2>
    }
    else
    {

        @Html.Action("Search", "Announcements")
        { Html.RenderPartial("_SearchResults", Model); }
    }
</div>

搜索局部视图

@using (Ajax.BeginForm("Search", "Announcements", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "search-results" }, new { id = "search-form" }))
{
<div class="container">

    <!-- Begin Search Box -->
    <div class="row">
        <div id="col-lg-12">
            <div class="input-group col-lg-8 col-lg-offset-1">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Filter By Categories&nbsp;<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="categoryMenu">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            <li>
                                <a href="#" data-value="@Model[i].IsSelected" class="small" tabindex="-1">
                                    @Html.CheckBoxFor(model => Model[i].IsSelected) @Model[i].Name<text>&nbsp;</text>
                                </a>
                                @Html.HiddenFor(model => Model[i].ID)
                                @Html.HiddenFor(model => Model[i].Name)
                            </li>
                        }
                        <li>
                            <hr />
                            <button type="button" class="btn btn-sm btn-danger pull-right" style="margin-right:5px;" id="btn-clear">Clear</button>
                        </li>
                    </ul>
                </div>
                @Html.TextBox("query", null, htmlAttributes: new { @class = "search-box form-control", type = "text", placeholder = "Search Announcements", id="query" })
                <div class="input-group-btn">
                    <button class="btn btn-primary" type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Search Box -->
    <div class="row">
        <div class="pull-left col-lg-offset-1 form-inline">
            <a href="#" id="date-search" style="text-decoration: none;">
                <span class="glyphicon glyphicon-plus-sign"></span> Narrow By Date
            </a>
        </div>
        <div class="col-lg-8 col-lg-offset-2" id="date-boxes">
            <div class="col-lg-4">
                Start: @Html.TextBox("start", null, htmlAttributes: new { type = "date", id = "startDate" })
            </div>
            <div class="col-lg-4">
                End: @Html.TextBox("end", null, htmlAttributes: new { type = "date", id = "endDate" })
            </div>
        </div>
    </div>
</div>
}

还有做脏活的控制器动作方法

[HttpGet]
public PartialViewResult Search()
{
    List<CategoryViewModel> model = new List<CategoryViewModel>();
    ... Some codes ...
    return PartialView("_SearchForm", model);
}

[HttpPost]
public PartialViewResult Search(List<CategoryViewModel> cvm, DateTime? start, DateTime? end, string query = "")
{
    List<EditViewModel> model = new List<EditViewModel>();

    ... Bunch of extranneous code ...

    return PartialView("_SearchResults", model);
}

我只是想使用局部视图来呈现搜索结果，但是当我提交搜索表单时，我被重定向到“...path.../Search”而不是“...path. ../Manage”它应该返回的位置。任何有关如何正确执行此操作的帮助将不胜感激。

Answer 1

您应该编辑视图代码：

@using (Ajax.BeginForm("Manage", "Announcements",...)