0

C#、MVC4、jQuery を使用しています。私に与えられた要件は、ビューの編集可能なフィールドに変換されるデータベースにレコードを追加できる必要があるということです。

ビューには、データベースの内容に応じて入力する必要があるタブ、グループ、行、および項目があります。「タブ」のリストを含むビューモデルを使用して、私が望むものを達成することができました。各タブには「グループ」のリストが含まれています。各グループには「行」のリストが含まれ、各行には「アイテム」のリストが含まれます。

最終的に私に起こったことは、エディターとまったく同じコードをたくさん繰り返す必要があるということです。これは私が避けたいことです。

したがって、私の見解では、次のようなものがあります。

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

考え、アイデア、提案はありますか？ありがとう

4

2 に答える 2

1

だから、これがあなたができることです。メイン ビューには、次のものがあります。

@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>

アイテム.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>
于 2013-07-23T17:38:26.377 に答える
1

タイプごとにEditFor テンプレートを作成できます。

/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 が特別に設計されたものであるようです。

于 2013-07-22T05:57:31.863 に答える