Dynamically populate multiple check-boxes and store checked values to one model field in form in mvc 4

Question

I'm creating mvc application.In the database I have one table for user groups , another table to product fields.

I created form to add new product fields.When I add new product field I want to Assign User Groups(These user groups can dynamically change).I want to do this using check boxes like below picture

this is product fields model class

public partial class ProductField
{
    public string ProductFieldID { get; set; }
    public string ProductTypeEn { get; set; }
    public string ProductTypeAr { get; set; }
    public string ProductFieldNameEn { get; set; }
    public string ProductFieldNameAr { get; set; }
    public string ProdcutFieldDiscriptionEn { get; set; }
    public string ProductFieldDiscriptionAr { get; set; }
    public string UserGroup { get; set; }
    public string Status { get; set; }

}

this is view page

        <div class="form-group">
        @Html.LabelFor(model => model.ProductFieldID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductFieldID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductFieldID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProductFieldNameEn, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductFieldNameEn, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductFieldNameEn, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProductFieldNameAr, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductFieldNameAr, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductFieldNameAr, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProdcutFieldDiscriptionEn, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProdcutFieldDiscriptionEn, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProdcutFieldDiscriptionEn, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProductFieldDiscriptionAr, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductFieldDiscriptionAr, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductFieldDiscriptionAr, "", new { @class = "text-danger" })
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

When I checked User groups those valuse should be store under one field in Product field table (which is "User_Group" nvarchar field)

is this possible ? Really appreciate can suggest a way to achieve this

Answer 1

For each one of your checkboxes add corresponding model property and make UserGroup claculated field

public partial class ProductField
{
    public string ProductFieldID { get; set; }
    public string ProductTypeEn { get; set; }
    public string ProductTypeAr { get; set; }
    public string ProductFieldNameEn { get; set; }
    public string ProductFieldNameAr { get; set; }
    public string ProdcutFieldDiscriptionEn { get; set; }
    public string ProductFieldDiscriptionAr { get; set; }
    public string UserGroupSerialized { 
       get
       { 
            return JsonConvert.SerializeObject(UserGroups, Formatting.Indented);
       }
    }

    public IList<KeyValuePair<string,bool>> UserGroups { get; set; }
    public string Status { get; set; }
}

View:

@for(var i=0; i<UserGroups.Count; i++)
{
    <div class="form-group">
        @Html.Label("", Model.UserGroups[i].Key , htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.HiddenFor(model => model.UserGroups[i].Key)
            @Html.EditorFor(model => model.UserGroups[i].Value , new { htmlAttributes = new { @class = "form-control" } })                
        </div>
    </div>
}