Adding style to Editor For - c#

I'm trying to apply a Style to the Editor for an element, but I can't make it work; what am I doing wrong?
#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo,"" ,new Dictionary<string, string> { { "style", "width:500px" } })

Since MVC 5.1, you can pass in custom attributes with using the htmlAttributes as a key:
#Html.EditorFor(model => model.ClienteNuevo,
new { htmlAttributes = new { #class = "form-control" } })
In older MVC versions there is no way to add html attributes with the EditorFor method.
You should create a custom editor template or use Html.TextboxFor istead of EditorFor. You should check these topics topic1, topic2.

You can create own css class and appendd it to your editor:
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "custom-editor" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })

EditorFor invokes template views rather than outputting a fixed element, so it doesn't take html attributes as an argument. For something like what you're doing the easiest workaround would be to surround the editor and validation message with another element, and apply the style to that instead:
<div style="width: 500px;">
#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo,"")
</div>

EditorFor does not allow for styling as there are no parameters for additional attributes. The reason for this is because the EditorFor doesn't always generate a single element as it can be overridden. To style a specific type of element you need to use the specific editor you want to use. For instance if the editor is a textbox just use TextBoxFor and apply the styling that way.

#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo, "", new { #class = "yourclass" })
I hope you help

Related

Setting focus on EditorFor [duplicate]

I would like to autofocus on an editorfor in my application, but I can't seem to do that. I have successfully used autofocus on a textbox, but I would like to use an editorfor to keep my application's look universal.
Any solutions to this would be much appreciated, thank you.
My attempt:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
This s because you are using EditorFor instead of something specific like TextBoxFor.
#Html.TextBoxFor(model => model.Name, new { htmlAttributes = new {
#class = "form-control" }, autofocus="autofocus"})
Or you can do that using jQuery:
<div class="editor-field focus">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
$(function() {
$('.focus :input').focus();
});
Update:
As you know TextBoxFor always creates a textbox with type input, But EditorFor is a little bit smart, it renders markup based on the datatype of the property.
Using .Net Framework 4.5 and MVC 5, this works for me:
#Html.EditorFor(model => model.Description, new {
htmlAttributes = new {
#class = "form-control",
autofocus = true
}
})
You put the autofocus attribute in the wrong spot.
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
Try this instead:
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control", autofocus = "" } })
I've been following this thread and I may have stumbled on an answer to your question about autofocus on EditorFor - this is all Asp.Net 4.5 and MVC 5, not that it matters.
In the Scripts folder I have a jQuery script file:
$(function(){
$('.someclassname').focus();
});
I add the script name to the BundleConfig and render it in the view.
In the view I add the classname to the EditorFor <div class="col-md-10" someclassname">
I then add the type="text" autofocus="autofocus" to the EditorFor's #class. So, new{#class="form-control", type="text", autofocus="autofocus"
That's pretty much it, when the DOM loads the .someclassname field gets the cursor focus...
PS. In fact if you just do (3) it works also...

How to change size of textboxfor in view MVC

I am trying to change the size of TextBoxFor with new htmlAttributes but its not working any other solution?
<td>
#Html.TextBoxFor(model => model.Serial_No, htmlAttributes: new { #style= "size:10" })
</td>
#Html.EditorFor(model => model.Serial_No, new { htmlAttributes = new { #class = "yourCustomClass" } })
and then in css file
yourCustomClass{
height: 60px;
min-width:400px;
etc;
}
and if by size you mean maximum number of characters then
#Html.TextBoxFor(m=> m.Serial_No, new { maxlength="10" });
You need to work out which css attributes to use to specify the size of the textbox. Consider height: "xxxpx", font-size: "yyypx" to start with.
In general, it is helpful to use the Chrome debugger (F12) to inspect the generated element and work out what html is going to answer your problem. You can then translate that back into the correct style htmlAttribute.
#Html.TextBoxFor(model => model.Serial_No, new { style= "width:10px" })

How do you make a HTML.EditorFor textbox exist on multiple lines?

I have a text area where users have to write a description. I was wondering how to set a text box so that it is on multiple lines, allowing the user to see what they are writing. What I am looking for is similar to the environment that I am writing this question in.
<div class="form-group">
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
In your model you need to add MultilineText as below:
[DataType(DataType.MultilineText)]
public string Title { get; set; }
Or you code have just changed the EditorFor to TextAreaFor like Below
#Html.TextAreaFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })

How to hide #Html kind of input tags?

I want to hide the following html input tag. So how to do it with these kind of #Html tags?
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control" })
Try like this:
#Html.HiddenFor(m => m.FirstName, new { #class = "form-control" })

Adding Html required to TextAreaFor not working c#

I'm trying to add a required to my TextAreaFor, but it won't give the error message when i post it. I'm trying to do it on the followinng line:
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
And this is my full code:
#using (Html.BeginForm("_Create", "Comments", FormMethod.Post))
{
#Html.HiddenFor(m => m.ThreadId)
<div class="form-group">
<div class="col-md-10">
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
#Html.ValidationMessageFor(model => model.Content, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
<div>
<input type="submit" value="Post" class="btn btn-default" />
</div>
</div>
}
If anyone wanst to do it with html attribute,
#Html.TextAreaFor(model => model.Content, new { required = "required", htmlAttributes = new { #class = "form-control"} })
You don't need required as a html attribute. It should be a data annotation on the model.
[Required]
public string Content { get; set; }
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
Should be:
#Html.TextAreaFor(model => model.Content, new { #class = "form-control", required = "required" })
Or if you want to explicitly name the parameter your anonymous object is for:
#Html.TextAreaFor(model => model.Content, htmlAttributes: new { #class = "form-control", required = "" } })
But, if you do not use data-annotation, it could be even easier this way:
<textarea id="Content" name="Content" required class="form-control">#Model.Content</textarea>
(id attribute may be optional, depending on your usages.)
Side note: I tend to minimize uses of html helpers methods. For me, MVC is also about letting you control very precisely the browser client code, which is imo better done by writing it yourself. WebForm is, on this subject, about hiding most of browser client code handling.
Using extensively html helpers, built-in validation logic, and so on, may cause you to lose the precise control of how your page should work.

Categories