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");
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" })
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" });
How can I use Tab Order property for following code:
<td>
#Html.EditorFor(model => model.Cost)
</td>
I tried this:
<td tabindex=1>
#Html.EditorFor(model => model.Cost)
</td>
any suggestions?
You can also specify the same html attribute in the helper itself as follows.
#Html.TextBoxFor(model => model.Cost, new { tabindex = 1 })
As a contrast to #Stuy1974's right answer, if you don't want to leave the EditorFor solution, you're going to have to wire up your own Editor Template.
#ModelType SomeApp.ViewModels.SomeNiftyViewModel
// be sure to include the TabIndex info in the ViewModel
#Html.TextBoxFor(model => model.Cost, new { tabindex = model.TabIndex })
You can also use the ViewData parameter already passed to the editor template directly rather than adding the tab index to the model:
// In the main view
#Html.EditorFor(model => model.Cost, new { TabIndex = 3 })
// In the editor template
#{ int tabIndex = (ViewData["TabIndex"] as int?) ?? 0; }
#Html.TextBoxFor(model => model, new { tabindex = tabIndex })
Simply do this
#Html.EditorFor(model => model.Cost, new { htmlAttributes = new { tabindex = 34 } })
Another option, allowing you to retain the EditorFor, is to set the tab index in javascript after the page has loaded with something like:
var myEditorFor = document.getElementById("MyEditorForId");
if (myEditorFor != null) {
myEditorFor.setAttribute("tabindex","18")
}
Unfortunately #Html.EditorFor method doesn't provide the ability to add HTML attributes. You can add these via a more specific method call. In the above case I'd use -
#Html.TextBoxFor(model => model.Cost, new { tabindex = 1 })