I have an MVC view that is using Bootstrap styles. I want to use "#Html.EditorFor" rather than "#HtmlTextBoxFor". Why doesn't EditorFor work out that it needs to be a textbox and then end up with the same result and TextBoxFor??
My reason for asking is that my next field will be a date and want to use EditorFor and with the DataType data annotation it will display a date picker.
Below is screenshot and view code and the Forename is EditorFor whilst the Surname is (the preferred format) TextBoxFor.
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "control-label" })
#Html.DropDownListFor(m => m.Title, new SelectList((IEnumerable)#ViewData["Titles"]), new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Surname)
#Html.TextBoxFor(m => m.Surname, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateOfBirth, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.DateOfBirth)
#Html.EditorFor(m => m.DateOfBirth, new { #class = "form-control" })
</div>
I am posting this answer as it worked perfectly for me - all thanks to #StephenMuecke. Although tagged as MVC4 (I will remove the tag) I was actually using MVC5 and therefore could pass html attributes:
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { #class = "form-control" })
</div>
becomes:
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { htmlAttributes = new { #class = "form-control" } })
</div>
TextBoxFor accepts an attributes parameter because it always creates <input> tags, and thus, it can add attributes to them.
However, EditorFor can render anything from a single <input> tag, to a fully fledged editor (created by declaring a custom editor, or by passing a complex type to the editor). So, it makes no sense to accept an attributes parameter for this case. If you look at the overloads list for this method in MSDN you'll see that, if you pass an object, that object is treated as "additional ViewData", but never as "attributes". If you look at TextBoxFor docs, you'll see that there are several overloads that accept an attributes parameter.
However, the latest versions of MVC (5.1+) do accept attributes in EditorFor helper. Please, see this SO Q&A: Does Html.EditorFor support more than class in MVC5.1?.
Html.EditorFor(Function(m) m.Forenames, New With {
Key .htmlAttributes = New With { Key .[class] = "form-control" }
})
FYI - according to the Telerik code converter, this is what the VB.NET razor version of the answer looks like (yuck). But, maybe useful for someone else out there.
(tested and works)
I use the following workaround to solve the problem for the moment (until I upgrade to mvc5).
Add this to the end of your _layout.cshtml file:
<script type="text/javascript">
var inputs = $('input, textarea, select')
.not(':input[type=button], :input[type=submit], :input[type=reset]');
inputs.addClass('form-control');
</script>
Related
We tried to use Autocomplete attribute of textbox and dynamic value on name attribute of textbox but unable to disbale autocomplete option on Google Chrome but it work perfectly fine on IE, Firefox.
You can try this way
If the input is inside the form, you should do like this:
<form autocomplete="off">
And the input you should do
<input type="text" id="input_name" autocomplete="none"/>
This is a sample block using Razor
<div class="position-relative form-group">
#Html.LabelFor(m => m.EmailAddress, new { #class = "control-label" })
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", #autocomplete = "off" })
#Html.ValidationMessageFor(m => m.EmailAddress, "", new { #class = "text-danger", #style = "font-style:italic;" })
</div>
Hope this one helps
This the html page that not work the problem with NewspostedDate
<div class="form-group">
#Html.LabelFor(model => model.NewsPostedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewsPostedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewsPostedDate, "", new { #class = "text-danger" })
</div>
</div>
instead of Editorfor you can use TextBoxfor.
try this
#Html.TextBoxFor(m => m.NewsPostedDate, new { #class = "form-control date-picker" })
$('.date-picker').datepicker({ format: "yyyy/mm/dd", autoclose: true })
Note:
Good approach first load you css file , then load javascript/jquery . because user first see you UI , then interact with your UI
Looks like your Editorfor is missing the class "NewsPostedDate" or perhaps you mean to refer directly to the element so it should be:
jQuery('#NewsPostedDate').datetimepicker({ format: 'DD/MM/YYYY' });
Note the # instead of the .
Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.
Now I've added a dropdown list using "#Html.DropdownListFor" and it's square, with a different font colour.
I know I can specify which CSS class to use in the Razor e.g.
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "###########" } })
But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.
Here's a bigger snippet showing a well-styled text field directly above it
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OrderItemType, "", new { #class = "text-danger" })
</div>
</div>
Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?
Thanks
The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:
#Html.DropDownListFor(model => model.OrderItemTypeId,
(SelectList)ViewBag.OrderItemTypes,
new { #class = "form-control etc" })
See Microsoft Docs.
You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.
See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="panel panel-default">
<div class="panel-body">
#using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {
#* State selection dropdown *#
<div class="form-group">
#Html.LabelFor(m => m.State)
#Html.DropDownListFor(m => m.State, // Store selected value in Model.State
// This argument needs some explanation - here we take a Distionary<string, string>
// and turn it into an instance of SelectList, see blog post for more details
new SelectList(Model.States, "Key", "Value"),
// Text for the first 'default' option
"- Please select your state -",
// A class name to put on the "<select>"
new { #class = "form-control" }
)
#Html.ValidationMessageFor(m => m.State)
</div>
<button type="submit" class="btn btn-primary">Update</button>
}
</div>
</div>
</div>
</div>
I have 3 textboxes ...one for day, second for month and third for year. I want to use mvc validation to check if one of this field is empty and then show *. Is it possible on button submit display just one error message if one of those fields are empty?
<div class="form-group">
<label for="dateofbirth" class="control-label col-lg-5">
#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("BIRTHDATE")):
#Html.ValidationMessage("*")
</label>
<div class="col-lg-2">
#Html.TextBoxFor(m => m.Register.Day, new { id = "day_birthdate", #class = "form-control" })
</div>
<div class="col-lg-2">
#Html.TextBoxFor(m => m.Register.Month, new { id = "month_birthdate", #class = "form-control" })
</div>
<div class="col-lg-3">
#Html.TextBoxFor(m => m.Register.Year, new { id = "year_birthdate", #class = "form-control" })
</div>
You can add the #ValidationMessageFor for all fields under same label.
<label for="dateofbirth" class="control-label col-lg-5">
#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("BIRTHDATE"))
:
#Html.ValidationMessageFor(m => m.Register.Day,"", new { #class = "text-danger" })
#Html.ValidationMessageFor(m => m.Register.Month,"", new { #class = "text-danger" })
#Html.ValidationMessageFor(m => m.Register.Year,"", new { #class = "text-danger" })
</label>
In your module class on the property attached with textbox provide attribute [Required].
than you can use of ValidationSummary which is already available in Asp.net MVC.
if you want to display message just beside file than do use ValidationMessageFor
Check : ASP.NET MVC Client Side Validation
class property definition for this
[Required(ErrorMessage = "*")]
public string Name { get; set; }
Example
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
I have the following inside my asp.net mvc web application :-
<div><span class="f">Data Center Name</span> #Html.EditorFor(model => model.Switch.TMSRack.DataCenter.Name, new { disabled = "disabled" })</div>
but the field will not be disabled ,, can anyone adivce please?
THanks
#Html.EditorFor() does not have an overload to support htmlAttributes. You could try #Html.TextBoxFor()
#Html.TextBoxFor(model => model.propertyName, new {disabled= "disabled" })
If you are using system key words such as class in htmlAttributes please add # before the attribute name.
Ex:
#Html.TextBoxFor(model => model.propertyName, new {#class = "disabledClass" })
Using MVC 5, #Html.EditorFor() supports htmlAttributes
#Html.EditorFor(model => model.x, new { htmlAttributes = new { #class = "form-control", #disabled = "disabled" } })
The above example shows how you can add a class and also the disabled attribute
Another alternative: surround the EditorFor with a div or a span with a certain id, and then use a bit of jquery/js:
<span id="editors">
#Html.EditorFor(x => x.ViewModelProperty)
</span>
<!-- Disable above editors. EditorFor doesn't allow html attributes unfortunately. -->
<script type="text/javascript">
$(function () { $('#editors :input').attr("disabled", true); });
</script>
For those that lose your text value : Disabled fields does not pass its value to the controller. Instead, use #readonly = "readonly"
#Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { #readonly = "readonly", #class = "form-control"} })
If you lose information when you accept the Edit-changes ...
You could try
<h3>#Model.x</h3>
#Html.HiddenFor(model => model.x, new { htmlAttributes = new { #class = "form-control" } })
You can also use EditorFor()
eg:
#Html.EditorFor(model => model.Nama, new { htmlAttributes = new { #disabled ="true", #class = "form-control" } })