I would like to autofocus on an editorfor in my application, but I can't seem to do that. I have successfully used autofocus on a textbox, but I would like to use an editorfor to keep my application's look universal.
Any solutions to this would be much appreciated, thank you.
My attempt:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
This s because you are using EditorFor instead of something specific like TextBoxFor.
#Html.TextBoxFor(model => model.Name, new { htmlAttributes = new {
#class = "form-control" }, autofocus="autofocus"})
Or you can do that using jQuery:
<div class="editor-field focus">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
$(function() {
$('.focus :input').focus();
});
Update:
As you know TextBoxFor always creates a textbox with type input, But EditorFor is a little bit smart, it renders markup based on the datatype of the property.
Using .Net Framework 4.5 and MVC 5, this works for me:
#Html.EditorFor(model => model.Description, new {
htmlAttributes = new {
#class = "form-control",
autofocus = true
}
})
You put the autofocus attribute in the wrong spot.
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
Try this instead:
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control", autofocus = "" } })
I've been following this thread and I may have stumbled on an answer to your question about autofocus on EditorFor - this is all Asp.Net 4.5 and MVC 5, not that it matters.
In the Scripts folder I have a jQuery script file:
$(function(){
$('.someclassname').focus();
});
I add the script name to the BundleConfig and render it in the view.
In the view I add the classname to the EditorFor <div class="col-md-10" someclassname">
I then add the type="text" autofocus="autofocus" to the EditorFor's #class. So, new{#class="form-control", type="text", autofocus="autofocus"
That's pretty much it, when the DOM loads the .someclassname field gets the cursor focus...
PS. In fact if you just do (3) it works also...
Related
I have a textbox in a MVC project that prompts a user to enter a date as mmddyyyy. I have the code set up so that the user can only input numbers (ie, no "/"s or "-"s). I need to then convert this data to yyyy-mm-dd to ensure that correct data is being added to the database once the form is submitted.
I realize I will probably need to use DateTime.Parse to do this, but I can't for the life of me figure out how to add it to the following code:
<div class="form-group">
#Html.LabelFor(model => model.Buy2IDExpireDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Buy2IDExpireDate, new { id = "coBuyerIDExpireDate", #class = "form-control" })
#Html.ValidationMessageFor(model => model.Buy2IDExpireDate, "", new { #class = "text-danger" })
</div>
</div>
Would it look something like this?
string str = Date.Parse(Buy2IDExpireDate).ToString("yyyy-MM-dd");
If so where do I put it in the above code, and do I need to write extra code to ensure that the newly formatted date is stored by the database?
You can add value attribute like this:
#Html.TextBoxFor(model => model.Buy2IDExpireDate,
new { #Value = Model.Buy2IDExpireDate.ToString("yyyy-MM-dd") })
I have a text area where users have to write a description. I was wondering how to set a text box so that it is on multiple lines, allowing the user to see what they are writing. What I am looking for is similar to the environment that I am writing this question in.
<div class="form-group">
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
In your model you need to add MultilineText as below:
[DataType(DataType.MultilineText)]
public string Title { get; set; }
Or you code have just changed the EditorFor to TextAreaFor like Below
#Html.TextAreaFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
I'm trying to add a required to my TextAreaFor, but it won't give the error message when i post it. I'm trying to do it on the followinng line:
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
And this is my full code:
#using (Html.BeginForm("_Create", "Comments", FormMethod.Post))
{
#Html.HiddenFor(m => m.ThreadId)
<div class="form-group">
<div class="col-md-10">
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
#Html.ValidationMessageFor(model => model.Content, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
<div>
<input type="submit" value="Post" class="btn btn-default" />
</div>
</div>
}
If anyone wanst to do it with html attribute,
#Html.TextAreaFor(model => model.Content, new { required = "required", htmlAttributes = new { #class = "form-control"} })
You don't need required as a html attribute. It should be a data annotation on the model.
[Required]
public string Content { get; set; }
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
Should be:
#Html.TextAreaFor(model => model.Content, new { #class = "form-control", required = "required" })
Or if you want to explicitly name the parameter your anonymous object is for:
#Html.TextAreaFor(model => model.Content, htmlAttributes: new { #class = "form-control", required = "" } })
But, if you do not use data-annotation, it could be even easier this way:
<textarea id="Content" name="Content" required class="form-control">#Model.Content</textarea>
(id attribute may be optional, depending on your usages.)
Side note: I tend to minimize uses of html helpers methods. For me, MVC is also about letting you control very precisely the browser client code, which is imo better done by writing it yourself. WebForm is, on this subject, about hiding most of browser client code handling.
Using extensively html helpers, built-in validation logic, and so on, may cause you to lose the precise control of how your page should work.
So I decided to make an auction house web application as my first asp.net mvc project and I cannot figure out how to pass a parameter between two views that belong to different controllers. In the first view, Details of AuctionHouseController, I have:
<a class="btn btn-default" href="#Url.Action("Create", "Auctions", new { id = Model.ItemId })">Start Auction ยป</a>
and a URL: http://localhost:2142/AuctionHouse/Details/123
And here is the Details method:
public ActionResult Details(int id)
{
var item = _auctionhDbc.Items.Find(id);
return View(item);
}
I want to pass the id part of the URL - the "123" to the view where the button leads - Create of AuctionsController, where I have:
<div class="form-group">
#Html.LabelFor(model => model.Item.ItemId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Item.ItemId, new { htmlAttributes = new { #class = "form-control", #Value = " " } })
#Html.ValidationMessageFor(model => model.Item.ItemId, "", new { #class = "text-danger" })
</div>
</div>
I want to place the "123" as the default value (#Value) of the Html Editor field. How can I do that?
Assuming you are using strongly typed views, your model for the Create view will already have the value of 123 in ItemID. The problem is, your model is of type Items, yet you are trying to use EditorFor for model.Item.ItemID.
Thus, instead of your line
#Html.EditorFor(model => model.Item.ItemId,
new { htmlAttributes = new { #class = "form-control", #Value = " " } })
if you use
#Html.EditorFor(model => model.ItemId,
new { htmlAttributes = new { #class = "form-control" } })
you will already have passed the value there. Make sure you use strongly typed views by putting:
#model YourNameSpace.Items
in the beginning of your view.
I'm trying to apply a Style to the Editor for an element, but I can't make it work; what am I doing wrong?
#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo,"" ,new Dictionary<string, string> { { "style", "width:500px" } })
Since MVC 5.1, you can pass in custom attributes with using the htmlAttributes as a key:
#Html.EditorFor(model => model.ClienteNuevo,
new { htmlAttributes = new { #class = "form-control" } })
In older MVC versions there is no way to add html attributes with the EditorFor method.
You should create a custom editor template or use Html.TextboxFor istead of EditorFor. You should check these topics topic1, topic2.
You can create own css class and appendd it to your editor:
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "custom-editor" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
EditorFor invokes template views rather than outputting a fixed element, so it doesn't take html attributes as an argument. For something like what you're doing the easiest workaround would be to surround the editor and validation message with another element, and apply the style to that instead:
<div style="width: 500px;">
#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo,"")
</div>
EditorFor does not allow for styling as there are no parameters for additional attributes. The reason for this is because the EditorFor doesn't always generate a single element as it can be overridden. To style a specific type of element you need to use the specific editor you want to use. For instance if the editor is a textbox just use TextBoxFor and apply the styling that way.
#Html.EditorFor(model => model.ClienteNuevo)
#Html.ValidationMessageFor(model => model.ClienteNuevo, "", new { #class = "yourclass" })
I hope you help