Asp.net MVC5 with Bootstrap EditorFor size

问题

I have some modifications to bring to a form which use EditorFor (and using MVC5) and I can't find the way of setting the size of the text box ... I tried the hard way with:

@Html.EditorFor(model => model.Nom, new{@style="width:400px"})

But this did not work.. Is there an easy way?

回答1:

In MVC up to version 5, EditorFor does not allow you to specify html elements in that way. It can only be used in non-editor contexts, like TextBoxFor, etc...

In MVC 5.1 they added the ability to specify html attributes in Editor templates, and you can now do this:

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

回答2:

Using MVC 5 - You need to use [DataType(DataType.MultilineText)] attribute on your view model ejm:

using System.ComponentModel.DataAnnotations;

public class Requests
{

    [Display(Name = "Id")]
    public int RequestId { get; set; }

    [DataType(DataType.MultilineText)]
    public string Comments { get; set; }
}

回答3:

It is not a great idea to apply css class to EditorFor template because an EditorTemplate may can have many elements in that. What you can do is to apply your css thing inside your EditorTempalte file. Checkout this answer for more details.

But if you are simply trying to render a textarea, you may simply use the TextAreaFor helper method.

@Html.TextAreaFor(model => model.Nom, new { @class = "myCustomClass" }) 

and your css

.myCustomClass
{
  width:400px;
}

You may use !IMPORTANT if you specifically want to make sure that this css style overrides the eixsting style.

.myCustomClass
{
  width:400px !IMPORTANT;
}

回答4:

the same but in VB

@Html.TextBoxFor(Function(model) model.nit , New With {.class = "form-control"})

回答5:

If you want to apply it to all your EditorFor, just change the max-width in your Site.css from 280px to any other value. Example:

textarea {
/*max-width: 280px;*/
 max-width: 900px;
}

This worked for me in MVC 5.1

来源：https://stackoverflow.com/questions/21975258/asp-net-mvc5-with-bootstrap-editorfor-size