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;" } })
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");
})
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 } })
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" })
How can you add a CSS Class, not explicit inline styling, to a Kendo MVC UI control?
No matter what we've tried we cannot add CSS Classes to Kendo UI HTML helpers.
It only adds its own "k-" class.
You can add an style attribute with explicit width and styling,
but not a class,
.HtmlAttributes(new { #class = "please-dont-hard-code-widths" })
or
new HtmlAttributes(new {new { #class = "please-dont-hard-code-widths" } })
do nothing at all.
** Update, this issue also happens with #Html.EditorFor() when Kendo is part of the project, it won't accept classes though the documentation says it does. We have to use explicit input types like TextBoxFor() which defeats having the class model drive the form types.
The other regular Razor HTML Helpers do it fine, but not the Kendo ones.
It's seems impossible Telerik wouldn't support something this basic for for the display layer.
I too have faced this problem a few times and even went as far as creating my own helpers as well as editor templates but here are two ways I have achieved this in some controls. It does always add its own class but using the below techniques I have managed to inject my own attributes in the generated tags.
Note, I used MVC5.
#Html.EditorFor(m => m.ConfirmEmail, new Dictionary<string, object> { { "class", "form-control" } })
#Html.EditorFor(m => m.MobileNumber, new { htmlAttributes = new { #class = "form-control validateNumericInput", #aria_describedby = "mobile-addon" } })
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");