具有Ajax形式的ASP.NET MVC 5部分视图

Question

I am attempting to create a search form with a partial view. Currently I have the two partial views rendering properly and search functionality is working. The part I am having difficulty with is updating the list of items with the content returned from the action controller method.

The view that is rendering the partials.

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

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

The search partial view

@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>
}

And the controller action method that is doing the dirty work

[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);
}

I simply want to use a partial view to render the results of the search, but when I submit the search form, I get redirected to "...path.../Search" instead of "...path.../Manage" where it should return. Any help on how to do this properly would be greatly appreciated.

Answer 1

您应该编辑视图代码：

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