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
Related
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 am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
</div>
Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:
#Html.TextBoxFor(model => model.CustomerJoinDate, new {
#class = "form-control",
type = "date"
})
If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:
#model DateTime
#Html.TextBoxFor(
m => m,
"{0:MM/dd/yyyy}",
new { #class = "form-control date", type = "date" })
Then replace your Razor bindings with:
#Html.EditorFor(model => model.CustomerJoinDate)
and so on, for each date field which should use this template.
This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).
Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).
MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
See Darin's answer regarding input type="date" via TextBoxFor
"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"
At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)
Example:
<p>
See if you get a datepicker in Firefox (as of v40.0.2):
<br />
<input type="date" name="foo" />
</p>
Hth...
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>
If I put a disabled='disabled' propertie in a TextBox with Razor, when I submit my form, the value of this TextBox isn't sent to the controller.
#using (Html.BeginForm("Principal", "Home")) {
<div class="form-group">
#Html.LabelFor(m => m.Fornecedor, new { #class = "col-sm-2 control-label" })
<div class="col-sm-9">
#Html.TextBox("Fornecedor", Model.Fornecedor, new { #class = "form-control", type = "text", disabled = "disabled" })
</div>
</div>
}
When submitted, the Model.Fornecedor value in controller is null, but without the disabled propertie, the value return correctlly.
Can someone help me, to put a TextBox field disabled but pass his default value to controller when the form is submitted ?