Model is null in controller action after ajaxPost in partial page

Question

I am new to ASP mvc I have a partial page like

@model IEnumerable<Sample.Models.Privilege>

@{
    ViewBag.Title = "Details";
}

<script type="text/javascript">
    function UpdatePrivilegeSuccess() {
    }

    function UpdatePrivilegeFailure() {
    }
</script>

<div class="settingsTable" style="position: relative; width: 100%; margin: 0 auto">

    <div style="width: 50%; margin: 0 auto">
        <div style="width: 50%; margin: 0 auto">
            <h2>Privilege</h2>
        </div>
    </div>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.PrivilegeName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.module.ModuleName)
            </th>
            <th>
                @Html.Label("Option")
            </th>
            <th>Action</th>
        </tr>

       @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PrivilegeName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.module.ModuleName)
                </td>
                <td>
                    @Html.CheckBoxFor(modelItem => item.Checked)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.PrivilegeId }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.PrivilegeId })
                </td>
            </tr>
        }

    </table>

    @using (Ajax.BeginForm("UpdatePrivilege", "RolePrivilegemapping",
        new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "PrivilegeWrapper",
                          OnSuccess = "UpdatePrivilegeSuccess",
                          OnFailure = "UpdatePrivilegeFailure"
        }))
    {
         <p>
            <input type="submit" value="Update" />
        </p>
        @Html.ActionLink("Update", "UpdatePrivilege", "RolePrivilegemapping")
    }

</div>

I am listing privileges in a table. But after the user click Update for updating model , Model is received as NULL in controller action

public ActionResult UpdatePrivilege(IEnumerable<sample.Models.Privilege> updatedPrivilege
{
    return PartialView("_Privilege", One_Track.Models.DataProvider.OneTrackDataProvider.GetPtrackPrivilegeNames());

}

Why is this happening? Any help will be appreciated

Answer 1

You need to at least move the data that your posting into your form or nothing will be posted.

You will also need to index your collections so that the modelbinder will work.

This is done by using a for loop rather than a foreach.

If you need non-editable fields to re-bind you will have to provide them as hidden inputs. You can use HiddenFor for this. See them under the DisplayFor's below.

        @using (Ajax.BeginForm("UpdatePrivilege", "RolePrivilegemapping",
            new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "PrivilegeWrapper",
                              OnSuccess = "UpdatePrivilegeSuccess",
                              OnFailure = "UpdatePrivilegeFailure"
            }))
        {

       <table>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.PrivilegeName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.module.ModuleName)
                </th>
                <th>
                    @Html.Label("Option")
                </th>
                <th>Action</th>
            </tr>

           @for(var i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => modelItem[0].PrivilegeName)
@Html.HiddenFor(modelItem  => modelItem[0].PrivilegeName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model[0].ModuleName)
                        @Html.HiddenFor(modelItem  => modelItem[0].ModuleName)
                    </td>
                    <td>
                        @Html.CheckBoxFor(modelItem => Model[0].Checked)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.PrivilegeId }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.PrivilegeId })
                    </td>
                </tr>
            }

        </table>
             <p>
                <input type="submit" value="Update" />
            </p>
        }