MVC : Binding dynamically added Checkboxes to the Model ???

Question

Hello,

 

    In my page, I have a form that is bound to a Model. Their is a DropDownFor for a property named "TableName". Onchange event of this dropdown, I call a javascript method which calls one of the Action from the Controller and adds checkboxes for a property "RestrictEditFields" of type List<FieldList>. Here's the View Code :

using (Html.BeginForm("TablePermissions", "Admin", FormMethod.Post, new { id = "tblPermForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.TablePermission.TableName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="editor-field">
                @Html.DropDownListFor(model => model.TablePermission.TableName,
                    DbUtilities.GetTableNames(), "Select Table",
                    new { @class = "form-control", @onchange="FillFields()" })
                @Html.ValidationMessageFor(model => model.TablePermission.TableName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.RestrictEditFields, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="editor-field">
                <table id="editTable">

                </table>
            </div>
        </div>

}



<script>
    function FillFields() {
        var tblName = $('#TablePermission_TableName').val();
        var tblPermLevel = $('#TablePermission_PermissionLevelId').val();

        //($('tblPermForm').valid()) { ERROR - OBJECT DOESN'T HAVE valid()'
        if (tblName != null && tblPermLevel != null) {
            alert("Tbl Name = " + tblName + " Perm = " + tblPermLevel);

            $.ajax({
                url: '/Admin/FillFields',
                type: 'GET',
                dataType: "JSON",
                data: { TableName: tblName, TablePermLevel: tblPermLevel },
                success: function (jsonData) {
                    alert(jsonData);
                    var restrictViewList = jsonData.RestrictViewList;
                    var restrictEditList = jsonData.RestrictEditList;
                    // Displays proper count of each List<FieldList>
                    alert("Count of View = " + $(jsonData.RestrictViewList).length + " restrictEditList = " + $(jsonData.RestrictEditList).length);

                    $("#editTable").html("");  // Clear before appending new ones
                    $.each(jsonData.RestrictEditList, function (i, field) {
                        $("#editTable").append('<input type="checkbox" name="edit-group" value="' + field.FieldName + '" /> ' + field.FieldName );


                },
                error: function (xhr) {
                    // debugger
                    console.log(xhr.responseText);
                    alert("Error has occured");
                }
            });
        }
    }
</script>

FieldList class :

public class FieldList
{
    public string FieldName { get; set;  }
    public bool Selected { get; set; }
}

 

 The data received thru json, has a list of fields and I display all those fields as check box. What I want to achieve is - basically, all selected Fields of checkboxes should be saved in Model.RestrictEditFields. And when the user selects that particular table again, all the fields should be displayed and if the value of Selected is true of a FieldList, then that check box should be marked selected.

 

  I am a newbie in MVC and web, I don not get how do I implement this part. What would be the best approach for this ? After researching alot, I could finally add checkboxes dynamically. I am not able to figure out, how and where to bind it with the save & save to the model on clicking Save button. If anyone would help in providing guideline on how to proceed to achieve the goal, would be great.

 

Any help is highly appreciated.

 

Thanks a lot,