I've went through whole bunch of SO questions regarding my problem and I wasn't able to find a solution, so I've decided to post this question. The problem is that FormColection fc
is empty when I do that Ajax POST request by clicking the search button from _Sidebar.cshtml
. What am I missing here?
Code part:
_MyLayout.cshtml:
@using (Ajax.BeginForm("Results", "Search", null, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "d_content", LoadingElementId = "spinner", OnBegin = "ToggleContent", OnComplete = "ToggleContent" },null))
{
<div class="wrapper row-offcanvas row-offcanvas-left">
<div id="a_sidebar">
@{ Html.RenderAction("_Sidebar"); }
</div>
<aside class="right-side">
<section class="content">
<img id="spinner" src="~/Content/img/lightbox-ico-loading.gif" style="display: none;">
<div id="d_content">
@RenderBody()
</div>
</section>
</aside>
</div>
}
_Sidebar.cshtml:
<ul class="treeview-menu">
<li>
<div class="form-group">
<label>F1</label>
@Html.ListBox("ddF1", (MultiSelectList)ViewData["ddF1"])
</div>
<div class="form-group">
<label>F2</label>
@Html.ListBox("ddF2", (MultiSelectList)ViewData["ddF2"])
</div>
<div class="form-group">
<label>Status</label>
@Html.ListBox("ddStatusFilter", (MultiSelectList)ViewData["ddStatusFilter"])
</div>
<div class="form-group">
<label>Name</label>
@Html.TextBox("tbName")
</div>
</li>
</ul>
<li class="treeview">
<div style="text-align: center;">
<button type="reset" class="btn btn-warning">Clear Filters</button>
@Ajax.ActionLink("Search", "Results", "Search", new { }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "d_content", LoadingElementId = "spinner", OnBegin = "ToggleContent", OnComplete = "ToggleContent" }, new { @class = "btn btn-success", @style = "color: white;" })
</div>
</li>
SearchController.cs:
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
public PartialViewResult Results(FormCollection fc)
{
//TODO: Implement filtering through FormCollection in passed parameter
// but that freakin' fc var is empty
var model = db.vw_MainTable.ToList();
return PartialView("_SearchResultGrid", model);
}
Much appreciated.
From the code, It looks like you don't need a form tag covering your entire html. You can place it in the _Sidebar.cshtml
like this.
Also replace the action link with a submit button (check below code).
@using (Ajax.BeginForm("Results", "Search", null, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "d_content", LoadingElementId = "spinner", OnBegin = "ToggleContent", OnComplete = "ToggleContent" },null))
{
<ul class="treeview-menu">
<li>
<div class="form-group">
<label>F1</label>
@Html.ListBox("ddF1", (MultiSelectList)ViewData["ddF1"])
</div>
<div class="form-group">
<label>F2</label>
@Html.ListBox("ddF2", (MultiSelectList)ViewData["ddF2"])
</div>
<div class="form-group">
<label>Status</label>
@Html.ListBox("ddStatusFilter", (MultiSelectList)ViewData["ddStatusFilter"])
</div>
<div class="form-group">
<label>Name</label>
@Html.TextBox("tbName")
</div>
</li>
</ul>
<li class="treeview">
<div style="text-align: center;">
<button type="reset" class="btn btn-warning">Clear Filters</button>
<button type="submit" class="btn"> Search</button>
</div>
</li
}