Question

我正在使用C＃，MVC4和jQuery。给我的要求是我需要能够将记录添加到数据库中，该数据库转换为视图中的可编辑字段。

视图包含需要根据数据库中的内容填充的选项卡，组，行和项。我已经能够使用包含“Tabs”列表的viewmodel实现我想要的东西;每个标签包含一个“组”列表;每个组包含一个“行”列表，每个行包含一个“项目”列表。

最终发生的事情是，我需要重复许多编辑器完全相同的代码。这是我想要避免的。

所以在我看来，我有类似的东西：

    @for (int tabIndex = 0; Model.Tabs != null && tabIndex < Model.Tabs.Count; tabIndex++)
    {
        <div id="tab-@Model.Tabs[tabIndex].TabID" class="tab-content">
        @for (int groupIndex = 0; Model.Tabs[tabIndex].Groups != null && groupIndex < Model.Tabs[tabIndex].Groups.Count; groupIndex++)
        {
            <legend>@Model.Tabs[tabIndex].Groups[groupIndex].Name</legend>
            //This is the part that is not working but I would like to
            AddEditorsForGroup(tabIndex, groupIndex);
...
...

然后我在视图中也有这个：

@{
    public void AddEditorsForGroup(int TabIndex, int GroupIndex)
    {
        for (int lineIndex = 0; Model.Tabs[TabIndex].Groups[GroupIndex].Lines != null && lineIndex < Model.Tabs[TabIndex].Groups[GroupIndex].Lines.Count; lineIndex++)
        {
            for (int itemIndex = 0; Model.Tabs[TabIndex].Groups[GroupIndex].Lines[lineIndex].Items != null && itemIndex < Model.Tabs[TabIndex].Groups[GroupIndex].Lines[lineIndex].Items.Count; itemIndex++)
            {
                AddLabelAndEditor(TabIndex, GroupIndex, lineIndex, itemIndex);
            }
        }
    }
    public void AddLabelAndEditor(int TabIndex, int GroupIndex, int LineIndex, int ItemIndex)
    {
            <div class="_20">
                    <p>
        switch (Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].DisplayTypeEdit.ToLower().Replace(" ", string.Empty))
        {
            case "checkbox":
                Html.LabelFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueBoolean, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].Name);
                Html.CheckBoxFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueBoolean);
                break;
            case "dropdownlist":
                Html.LabelFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].Name);
                Html.DropDownListFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueSelectList);
                break;
            case "multiselectlist":
                Html.LabelFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].Name);
                Html.DropDownListFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueMultiSelectList);
                break;
            case "radiobutton":
                Html.RadioButtonFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString);
                break;
            case "textarea":
                Html.LabelFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].Name);
                Html.TextAreaFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString);
                break;
            default:
                Html.LabelFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString, Model.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].Name);
                Html.TextBoxFor(vm => vm.Tabs[TabIndex].Groups[GroupIndex].Lines[LineIndex].Items[ItemIndex].ValueString);
                break;
        }
                </p>
            </div>
    }   
}

如果我在视图的几个部分重复AddLabelAndEditor中包含的代码，它可以工作，但是代码重复很多。

我的ViewModel的相关部分：

public List<Tab> Tabs { get; set; }

public class Tab
{
    public string Name { get; set; }
    public List<Group> Groups { get; set; }
}
public class Group
{
    public string Name { get; set; }
    public List<Line> Lines { get; set; }
}
public class Line
{
    public string Name { get; set; }
    public List<Item> Items { get; set; }
}
public class Item
{
    public string Name { get; set; }
    public string Description { get; set; }
    public string DataType { get; set; }
    public string DataDefaultValue { get; set; }
    public string DisplayTypeEdit { get; set; }

    public string ValueString { get; set; }
    public bool ValueBoolean { get; set; }
    public DateTime ValeDateTime { get; set; }
    public decimal ValueDecimal { get; set; }
    public int ValueInt { get; set; }
    public MultiSelectList ValueMultiSelectList { get; set; }
    public SelectList ValueSelectList { get; set; }
}

有什么想法，想法，建议吗？感谢

Answer 1

您可以为每种类型创建EditFor Templates：

/Views/Shared/EditorTemplates/Tab.cshtml：

@model Tab

<div>
  // Specific Tab Html
  @Model.Name
  @foreach (var group in Model.Groups)
  {
    Html.Editfor(m => group)
  }
</div>

/Views/Shared/EditorTemplates/Group.cshtml

//Group html etc

您可以链接这些并在以下任何地方重复使用：

@model viewModel

<div>
  @foreach (var tab in Model.Tabs)
  {
    Html.Editfor(m => tab)
  }
</div>

您正在做的是模板的EditFor / Display是专门为其设计的。

Answer 2

所以，这就是你能做的。在主视图中，您将拥有：

@Html.EditorFor(model => model.Tabs)

然后，您需要创建以下部分视图，并将它们放在Views / Shared / EditorTemplates下：

<强> Tab.cshtml：

@model YourApp.ViewModels.Tab

<div class="Tab"> @* Or however you want to represent each Tab... *@
    @Html.EditorFor(model => model.Groups)
</div>

<强> Group.cshtml：

@model YourApp.ViewModels.Group

<div class="Group"> @* Or however you want to represent each Group... *@
    @Html.EditorFor(model => model.Lines)
</div>

<强> Line.cshtml：

@model YourApp.ViewModels.Line

<div class="Line"> @* Or however you want to represent each Line... *@
    @Html.EditorFor(model => model.Items)
</div>

<强> Item.cshtml：

@model YourApp.ViewModels.Item

<div class="_20">
  @Html.Label(Model.Name)
  @switch (Model.DisplayTypeEdit.ToLower().Replace(" ", string.Empty))
  {
      case "checkbox":
          @Html.CheckBoxFor(model => model.ValueBoolean)
          break;
      case "dropdownlist":
          @Html.DropDownListFor(model => model.ValueString, Model.ValueSelectList)
          break;
      case "multiselectlist":
          @Html.DropDownListFor(model => model.ValueString, Model.ValueMultiSelectList)
          break;
      case "radiobutton":
          @Html.RadioButtonFor(model => model.ValueString, Model.ValueString)
          break;
      case "textarea":
          @Html.TextAreaFor(model => model.ValueString)
          break;
      default:
          @Html.TextBoxFor(model => model.ValueString)
          break;
  }
</div>

MVC 4动态添加未知数量的编辑器而不重复大量代码

2 个答案: