In ASP.NET MVC I could define a textBox editor like this and give it a style.
#Html.TextBoxFor(m => m.Notes[i].Notes, new { style = "width: 500px;" });
How can I move the style to the Site.css file and just refer to it from the code above?
.myStyle {
width: 500px;
}
I tried this which compiles but doesn't seem to work:
#Html.TextBoxFor(m => m.Notes[i].Notes, "myStyle");
You want to give it a class attribute for your CSS rule to match:
#Html.TextBoxFor(m => m.Notes[i].Notes, new { #class = "myStyle" });
Note that the # in #class has no special meaning in ASP.NET MVC. It's simply there to turn class, a keyword in C#, into an identifier, so you can pass it in as a property and it'll compile.
One word of explanation. Normally if you want to add attributes, e.g. readonly, you would type:
#Html.TextBoxFor(m => m.Notes[i].Notes, new { readonly = "readonly" });
Notice there is no # in front of readonly. You have to put # in front of the class attribute, because it's a keyword in C#. If you do it in VB.NET you do not have to escape, because you define properties with a leading .:
#Html.TextBoxFor(Function(m) m.Notes[i].Notes, New With { .class = "myStyle" });
Related
I have the following code inside my asp.net MVC Razor view:-
#{
List<Marketing.Models.SalesData> allLevels = ViewBag.AllLevels;
var gridcolumns = new List<WebGridColumn>();
gridcolumns.Add(new WebGridColumn()
{
ColumnName = "Status",
Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Status).ToString(),
CanSort = true,
Format =
(item) =>
{
var banner = item.Value as Marketing.Models.SalesData;
return Html.DisplayFor(modelItem => banner.Status, new { #class = banner.Status });
}
});
now what i am trying to do is to define a css class inside my Html.DisplayFor(modelItem => banner.Status, new { #class = banner.Status }); but this will render the without any css class, as follow:-
<td>succeed</td>
now i though the problem with the way i am defining the class, so i tried this test, to hard code the class name Html.DisplayFor(modelItem => banner.Status, new { #class = "testclass"}); but this did not render the css class.. so can anyone adivce on this please?
now i am using asp.net mvc version 5.2.3.0 which should support defining css classes inside my HTML helpers.
At first take a look to this example. #Html.LabelFor() Helper function renders a <label></label> tag. Suppose if you write #Html.LabelFor(m=>m.Name, new {#class = "form-control"}) it returns <label class = "form-control">David</label>.So we can apply class to label for helper function.
But #Html.DisplayFor() do not render any html tag. If you write #Html.DisplayFor(m=>m.Name) it returns your name only, like: David.
So you have to wrap #Html.DisplayFor() Helper inside a span and apply class to it.
Like: <span class = "form-control">#Html.DisplayFor(m=>m.Name)</span>. Then output will be <span class="form-control">David</span> . That means class applied on name property.
Hope this helps..
How can you add a CSS Class, not explicit inline styling, to a Kendo MVC UI control?
No matter what we've tried we cannot add CSS Classes to Kendo UI HTML helpers.
It only adds its own "k-" class.
You can add an style attribute with explicit width and styling,
but not a class,
.HtmlAttributes(new { #class = "please-dont-hard-code-widths" })
or
new HtmlAttributes(new {new { #class = "please-dont-hard-code-widths" } })
do nothing at all.
** Update, this issue also happens with #Html.EditorFor() when Kendo is part of the project, it won't accept classes though the documentation says it does. We have to use explicit input types like TextBoxFor() which defeats having the class model drive the form types.
The other regular Razor HTML Helpers do it fine, but not the Kendo ones.
It's seems impossible Telerik wouldn't support something this basic for for the display layer.
I too have faced this problem a few times and even went as far as creating my own helpers as well as editor templates but here are two ways I have achieved this in some controls. It does always add its own class but using the below techniques I have managed to inject my own attributes in the generated tags.
Note, I used MVC5.
#Html.EditorFor(m => m.ConfirmEmail, new Dictionary<string, object> { { "class", "form-control" } })
#Html.EditorFor(m => m.MobileNumber, new { htmlAttributes = new { #class = "form-control validateNumericInput", #aria_describedby = "mobile-addon" } })
I want to use the placeholder attribute in the Html.EditorFor so I did just like in the first answer: Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?
But in the final part, I don't have the EditorTemplates folder so I created it and when I tried to create the string.cshtml view I couldn't because the name "string" is reserved so I chose stringg.cshtml instead and it didn't work! Do I have to change the name elsewhere in my program? I did exactly like the answer...
Thank you!
Upgrade to MVC 5.1 and you can use HTML attributes in EditorFor:
#Html.EditorFor(m => m.variable, new { htmlAttributes = new { placeholder = "Your Placeholder Text" } })
http://www.asp.net/mvc/overview/releases/mvc51-release-notes
#Html.EditorFor(model => model.members_ssn, new { htmlAttributes = new { #class = "form-control", placeholder = "Your Example Here" } })
This works for MVC 5.
In my case i was looking to set the placeholder from the model metadata, like this:
#Html.EditorFor(model => model.name, new { htmlAttributes = new { #class = "form-control", placeholder = Html.DisplayNameFor(x => x.name) } })
When using TextBoxFor or TextAreaFor rather than EditorFor, use only the inner key-value pair from #Medo's answer, since the method directly expects an htmlAttributes object:
#Html.TextBoxFor(m => m.variable, new { placeholder = "Your Placeholder Text" })
(I realize this is tangential to the original question, but having this here would have helped me when I landed on this page earlier, looking for an answer to how to add placeholder text to an Html.TextAreaFor!)
Use some jquery, eg:
$("#FirstName").attr("placeholder", "Do not type name - use Search button");
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?
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" }, })
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; }
}
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;
}
the same but in VB
#Html.TextBoxFor(Function(model) model.nit , New With {.class = "form-control"})
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
If I have an HTML helper like so:
Name:<br />
<%=Html.TextBox("txtName",20) %><br />
How do I apply a CSS class to it? Do I have to wrap it in a span? Or do I need to somehow utilize the HtmlAttributes property of the helper?
You can pass it into the TextBox call as a parameter.
Name:<br/>
<%= Html.TextBox("txtName", "20", new { #class = "hello" }) %>
This line will create a text box with the value 20 and assign the class attribute with the value hello. I put the # character in front of the class, because class is a reserved keyword. If you want to add other attributes, just separate the key/value pairs with commas.
This is how to add a class and a style on the same element...
"x" being the model passed to the view with a property of TextBoxID
#Html.TextBoxFor(x => x.TextBoxID, new { #class = "SearchBarSelect", style = "width: 20px; background-color: green;" })
I did some research and came across this article that seems to have a solution to your question.
Ajax Control Toolkit with ASP.NET MVC#
source: jimzimmerman
ARTICLE LINK
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330
QUOTE
So basically if you put the class name
TextboxWatermark on any textbox input
with the title you like to show as the
watermark like this:
<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />
or
<%= Html.TextBox("username", new { #class = "TextboxWatermark", #title = "Must be at least 6 chars" }) %>
What is nice about the second option
is that you get the added benefit of
getting the View Engine to fill out
the value of the textbox if there is
an item in ViewData of the
ViewData.Model that has a var named
'username'.
Use the htmlAttributes parameter with an anonymous type, like tihs:
<%=Html.TextBox("txtName","20", new { #class = "test"}) %>
the helper implementation
public static class LabelExtensioncs
{
public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
{
return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
}
}
the usage in view section
#Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")
the result
Theres no need to use span, because its not dynamic.
Css:
.testClass {
color: #1600d3;
}
View (Index):
#Html.TextBox("expression", "Text to show.", new { #class = "testClass" })
if you need dynamic options you can use for example:
CSS:
.test class{
background: #ffffff;
}
Controller (Index for test):
[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}
View (Index):
<div>
<span>
#Html.TextBox("expression", "Text to show.", new
{ #class = "testClass", #style="color: " +
#ViewBag.vbColor })
</span>
</div>
Hope it helps.
Is it that much more work?