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

Question

Is there a built in function that basically takes an object parameter from a model and creates a complete form based on that?

Currently I'm doing a line for each property:

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

}

I realize you can get Visual Studio to create everything for you, but I need to mix and match.

Answer 1

You can do this with Editor Templates. Create a new Razor view named ContactFormModel.cshtml (the name must match the model). Inside that file, copy all of the code from your existing view.

You can use normal Razor syntax to render whatever HTML that you want to include when calling EditorFor() on this model.

Then, you can have Razor render your custom template with:

@Html.EditorForModel(Model)

If you want to do the same for a specific object (eg, YourObjectName ) in the model, rather than the whole thing, create a file named YourObjectName.cshtml .

At the top of this file:

@model NameSpace.YourObjectName

Then use this in the outer view that you want to render the custom Editor Template in:

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

Answer 2

Ok so I figured it out, using:

@Html.EditorForModel(Model)

works, but is there a way to assign a class to all elements that it will create?

Answer 3

May be you are looking for this.

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

The 'form-control' class is assigned to input fields. It will generate this html for each property

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

The problem with this is

1. It will generate label and input in separate lines.
2. Label and input fields are not grouped under 'form-group' div. which makes it difficult to customize the styles.

But there is always a work around. I have once styled a form with labels aligned on left and inputs aligned on right with different background-color for labels area and inputs area. Here is how you can do it if anybody is interested.

First of all, name your form with something so your styles does not effect other forms.

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

Hope this helps!