在Razor视图中查看和编辑同一模型内的嵌套词典，并将其保存回模型

Question

I have the following model:

public class FormDimensions
{
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "formID")]
    public String FormID { get; set; }

    [JsonProperty(PropertyName = "width")]
    public float Width { get; set; }

    [JsonProperty(PropertyName = "height")]
    public float Height { get; set; }

    [JsonProperty(PropertyName = "padding")]
    public float Padding { get; set; }

    [JsonProperty(PropertyName = "inspectedFields")]
    public Dictionary<String, Dictionary<String,FieldDimension>> InspectedFields { get; set; }
}

The field "InspectedFields" is the field in question..

public class FieldDimension
{
    [JsonProperty(PropertyName = "name")]
    public String Name { get; set; }

    [JsonProperty(PropertyName = "page")]
    public int Page { get; set; }

    [JsonProperty(PropertyName = "dimension")]
    public String Dimension { get; set; }
} 

I have been using the following code in my Edit Razor view for the model:

foreach (var entry in Model.InspectedFields)
{
     <h3>@entry.Key</h3>
        <div class="card-block">
             @foreach (var page in entry.Value.Values)
             {
                   <div class="form-group">
                   @Html.Label("Value Name", htmlAttributes: new { @class = "control-label col-md-2" })
                       <div class="col-md-10">
                          @Html.EditorFor(x => page.Name, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessage(page.Name, new { @class = "text-danger" })
                       </div>
                   </div>
                   <div class="form-group">
                        @Html.Label("Page Dimensions", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(x => page.Dimension, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessage(page.Dimension, new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Page Number", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(x => page.Page, new { htmlAttributes = new { @class = "form-control" } })                                       
                            @Html.ValidationMessage(page.Page.ToString(), new { @class = "text-danger" })
                        </div>
                   </div>
              }
        </div>
   <hr />
 }

So when I go to save my model, it actually nulls out the entire InspectedFeilds dictionary and cause my razor view to crash. However, it will save all the other values in the model. I am not sure if this is because my implementation or I am missing something about handling dictionaries in a razor view..

Answer 1

In order to post a dictionary you must both post the Key and Value . You also need to use a for loop and index the dictionary. For example:

@for (var i = 0; i < Model.InspectedFields.Count; i++)
{
    @Html.HiddenFor(m => m.InspectedFields[i].Key)
    for (var j = 0; j < Model.InspectedFields[i].Value.Count; j++)
    {
        @Html.HiddenFor(m => m.InspectedFields[i].Value[j].Key)
        @Html.EditorFor(m => m.InspectedFields[i].Value[j].Value.Page)
    }
}

HTML has been stripped from sample code to illustrate the format better.