I'm trying to incorporate a modal for a user creation menu that has 15 mandatory
sign up boxes that are displayed from the model to the UI using their model properties through the
#Html.LabelFor(model => model.Address2, htmlAttributes: new { #class = "control-label col-md-2" })
command. I want to add a mouse over modal to the fields so the user knows the field is mandatory to fill out before missing the field and getting the validation errors if the boxes are left empty. I want to use something like this but I don't know how to incorporate it into the #html label assignment.
address2
You just need to add the relevant data attributes needed to enable popover. The second parameter of LabelFor helper method accepts an annonymous object for the html attributes. Make sure you pass the data attributes there.
#Html.LabelFor(model => model.Address2, new { #class = "control-label col-md-2",
data_toggle = "popover",
data_placement = "left",
data_trigger = "hover",
title = "Address2 is mandatory" })
One thing to remember is, to build the markup for data attribute, you need to replace - with _ when passing the htmlAttributes to the helper method, that means, to get the output "data-toggle", you should pass "data_toggle"
Also make sure that you have enabled the popover functionality by calling the popover() method on the element(s)
$(function () {
$('[data-toggle="popover"]').popover()
});
<div class="form-group">
#Html.LabelFor(model => model.Address2, htmlAttributes: new {#class ="control-label col-md-2",
data_toogle= "popover",
data_placement = "right",
data_trigger = "hover",
title = "Address2 is mandatory"
})
<div class="col-md-10">
#Html.EditorFor(model => model.Address2)
#Html.ValidationMessageFor(model => model.Address2)
</div>
</div>
The above code is just displaying the control-label but it doesn't have the popover functionality. The script is the first script after the body and is exactly the way that was instructed.
Related
i am creating a simple crud application in which one is a admin part and other is a dashboard for user in which i also have a edit part but when i click on edit button all data show in text boxis but the image is not when it just show on type text box but not in type file please help me thank in advance..
<div class="form-group">
#Html.LabelFor(model => model.imageURL, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.imageURL, new { htmlAttributes = new {Type="file"} })
</div>
</div>
My goal is to create many similar views that will differ only in the list of fields that they present. For example, many Create views for different models and different sets of fields. The following is a snippet from a scaffolded Create.cshtml page:
<div class="form-group">
#Html.LabelFor(model => model.NameText, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameText, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameText, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NameDefinition, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameDefinition, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameDefinition, "", new { #class = "text-danger" })
</div>
</div>
<div class ="form-group">
#Html.LabelFor(model => model.NameComment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameComment, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameComment, "", new { #class = "text-danger" })
</div>
</div>
My understanding is that Partial Views can add above, below and among the <div class="form-group"> . . . </div> code blocks. But I am not aware of its capability to consume a reference to a model attribute (e.g., NameText) and then to wrap it with the code block.
Also my understanding is that the #Helper directive was removed from Razor (MVC 6) and it was not given any simple replacement.
I have already placed both the part of code that precede the above snippet and the part of code that follows it into a single partial view. With a little trick the two parts of code are merged around the above snippet, then everything is sent to the browser. But I need more than that. How can I avoid also the repetition of code in the above snippet?
What I would like to have:
Many similar views that would differ only regarding to the list of fields
Strong typing
Single point of maintenance for the code that is common for many views
And as a side note: how should I had to search in order to find the answer myself?
A blog by Peter Vogel, Building a Useful HTML Helper for ASP.NET MVC Views provides just what I was looking for.
I am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
</div>
Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:
#Html.TextBoxFor(model => model.CustomerJoinDate, new {
#class = "form-control",
type = "date"
})
If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:
#model DateTime
#Html.TextBoxFor(
m => m,
"{0:MM/dd/yyyy}",
new { #class = "form-control date", type = "date" })
Then replace your Razor bindings with:
#Html.EditorFor(model => model.CustomerJoinDate)
and so on, for each date field which should use this template.
This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).
Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).
MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
See Darin's answer regarding input type="date" via TextBoxFor
"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"
At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)
Example:
<p>
See if you get a datepicker in Firefox (as of v40.0.2):
<br />
<input type="date" name="foo" />
</p>
Hth...
Hi I am new to MVC and I have an input box where a user must enter a date. For some reason my date time picker is not displaying and I have to manually type in the date. I have declared all script files in my layout page. Am I missing something?
This is my display
This is my code for my view
<div class="form-group">
#Html.LabelFor(model => model.order_preffered_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.order_preffered_date, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.order_preffered_date, "", new { #class = "text-danger" })
</div>
</div>
I'm assuming you have an editor template set up for whatever type model.order_preffered_date is (DateTime probably) - Views/Shared/EditorTemplates/DateTime.cshtml - that contains your datepicker markup?
(BTW it's 'preferred', not 'preffered' - sorry to be pedantic but Thrupps will thank you :) )
Follow-up: If you don't want to use a specific editor template of your own, then ensure it's removed (so the default is used) and then the following checklist should sort you out:
Bootstrap datepicker CSS & JS file declared on the page (you've already mentioned you've done this - I assume jQuery is already present)
The datepicker element is initialised in the document.ready function somewhere, e.g.
$(function() {
...
$('.datepicker').datepicker();
...
});
If this is still not helping, then ensure your model property is decorated appropriately with DataType:
[DataType(DataType.Date)]
public DateTime order_preffered_date {get;set;}
The code below will only accept the colors contained in the model. How can it allow for the user to enter one that is not listed in the model ?
<div class="form-group input-group-sm">
#Html.LabelFor(m => m.CarColor, new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.DropDownListFor(m => m.CarColor, ViewBag.CarColorList as SelectList })
</div>
</div>
The way that I would do it would to be to use Select2. Select2 is basically an awesome drop down list. The 'Loading Data' example shows you where to start.