如何在 MVC 模型中表示用户输入的“列表”？答案

【问题标题】：How to represent "list" of user input in MVC model?如何在 MVC 模型中表示用户输入的“列表”？
【发布时间】：2020-06-10 17:07:28
【问题描述】：

我需要允许我的用户填写表格，然后单击“添加”按钮。然后，用它们的输入值填充表中的一行。如果他们改变主意，他们还可以选择单击“x”来删除该行。

这是它的样子：

这一切都有效，但我不知道如何在模型中表示表单值。我可以制作类似值的结构然后将它们添加到数组中吗？我该怎么做？

另外，这是我的代码：（我在打字稿中填充这些 DropDownLists 并添加一个侦听器以将所选值添加到 hiddenfor 元素，该元素是连接到模型的实际元素）

<div class="col-sm-6">
    <div class="field col-sm-12">
        @Html.HiddenFor(x => x..CallType, new { id = "CallType-List_Value" })

        @Html.DropDownList("CallType", new SelectList(" "), new { @class = "CallType-List form-control" })
        @Html.ValidationMessageFor(x => x.CallType, "", new { @class = "text-danger" })
        @Html.LabelFor(x => x.CallType)
    </div>
    <div class="field  col-sm-12">
        @Html.HiddenFor(x => x.CallSubType, new { id = "CallSubType-List_Value" })

        @Html.DropDownList("CallSubType", new SelectList(" "), new { @class = "CallSubType-List form-control" })
        @Html.ValidationMessageFor(x => x.CallSubType, "", new { @class = "text-danger" })
        @Html.LabelFor(x => x.CallSubType)
    </div>
    <div class="field  col-sm-12">
        <div class="field">
            @Html.EditorFor(x => x.AccountNumber, new { htmlAttributes = new { placeholder = " " } })
            @Html.LabelFor(x => x.AccountNumber)
            @Html.ValidationMessageFor(x => x.AccountNumber, "", new { @class = "text-danger" })
        </div>
    </div>
</div>
<div class="small-btn col-sm-12" style="border-top: none !important;">
    <button type="button" class="btn btn-primary">ADD INCIDENT</button>
</div>

到目前为止的模型：

public string CallType { get; set; }

public string CallSubType { get; set; }

[RegularExpression(@"^[0-9]*$", ErrorMessage = "Account number is not valid.")]
[StringLength(16, ErrorMessage = "Account number cannot be longer than 15 characters.")]
public int AccountNumber { get; set; }

我是 .NET 的超级新手，所以如果答案很明显，请原谅我。

【问题讨论】：

标签： asp.net asp.net-mvc typescript forms model

【解决方案1】：

将值设置为 DropDownList 您需要一个 IEnumrable 的值 CallType：

// List of types
var callTypes =  new List<string>{"CallType1", "CallType2" };

// View list view data from Model
@Html.DropDownList("CallType", new SelectList(callTypes, Model.CallType), new { @class = "CallType-List form-control" })

SelectList 的构造函数首先需要参数一个值列表，其次需要在列表中选择什么

如果你想要不同的 DisplayTitle 和 Value 来查看 DropDownList，你可以使用这个代码：

// class for describe view sub types
public class CallSubTypesView
{
  public string Id { get; set; }
  public string Name { get; set; }
}

并且在视图中：

@{

var list = new[] {
    new CallSubTypesView { Id = "1", Name = "Name1" },
    new CallSubTypesView { Id = "2", Name = "Name2" },
    new CallSubTypesView { Id = "3", Name = "Name3" }
};

    var selectList = new SelectList(list, "Id", "Name", Model.CallSubType);
}

@Html.DropDownList("CallSubType", selectList, new { @class = "CallSubType-List form-control" })

在此表单参数的 post 请求中，CallSubType 的值为CallSubTypesView.Id（“1”或“2”或“3”），而不是Name

【讨论】：