如何创建可变数量的文本框字段及其对应的标签

时间:2016-01-25 12:01:00

标签: razor asp.net-mvc-5

我正在开发一个asp.net mvc 5应用程序并需要一些帮助

假设以下模型:

public class EmployeeMaster
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string F1 { get; set; }
    public string F2 { get; set; }
    public string F3 { get; set; }
    public string F4 { get; set; }
    public string Email { get; set; }
}

在管理员面板中,管理员将设置要在另一个表中保存在数据库中的文本框及其相应标签的数量,例如:(TextBoxLabel)。文本框和标签的这些变体出现在每个用户的帐户中,该帐户已分配了系统代码。现在,假设管理员想要分配2个文本框字段及其标签,那么,他只需转到管理区域并输入他想要的内容,现在在用户端(模型上方),它应该只显示4个文本框即(名称,F1,F2和电子邮件)忽略其他两个,F1和F2有自己的标签,这些标签将从TextBoxLabel表中从数据库中提取,这意味着当用户提交表单时,将填充F1和F2列,并且F3和F4将具有空值。

现在我的问题是我如何实现上述场景,可能是实现这一目标的简单和最佳方式,一个例子将深表赞赏。在此先感谢:)

1 个答案:

答案 0 :(得分:0)

您可以向视图模型添加集合类型属性,以存储可变数量的输入字段。

public class InputItem
{
    public int InputIndex { set; get; }
    public string Label { set; get; }
    public string Value { set; get; }
}
public class EmployeeMaster
{
    public int Id { get; set; }
    public string Name { get; set; }

    public List<InputItem> Inputs { set; get; } 
    public string Email { get; set; }

    public EmployeeMaster()
    {
        this.Inputs = new List<InputItem>();
    }
}

在您的视图中,您将Inputs属性初始化为n数,其中n是管理员先前设置的内容(db / web.config等)

public ActionResult Create()
{
    var counter = 5; / Replace 5 with value admin stored.
    var vm = new EmployeeMaster();
    for (var i = 1; i <= counter; i++)
    {
        vm.Inputs.Add(new InputItem { Label = "F" + i , InputIndex=i });
    }
    return View(vm);
}

您的视图,循环输入Inputs属性并创建输入表单元素。

@model EmployeeMaster

@using (Html.BeginForm())
{
    <label>Name</label> @Html.TextBoxFor(s => s.Name)

    <label>Inputs</label>
    for (var i = 0; i < Model.Inputs.Count; i++)
    {
        <div>
            @Html.LabelFor(s => s.Inputs[i].Label)
            @Html.TextBoxFor(s => s.Inputs[i].Value)
            @Html.HiddenFor(x => x.Inputs[i].InputIndex)
        </div>

    }
    <input type="submit" />
}

在您的HttpPost操作中,您可以阅读属性值并根据需要保存

[HttpPost]
public ActionResult Index(EmployeeMaster model)
{
    // to do  : check model.Inputs
    // to do : Save and reidrect
}