1

我要放置一个包含自定义字段分组的动态表单

所以在我的主要表单（表单）对象上，我有一个分组（组）列表，这些分组每个都有一个自定义字段（字段）列表，分组主要用于将自定义字段显示到带有标题等的列中。

我的问题是，对于每个新分组，我显示自定义字段的计数器重置并返回到 0，这意味着当数据被发布回我的控制器时，由于存在重复的名称属性，因此无法正确发布.

我目前正在回发一个字段列表，因为我不需要回发分组。

有没有人有我可以做到这一点的不同方式的任何解决方案？这我显然做错了吗？

在下面的示例代码中，为该表单生成的 HTML 给了我 4 个输入控件，但只有两个唯一的控件名称，例如，两个控件的名称属性为“name="group.Fields[0].Result"”，另一个两个有“name="group.Fields[1].Result"”，当发布回控制器时显然不起作用。

编辑：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FieldsPoC.Models;

namespace FieldsPoC.Controllers
{
    public class FormController : Controller
    {
        public ActionResult Index()
        {
            FormViewModel model = new FormViewModel();

            var group = new GroupViewModel();
            group.Label = "Group 1";
            group.Fields.Add(new FieldViewModel() { Label = "Field 1", Type = FieldType.Number });
            group.Fields.Add(new FieldViewModel() { Label = "Field 2", Type = FieldType.Text });
            model.Groups.Add(group);

            group = new GroupViewModel();
            group.Label = "Group 2";
            group.Fields.Add(new FieldViewModel() { Label = "Field 1", Type = FieldType.DateTime });
            group.Fields.Add(new FieldViewModel() { Label = "Field 2", Type = FieldType.Number });
            model.Groups.Add(group);

            return View(model);
        }

        [HttpPost]
        public ActionResult Index([Bind(Prefix = "Contact")]ContactViewModel contact, List<GroupViewModel> fields)
        {

            return View();
        }
    }
}

namespace FieldsPoC.Models
{
    public class ContactViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

namespace FieldsPoC.Models
{
    public class ContactViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

namespace FieldsPoC.Models
{
    public class GroupViewModel
    {
        public GroupViewModel()
        {
            Fields = new List<FieldViewModel>();
        }

        // Other layout properties
        public string Label { get; set; }
        public List<FieldViewModel> Fields { get; set; }
    }
}

namespace FieldsPoC.Models
{
    public enum FieldType
    {
        Text = 0,
        Number = 1,
        DateTime = 2
    }

    public class FieldViewModel
    {
        public FieldType Type { get; set; }
        public string Label { get; set; }
        public string Result { get; set; }
    }
}

表格索引：

@model FieldsPoC.Models.FormViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @using (Html.BeginForm("", "Form"))
        {
            @Html.ValidationSummary(true)

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

            foreach (var group in Model.Groups)
            {
            @Html.EditorFor(x => group);
            }

            <p>
                <input type="submit" value="Save" />
            </p>
        }
    </div>
</body>
</html>

编辑器模板：

@model FieldsPoC.Models.ContactViewModel
<div class="editor-label">
    @Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.FirstName)
    @Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.LastName)
    @Html.ValidationMessageFor(model => model.LastName)
</div>

@model FieldsPoC.Models.FieldViewModel
<div class="editor-label">
   @Model.Label
</div>

@{ 
    switch (Model.Type)
    {
        case FieldsPoC.Models.FieldType.DateTime:
            @Html.TextBoxFor(model => model.Result);
            break;
        case FieldsPoC.Models.FieldType.Number:
            @Html.TextBoxFor(model => model.Result);
            break;
        case FieldsPoC.Models.FieldType.Text:
            @Html.TextBoxFor(model => model.Result);
            break;
    }
}

@model FieldsPoC.Models.GroupViewModel
<fieldset>
    <legend>@Model.Label</legend>
    @Html.EditorFor(model => model.Fields)
</fieldset>

标题

4

0 回答 0