I am working on a site in ASP.NET MVC and I have multiple Html.EditorFor form textboxes. The simple user friendly action I would like to do is on page load, the first of the textboxes on my view page is "active" or the user does not have to click on the textbox to start typing. There are pages like the login or other pages with only these forms where having to click to start typing is not intuitive and breaks the users experience.
Example form:
#Html.EditorFor(model => model.MaxBid, new { htmlAttributes = new { #class = "form-control" } })
I am not finding any documentation for how to accomplish this, but it seems like it could be a simple fix. Thank you for any and all help.
Add autofocus to the elment.
#Html.EditorFor(model => model.MaxBid, new { htmlAttributes = new { #class = "form-control", autofocus = true } })
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");
})
Here's the short TL;DR version:
I have an onchange event against a select list that stops firing
Is there any issue using JQuery against an element id i.e. $("#Customer_ID").change, if that element is inside a jqueryui popup that is populated from a partial view. Further to this I have two different popups populated by different partial views that share the same $("#Customer_ID").change javascript
I have a page with two divs for jquery ui popups
When I click in a cell in jqgrid, I popup the appropriate dialog (Edit or New)
The popups are in turn populated by a partial view from a controller
This works fine
I have three levels of cascading drop downs in these popups. Most of the time they work correctly. After a few opens and closes of the popups however the dynamic drop downs stop working
At this point the dynamic drop down jscript is being loaded OK but it seems the change event is not being fired.
I suspect it's because I have two popups with identically named controls?
Anyway here is some abridged code fragments
_Layout.cshtml
Has a reference to the js that attaches all the JQueryui stuff
<!-- Logic to setup edit,new,delete popups -->
<script src="~/Scripts/Layout.js" type="text/javascript"></script>
Layout.js
Contains code to set up the edit popup and some other things. Here's just the part for the create popup:
$("#dialog-create").dialog({
title: 'New',
autoOpen: false,
resizable: true,
width: 800,
height: 440, // this allows the dialog to correctly estimate the middle of the viewport
show: { effect: 'fade', duration: 100 },
modal: true,
open: function (event, ui) {
if (urlNew) $(this).load(urlNew);
},
});
TasksWeeklyClient.cshtml
This actually has a jqGrid on it. Clicking on a cell pops up, for example the create popup.
<!-- edit, new, delete popups -->
<div id="dialog-edit" style="display: none; z-index: 2000;">
</div>
<div id="dialog-create" style="display: none; z-index: 2001;">
</div>
Create.cshtml
This is fed by a controller that returns a partial view. This is where the problems start. The Customer_ID drop down cascades to the CustomerProject_ID drop down. After a few closes and opens it stops working though. This also has a reference to TasksDialogs.js which has all the cascading drop down stuff (The cascading drop down is the subject of another question here: cascading drop downs repeatedly populated
(this code is found in tasks view folder)
<div class="form-group">
#Html.LabelFor(model => model.Customer_ID, "Customer & Project", htmlAttributes: new { #class = "control-label col-md-6 text-md-left" })
<div class="col-md-12">
#Html.DropDownList("Customer_ID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Customer_ID, "", new { #class = "text-danger" })
</div>
<div class="col-md-12">
#Html.DropDownList("CustomerProject_ID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CustomerProject_ID, "", new { #class = "text-danger" })
</div>
TaskDialogs.js
Finally we have this script. Normally this works but after a few popup opens and closes, CustomerID.change no longer appears in the console.
You can see I've tried two different ways of attaching the change event. Both exhibit the same symptom.
$(document).ready(function () {
console.log("TasksDialog.js ready");
console.log($("#Customer_ID"));
//When Customer is changed reload Project
// Project function reloads project tasks
$("#Customer_ID").on("change",
// $("#Customer_ID").change(
function () {
console.log("CustomerID.change");
// refresh projects
refreshProjectFromClient();
}
);
I don't know that I need to post controller code. That part all works fine.
In the javascript that manages the dynamic drop downs I was using
$("#Customer_ID")
to refer to fields on two different dialogs.
Turns out I need to use these instead, to specifically refer to the field I want:
$(div#dialog-create #Customer_ID")
$(div#dialog-edit #Customer_ID")
I think possibly the change event is not being attached properly for the same reason. For now I got around it by hard coding the change into the control in the cshtml view like this:
#Html.DropDownList("Customer_ID", null,
htmlAttributes:
new {
#class = "form-control",
#onchange= "refreshProjectFromClient()"
})
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 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");
Can anyone recommend a free color picker web control for asp.net webforms ?
Thanks
It's not supported by every browser yet, but you could use the HTML 5 color input:
<input type="color" name="favcolor" value="#ff0000">
Use any number of jQuery plugins to populate a textbox. Here's two:
Farbtastic
ColorPicker
This one is nice: http://www.karpach.com/ColorPickerDemo.aspx
#Html.EditorFor(model => model.Color, new { htmlAttributes = new { #class = "form-control", required = "required", type = "color", style = "width:40px;padding:0;" } })