When I look at an older MVC project, the following code would render a textbox with the propriate styling:
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
But now that JQueryUI is being used instead of Bootstrap, I had to manually add Bootstrap again and added the same line to my code, but the class won't render.
The only way to make it work it seems is using the:
#Html.TextBoxFor(model => model.License, new { #class = "form-control" })
HTML helper.
Is there a big difference between EditorFor and TextBoxFor and if it is important to use EditorFor instead of TextBoxFor, how could I add the Bootstrap class form-control to the rendered input by the EditorFor HTML helper? And what is causing this situation that the class won't be rendered on the input element with the HTML helper?
TextBoxFor: Is always render like an input textbox irrespective datatype of the property which is getting bind with the control. It creates a text input like this : <input type="text" />
EditorFor: It renders HTML markup based on the datatype of the property.
Both will be generate the same markup.
You can also see explanations in this post: https://stackoverflow.com/a/4826185/3401842
Related
Am new to MVC, am am trying to apply CSS styles to Html.DisplayFor helper inside my template file: Shared>>EditorTemplate>>Contacts.cshtml. Below is my code:
#model People.Contacts
<div>
#Html.DisplayNameFor(m => m.Name) <span class="myclass">#Html.DisplayFor(m => m.FirstName) #Html.DisplayFor(m => m.LastName)</span></div>
and my css class outside this template looks like this:
.myclass{font:italic bold;}
Html.DisplayFor does not support passing HTML attributes, including class/style. At it's most basic it merely renders the value, without any HTML, and with editor/display templates, it just renders whatever's in the template.
First, if you have EditorTemplates\Contacts.cshtml, that will actually never be used by DisplayFor. For DisplayFor you need a separate template in Views\Shared\DisplayTemplates. As its name implies EditorTemplates is used by EditorFor.
Either DisplayFor or EditorFor are basically the same as calling Html.Partial. There's just some additional logic to deal with a specific model property and look by default in DisplayTemplates/EditorTemplates for the view. That said, you can pass additional data to them the same as you would with a partial, via ViewData.
For example, if you were to call #Html.DisplayFor(m => m.FirstName, new { #class = "myclass" }), then nothing would happen by default, but you would have a value of "myclass" in ViewData["class"]. You could then use that to modify a part of your template. For example:
Views\Shared\DisplayTemplates\Contacts.cshtml
<span #(ViewData["class"] != null ? "class='" + ViewData["class"] + "'" : string.Empty)>
#ViewData.TemplateInfo.FormattedModelValue
</span>
That checks to see if ViewData["class"] has a value, and if so, adds a class attribute with that value to the span.
As a different solutions you can use Html.DisplayFor in <Label> tag
<label class="control-label"> #Html.DisplayNameFor(p => p.HeadLine)</label>
I need to apply Bootstrap styling to a Razor #Html.DropDownList.
I have applied the form-control class to the control:
#Html.DropDownList("FacilityID", null, string.Empty, new { #class = "form-control" })
This correctly displays the select list using Bootstrap stylings. The problem is that the selectable, sub-items on of the list are not styled.
In viewing the generated HTML source, the rendered options are un-styled:
<option value="1">Some Option</option>
Is there anyway to get Bootstrap to style the entire dropdown correctly in ASP.Net MVC5 Razor view?
If it helps anyone ... I ended up going with the bootstrap-select component.
The Razor syntax is:
#Html.DropDownList("FacilityID", null, string.Empty, new { #class = "selectpicker" })
I didn't like the default gradient applied by Bootstrap to the button element this component generates, so I modified this in CSS to make it look like a regular Bootstrap form-control styled element:
.bootstrap-select > .btn {
background-image: none;
}
It's really simple just add the following to the end of the Razor DropDown:
,new { #class = "form-control" } )
I have in my edit form displayed: Username, TimeZone, Customer...
I don't whant to be able to edit username, just display his name.
This code I use in View:
<label>Username </label>
<div class="editor-field">
#Html.EditorFor(model => model.username)
</div>
So what to put instead EditorFor, that will display username (just for reading, not for editing).
Why not just use #Html.DisplayFor instead? This will just display the username as a label. Or, if you wish to use #Html.EditorFor or #Html.EditorForModel, you can create a custom editor template for your username property, and in the editor template, just display the content instead of enabling editing.
Also, I would recomment you exclude this property during model binding by using [Bind(Exclude="username")] with your model parameter in your POST action method, to protect from injection attacks. More about this here.
find solution:
#Html.TextBoxFor(model => model.username, new {disabled = "disabled", #readonly = "readonly" })
Hi I want to make my textbox's width longer.
The view that is generated, uses #Html.EditorFor which I noticed I can't modify nor I can add css style to it.
So I checked, TextAreFor and it works but it creates a scrollbar since it is a textarea
e.g.
#Html.TextAreaFor(model => model.Name, new { cols=50, #rows=1 })
How would I remove the scrollbar? so it looks like it is a textbox? or is there another way to generate a textbox with a custom width?
Thanks,
You can use TextBoxFor HTML Helper method for generating a input element with a custom class like this
#Html.TextBoxFor(m => m.Name, new { #class="yourCustomClass" })
and now you can define your custom styles in this class
.yourCustomClass
{
width:340px;
}
Use a CSS class with the following statement:
overflow:hidden
Maybe
#Html.TextBoxFor(m => m.Name, new { #style="width:150px; height:50px; overflow:hidden;" })
Asp.net Mvc3 ads some custom attributes like "data-val-required" on input elements to perform validation. I know all theory behind this, how it works.
What i want to know is :
When I create my form inside " #using (Html.BeginForm())" it produces custom attributes, but it doesn't create those attributes when i place my form between plain "<form>" tag.
below is a demo i have created to demonstrate what iam saying
Razor Code, form inside BefingForm()
#using (Html.BeginForm()) {
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
}
generated Html contains "data-val-required" as attribute shown below
<input type="text" value="" data-val-required="The Email Address field is required." data-val-email="my message">
Razor Code Form inside pure Html Tag
<form action="/Account/Register" method="post">
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
</form>
generated Html doesnt contain "data-val-required" attribute shown below
<input type="text" value="" gtbfieldid="44">
My question is how can i ask MVC to add those attributes even form is placed in side pure html tags
I believe BeginForm method internally assigns a formcontext object to viewCotnext's property FormContext. If you do not want to use plain html form tags you have to do it manually like
<%
this.ViewContext.FormContext = new FormContext();
%>
and in razor it would probably be
#{
this.ViewContext.FormContext = new FormContext();
}
Problem here is that internally Html.BeginForm is flagged by Html.EnableClientValidation() to create FormContext that will store client-side validation metadata. Now, any HTML helper method that renders validation message also registers appropriate client-side validation metadata in FormContext. The result is what you get if you use helper. However, if you try to use HTML syntax and not helpers, the FormContext is never registered and therefore your validation is never added.
Regards,
Huske