如何在ASP.NET MVC 5中从模型创建表单？

Question

有没有内置的函数可以基于模型中的对象参数创建完整的表单？

目前，我需要为每个属性都写一行代码：

@model AutomatedTellerMachine.Models.ContactFormModel
@using (Html.BeginForm())
{
    <div class="form-horizontal">

        <div class="form-group">
            <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10">
                <input type="text" name="phone" class="form-control" />
                @Html.ValidationMessageFor(model => model.phone, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10">
                <textarea name="message" class="form-control"></textarea>
                @Html.ValidationMessageFor(model => model.message, "", new { @class = "text-danger"})
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10">
                <input type="submit" value="Send" class="btn btn-default"/>
            </div>
        </div>
    </div>

}

我知道你可以让Visual Studio为你创建所有东西，但我需要混合搭配。

- Mankind1023

Answer 1

你可以使用编辑器模板来实现此功能。创建一个名为 ContactFormModel.cshtml 的新Razor视图（名称必须与模型匹配）。在该文件内，复制您现有视图中的所有代码。

您可以使用普通的Razor语法来呈现您想要在调用EditorFor()时包括的任何HTML。

然后，您可以使用Razor渲染自定义模板：

@Html.EditorForModel(Model)

如果你想针对模型中的特定对象（例如YourObjectName）执行相同操作而不是整个模型，请创建一个名为YourObjectName.cshtml的文件。

在该文件的顶部：

@model NameSpace.YourObjectName

然后将此内容用于您想要呈现自定义编辑器模板的外部视图中：

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

- Sam

---

我试图避免为每个属性添加代码，但是用这种方法，我在Razor视图中仍然需要这样做吗？ - Mankind1023

你仍然需要（只有在编辑器模板中，而不是在原始视图中），但好处是你只需要做一次，然后可以在任何想要创建该模型类型表单的地方重用EditorTemplate。 - Sam

太糟糕了。我来自JavaScript。Meteor可以根据您的模型架构自动创建表单。这里有一个例子：https://github.com/aldeed/meteor-autoform - Mustafa

Answer 2

好的，我明白了，使用以下方法解决：

@Html.EditorForModel(Model)

这样能工作，但有没有一种方法可以为它创建的所有元素分配一个类？

- Mankind1023

---

你可能可以使用 EditorTemplates 来完成这个任务，但那似乎是很繁琐的工作。 - MikeBaz - MSFT

Answer 3

也许你正在寻找这个。

@Html.EditorFor(model => model, new { htmlAttributes = new { @class = " form-control" } })

“form-control”类被分配到输入字段中。它会为每个属性生成以下HTML代码。

<div class="editor-label"><label for="UserName">User Name</label></div>
<div class="editor-field">
  <input class=" form-control text-box single-line" data-val="true" data-val-length="The field User Name must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The User Name field is required." id="UserName" name="UserName" type="text" value=""> 
  <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>

这样做的问题在于：

1. 它会在不同的行中生成标签和输入框。
2. 标签和输入框字段没有分组在“form-group” div下，这使得自定义样式变得困难。

但总有一个解决方法。我曾经用左对齐的标签和右对齐的输入框以及标签区域和输入区域的不同背景颜色来设计过一个表单。如果有人感兴趣，以下是如何实现：

首先，给你的表单命名，以便你的样式不会影响其他表单。

#RegisterForm > .editor-label {
    float: left;
    width: 250px;
    background-color: lightblue;
    box-shadow: 0px 35px lightblue;
    padding-top: 10px;
}

#RegisterForm > .editor-label > label {
    float: right;
    padding-right: 5px;
}

#RegisterForm > .editor-field {
    margin-left:250px;
    background-color: yellowgreen;
    margin-bottom: 15px;
    box-shadow: 0px 15px yellowgreen;
    padding-left: 5px;
    padding-right: 20px;
}

希望这可以帮助你！

- saquib adil