Ingenioushax Ingenioushax - 3 years ago 203
Ajax Question

ASP.NET MVC 5 Partial View with Ajax form

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 Source

You should edit view code:

@using (Ajax.BeginForm("Manage", "Announcements",...)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download