在Razor視圖中查看和編輯同一模型內的嵌套詞典，並將其保存回模型

Question

我有以下模型：

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

字段“ InspectedFields”是有問題的字段。

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

我在模型的“編輯剃刀”視圖中一直使用以下代碼：

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

因此，當我保存模型時，它實際上使整個InspectedFeilds詞典無效，並導致我的剃刀視圖崩潰。 但是，它將所有其他值保存在模型中。 我不確定這是因為我的實現還是我在剃刀視圖中缺少有關處理字典的某些知識。

Answer 1

為了發布字典，您必須同時發布Key和Value 。 您還需要使用for循環並為字典建立索引。 例如：

@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，以更好地說明該格式。