ajaxasp.net-mvc-4formcollectionajaxhelper

FormCollection parameter is empty while using @Ajax.BeginForm and @Ajax.ActionLink


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.


Solution

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