I am using Html.TextBoxFor to set and display dates from Model. They work fine when setting the values, however when I retrieve values from the database, they do not display the dates:
Here is my HTML:
#Html.TextBoxFor(x=>x.effectiveDate, "Select Effective Date", new {#class="date form-control", id= "reqEffectiveDate" })
If I switch to #Html.EditorFor, the dates display, but the element no longer displays like the other "form-control" elements on the page, and clicking in the box no longer displays the datepicker:
EditorFor doesn't apply any CSS classes by default, unless you have defined a custom editor template.
You need to pass a collection of HTML attributes to the editor:
#Html.EditorFor(x => x.effectiveDate, new { htmlAttributes = new { #class = "date form-control", id = "reqEffectiveDate" } })
Related
I am trying to remove google autocomplete(google showing previously entered data) on an HTML editorfor, but I have not yet found the correct solution.
I am creating an asp.Net Mvc5 app.
One solution I have seen is to add a name using the Guid generator.
I have tried adding this to Html editorFor which helped remove googles suggestions, however, any data that I now enter into the HTML editorfor is not saved when I post the data back to the database.
I tried also adding autocomplete = "new- password", to the HTML editor for but it has not helped to remove google suggestions
What is wrong with the following?
#Html.EditorFor(model => model.renovationDetail.Notes, new {
htmlAttributes = new { #class = "form-control", Name =
Guid.NewGuid().ToString(), autocomplete = "new- password" } })
Try it.
#Html.EditorFor(model => model.renovationDetail.Notes, new {
htmlAttributes = new { #class = "form-control", Name =
Guid.NewGuid().ToString(), autocomplete = "off" } })
If it is not working then You can disable it via Javascript. Try it
$(document).ready(function() {
$("input:text,form").attr("autocomplete","off");
})
So I have two cases that work independantly.
If I know I have model data in the dropdown, I use this code.
#Html.DropDownListFor(model => model.CarID, (SelectList)ViewBag.Cars, htmlAttributes: new { #class = "form-control" })
HOWEVER, the problem with this, if CarID is null the first item on the list will be the pre selected in the dropdown.
And in another form, I use this one:
#Html.DropDownListFor(model => model.CarID, "--Select a Car--", (SelectList)ViewBag.Cars, htmlAttributes: new { #class = "form-control" })
My Controller has this to provide the view data:
ViewBag.Cars = new SelectList(db.Units, "CarID", "Name", model.CarID);
Is there ONE of these that I can use where it will have a placeholder ONLY if model data is not present to fill the spot?
In your second approach, you are using the helper method incorrectly,
It should be
#Html.DropDownListFor(model => model.CarID,(SelectList)ViewBag.Cars,
"Select one", new { #class = "form-control" })
This will render the dropdown with a "Select one" option as the first (and default item), if nothing is pre selected (model.CarID is null). If Model.CarID has a valid value, It will select the corresponding option.
If you absolutely want to remove the "Select one" when Model.CarID is not null, you can write some javascript which executes on the document load (jQuery document ready :) ) to check the selected option and remove it as needed.
I am trying to figure out why Chrome is not rendering my drop down list correctly.
However, it renders correctly in IE
This is the line of code that is displaying this list
#Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { #class = "form-control", size = "18px" })
I am using the default Boostrap.css files provided by starting a new project in Visual Studio 2013. Any idea how to get this to render correctly?
You creating invalid html, and there is no guarantee how various browsers (or even versions of the same browser) will handle invalid html.
Your DropDownListFor() method is adding a size attribute which expects an integer value so size="18px" is invalid and it would need to be size="18". However the size attribute defines how many items to display in a multiple select, so since you do not want a multiple select, just remove the attribute. Your code should be
#Html.DropDownListFor(m => m.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { #class = "form-control" })
Side note: Your new SelectList(Model.CountryList, "Value", "Text") code suggest that CountryList is already IEnumerable<SelectListItem>. If that is the case, its pointless extra overhead to be creating a new SelectList from an existing SelectList so your code should be
#Html.DropDownListFor(m => m.CountryID, Model.CountryList, new { #class = "form-control" })
You need to add htmlAttributes to set your class in your razor. So change your code to :
#Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), htmlAttributes:new { #class = "form-control", size = "18px" })
I'm a server side guy trying to teach myself a bit of CSS, Javascript, jQuery etc. I have written a little test project that loads up a model and displays the values in simple text boxes. Works OK, as you can see:
But of course, I want to display those dates appropriately. So let me change those input types to "date". Here's the Razor code:
#Html.TextBoxFor(m => m.Date, new { #type="date", #id="ondate" })
Well, that worked.... sort of. I mean, it now displays as a date picker... but it's no longer displaying the model's date!
What am I doing wrong?
The type="date" attribute renders the browsers HTML5 datepicker. In order for this to work correctly, the format needs to be yyyy-MM-dd (ISO format), so it needs to be
#Html.TextBoxFor(m => m.Date, "{0:yyyy-MM-dd}", new { #type="date" })
Alternatively you can set data attributes on the property
[DataType(DataType.DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime Date { get; set; }
and use
#Html.EditorFor(m => m.Date)
which adds the type="date" attribute and uses the correct format.
Side notes:
The HTML5 datepicker is only supported in recent versions of Chrome
Using EditorFor() (in MVC-4) will not allow you to set the id
attribute, but its not clear why you would need to change the
default id="Date" to id="ondate"
Try this:
<%= Html.TextBoxFor(m => m.Date, new { #type = "date", #id = "ondate", #value = Model.Date.ToString("mm/dd/yyyy") })%>
I have a razor (cshtml) file with a dropdownlistfor:
#Html.DropDownListFor(model => model.x_nme, (SelectList) ViewData["Y"]);
The SelectList is formed in the controller as:
var = new SelectList(xList, "id", "x_nme", current.id);
ViewData["Y"] = y_var;
I want the model to bind to the "x_nme" attribute, which displays correctly in the dropdown, but instead it binds to the id attribute.
I need the id attribute as this dropdown fills several fields in the form using javascript/ajax/jquery and I could as an alternative bind to a hidden field to get the name correct.
I was wondering if there is a way to directly bind the model => model.x_nme to the text in the drop-down instead of the underlying id w/o having to have a hidden field.
Thanks in advance.
ViewData["Y"] = new SelectList(xList, "Text", "Text");
Then there is only text on the dropdown, so it will be selected!
This actually works!