We Keep Coding

Style #Html.DisplayFor text with color in Razor view

I'm trying to change the color of the output of a #Html.DisplayFor call. It's simple text. I've created css classes and tried to style it directly in the Razor view, but nothing is working. There is no issue with the model (it renders the correct text). There are many similar questions (one, two, three), but none of those solutions have worked for me. The initial attempt was within an <h3> tag, but I've tried outside it as well. Here's my attempts in the view (I've tried a few things...):
<h3>#Html.DisplayFor(model => model.Title, new { #class = "h3.link-colour;" })</h3>
#Html.DisplayFor(model => model.Title, new { #class = "h3.link-colour" })
#Html.DisplayFor(model => model.Title, new { #class = "link-colour"})
#Html.DisplayFor(model => model.Title, new { #class = "link-colour" })
#Html.DisplayFor(model => model.Title, new { #style = "color:#00BFFF" })
#Html.DisplayFor(model => model.Title, new { #style = "color:#00BFFF !important;" })
Relevant part of site.css here:
/* colour links */
a.link-colour {
color: #00BFFF !important;
}
h3.link-colour {
color: #00BFFF !important;
}
.link-colour {
color: #00BFFF !important;
}
The css works for other aspects of the view. In the Views/Shared/_Layout.cshtml file, there is <link rel="stylesheet" href="~/css/site.css" />. I've been able to apply the technique of new { #class = "link-colour" } within a call to #Html.ActionLink in another view in this project, so I'm not sure what's going on. I've cleared the browser cache, too. Thanks for any ideas.

we can use the div around it and add class for div,
<div class="style">
#Html.DisplayNameFor(model => model.title)
</div>
and write styles for .style class, i don't know whether it's correct approach or not but it's working for me.

#Html.DisplayFor will not work because it does not render any html tag, instead it renders plain text. You can press F12 in the browser and check and you will notice there is no tag but just raw content.
Use
#Html.LabelFor(model => model.Whatever, htmlAttributes: new { #class = "your css" })

I have two ways of doing this:
1: Give the <label></label> a class and style that:
#Html.LabelFor(model => model.Title, new { #class = "myCssClass" })
2: Use the code that you have to render you content, but wrap it in a div and target its content:
<div class="myClass">
<h3>#Html.DisplayFor(model => model.Title)</h3>
#Html.DisplayFor(model => model.Title)
#Html.DisplayFor(model => model.Title)
#Html.DisplayFor(model => model.Title)
#Html.DisplayFor(model => model.Title)
#Html.DisplayFor(model => model.Title)
</div>
CSS:
div.myClass {
color: #00BFFF;
}
div.myClass h3{
color: Gold;
}

This is an old thread, but this worked for me. Hope this helps someone searching now:
#Html.LabelForModel(model.Whatever, new { #style = "color: red" })

For some reason <div> tag just screw up my page format , then I try insert <span> on cshtml page and it work.
Sample code :
"Total Hits" will display in Black , and whatever value in between <span> tag will be Red
<h2>Total Hits : <span style="color:Maroon;"> #Html.DisplayFor(m => m.UserAccessCount)</span> </h2>

Try This
#Html.Label("GP", item.GP, new { #style = "color:Red;" })

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

MVC5 placeholder for input not working

My code is like this
#Html.EditorFor(model => model.CreatedUser, new { htmlAttributes = new { #class = "form-control" ,#placeholder = "Your Placeholder Text" }})
I expect the placeholder to come up as I added in the code, but it's not showing. Can anyone point out what I am doing wrong?
Output HTML
<input class="text-box single-line" id="CreatedUser" name="CreatedUser" type="text" value="" autocomplete="off" style="cursor: auto; background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">

That EditorFor overload that accepts the htmlAttributes is MVC 5.1 only.
See HERE
If upgrading is not an option, use TextBoxFor:
#Html.TextBoxFor(model => model.CreatedUser, new { #class = "form-control" ,#placeholder = "Your Placeholder Text" })

Adding style to Editor For

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

How can I change the size of a multi-line editor-field?

I'm working on an MVC project using C#. Right now, I'm trying to customize my views a little, and I'd like to make the text boxes bigger.
I followed the suggestions in this question to move from a single-line to a multi-line text field:
Changing the size of Html.TextBox
Now I'm trying to resize that multi-line field, but I'm not sure where or how to do so.
Here are snippets from my Edit view
<div class="editor-label">
#Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Body)
#Html.ValidationMessageFor(model => model.Body)
</div>
and from my model:
[DataType(DataType.MultilineText)]
[DisplayName("Body:")]
public string Body { get; set; }

I would do this with CSS:
<div class="editor-multiline-field">
#Html.EditorFor(model => model.Body)
#Html.ValidationMessageFor(model => model.Body)
</div>
and then in your CSS file define the width and height to the desired values:
.editor-multiline-field textarea {
width: 300px;
height: 200px;
}

You can also use #Html.TextArea ou TextAreaFor
#Html.TextAreaFor(model => model.Text, new { cols = 25, #rows = 5 })

In MVC 5 you can use
#Html.TextAreaFor(model => model.body, 5, 50, new { #class = "form-control" } )
Works nicely!

If you are using mvc and bootstrap
try this:
#Html.TextAreaFor(model => model.Property, new { #class = "form-control", #rows = 5 })

To adhere to a previously created view style, you can also do this:
<div class="col-md-10 editor-multiline-field">

try
#Html.TextAreaFor(model => model.Descricao, 5, 50, null)
in View Page

I just wanna share in mvc 5
#Html.EditorFor(model => model.Body,
new {htmlAttributes = new {#style="width:yourdesiredwidth;"}
})
or use a custom class