ASP.NET 具有 Ajax 表单的 MVC 5 局部视图

Question

我正在尝试创建具有局部视图的搜索表单。目前我有两个局部视图可以正确呈现并且搜索功能正在运行。我遇到困难的部分是用动作控制器方法 returned 的内容更新项目列表。

正在呈现局部视图的视图。

<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" 它应该 return。非常感谢任何有关如何正确执行此操作的帮助。

Answer 1

您应该编辑查看代码：

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

ASP.NET 具有 Ajax 表单的 MVC 5 局部视图

ASP.NET MVC 5 Partial View with Ajax form

c#

ajax

asp.net-mvc

partial-views

asp.net-mvc-5