How to create a form from a model in 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.

Sam · Accepted Answer · 2015-03-03 22:24:52Z

4

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 (e.g., 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)

edited Mar 3, 2015 at 22:24

answered Mar 3, 2015 at 22:19

Sam

5,0144 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mankind1023 Over a year ago

I was trying to avoid adding code for each property, wouldn't I still need to do that in the razor view with this approach?

Sam Over a year ago

You would still have to (only in the editor template, not in the original view), but the benefit is that you would only have to do it once and then you can reuse the EditorTemplate anywhere that you want to create a form with that model type.

Mustafa Over a year ago

So bad. I come from javascript. Meteor where forms are created automatically based on your model schema . here is an example github.com/aldeed/meteor-autoform

Mankind1023 · Accepted Answer · 2015-03-03 22:15:26Z

3

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?

answered Mar 3, 2015 at 22:15

Mankind1023

7,78818 gold badges67 silver badges97 bronze badges

1 Comment

MikeBaz - MSFT Over a year ago

You might be able to use EditorTemplates for this, but that seems like a lot of work.

saquib adil · Accepted Answer · 2015-05-11 16:13:52Z

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

It will generate label and input in separate lines.
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!

Collectives™ on Stack Overflow

How to create a form from a model in ASP.NET MVC 5?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related