I need to use the required attribute, so the field shoud not be empty
<input type="text" class="form-control" id="inputName" required>
in the razor view, more specifically in this example
#Html.EditorFor(model => model.exclure.libelle, new { htmlAttributes = new { #class = "form-control" } })
You can specify in htmlAttributes with TextBoxFor() this way:
#Html.TextBoxFor(m=>m.exclure.libelle,new{ #class = "form-control",required="required" })
Related
I am completely new to Asp.Net (junior dev). I'm working on a project that requires a customer to enter data to be stored in a database. When I created the template view for the model, I get a EditorFor() textbox for the customer to enter data. Here's what it looked like:
<div class="form-group">
#Html.LabelFor(model => model.ApplicantState, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ApplicantState, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ApplicantState, "", new { #class = "text-danger" })
</div>
</div>
This works great, except I want the user to choose from a drop-down list of options rather than enter the data themselves. Here's what I want to do if I were doing the dropdown list with straight HTML:
<div class="form-group">
#Html.LabelFor(model => model.ApplicantState, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<select id="applicantState">
<option disabled selected value> -- Please Select -- </option>
<option value="OH">Ohio</option>
<option value="CA">California</option>
<option value="TX">Texas</option>
</select>
</div>
</div>
I need to get this data to store in the ApplicantState field in the model. The senior developer running this project does NOT want me to add code to the model or controller to do this; he wants me to do the drop-down list in the view only.
Here's what I have...
<div class="form-group">
#Html.LabelFor(model => model.ApplicantState, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.ApplicantState, new List<SelectListItem> {
new SelectListItem { Value = "" , Text = " -- Please Select -- " },
new SelectListItem { Value = "OH", Text = "Ohio"},
new SelectListItem { Value = "CA", Text = "California"},
new SelectListItem { Value = "TX", Text = "Texas"}
})
</div>
</div>
The code is compiling and I'm not getting any errors. For anyone who's done this before, does this look correct? Will the dropdown list option be stored in the ApplicantState field? I have no confidence in what I've written. I've only ever done a dropdown list from a MVC controller. I'm not yet able to test the code by submitting a fake application. The view is popping up correctly though. Any advice would be appreciated. Thanks!
Because of this:
The senior developer running this project does NOT want me to add code to the model or controller to do this; he wants me to do the drop-down list in the view only.
You need to instantiate at the top of your Razor view this dictionary:
var dictionary = new Dictionary<string, string>
{
{ "OH", "Ohio"},
{ "CA", "California"},
{ "TX", "Texas"}
};
Then replace your razor code with this:
#Html.DropDownListFor(m => m.ApplicantState, dictionary.Select(d => new SelectListItem { Value = d.Key, Text = d.Value }).ToList(), " -- Please Select -- ");
This is clean and should work. After that you need to tell to your co-worker that the dictionary which keep the data should belong to your model and the code should go there.
This question already has answers here:
Hyphenated html attributes with asp.net mvc
(2 answers)
Closed 6 years ago.
I have a basic password strength indicator.
<input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" />
<div class="left" id="myDisplayElement1"></div>
I have the JS Script which takes care of all the logic. And the data-display div shows the message whether the password is weak or strong. But I want to convert the above code into Razor. Below is what I have till now.
<div class="form-group">
#Html.LabelFor(model => model.NewPassword, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" } })
<div class="left" id="myDisplayElement1"></div>
#Html.ValidationMessageFor(model => model.NewPassword, "", new { #class = "text-danger" })
</div>
</div>
Question: Everything is working fine but I am not able to put data-display attribute in razor. Where do I need to place it. But as the data-display is not set, I am not able to display the user its password strength as the div.
I want to be able to do something like below
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" , data-display = "myDisplayElement1"} })
But data-display gives me error.
Error
Cannot resolve symbol data the error comes at the place where I have added data-display.
Hyphenation is not valid within an anonymous object. However, knowing that it would be necessary at times to add attributes with hyphenation, the Razor helpers will auto replace underscores with hyphens in attribute names. As a result, you can accomplish what you need by using data_display rather than data-display.
I am using the following EditorTemplate:
<div class="form-group">
#Html.LabelFor(m => m, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)
#Html.ValidationMessageFor(m => m, null, new { #class = "help-block" })
</div>
</div>
When attempting to save the form with a deliberate error, the page refreshes and correctly shows the validation error but the label completely disappears. It is not hidden it is completely gone from the html source.
Here is my EditorFor:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
Is this a bug, or does anyone know what might be causing this?
This problem has been fixed with the latest asp.net core.
See here:
https://github.com/aspnet/Mvc/issues/2778
I created an Edit page in MVC and decided I did not want the ID to be editable, but I do want it to look like the rest, just greyed out preferably.
Here is my property:
<div class="form-group">
#Html.LabelFor(model => model.EvpId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
</div>
After doing some reading everyone seems to suggest using the #Html.DisplayFor which makes sense, even though it does not look like the rest.
However when swapping the EditorFor for the DisplayFor I notice that the label is not on the same line:
What is the simple way of having this on the same line as the corresponding label, I am using the standard out of the box bootstrap CSS.
View Source on page:
<div class="form-group">
<label class="control-label col-md-2" for="EvpId">Id</label>
<div class="col-md-10">
2
<span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
</div>
</div>
I have had the same issue.
Jasen answer did not help, because span does not put an element into the same horizontal line with label, but his later comment with the link to bootstrap doc solved the problem, we should use p tag instead of span.
So my final solution was:
<p class="form-control-static">#Html.DisplayFor(model => model.Contractor.Name) </p>
Thanks to Jasen!
When you use #Html.DisplayFor() the helper is selecting markup based on the type. Here it chose to output a bare string and this breaks the Bootstrap form-horizontal styling.
<div class="col-md-10">
2 <!-- no surrounding tags for EvpId value -->
...
</div>
The easiest thing to do is just use plain html to insert your own tags
<div class="col-md-10">
<span class="form-control-static">#Model.EvpId</span>
...
</div>
If you do this a lot or you have much more markup you can create a custom helper extension. This is a very simple example:
public static class HtmlHelperExtensions
{
public static HtmlString IdSpan(this HtmlHelper helper, string id)
{
return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
}
}
Usage:
<div class="col-md-10">
#Html.Idspan(Model.EvpId)
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
Using Jasen's answer I was able to achieve what I wanted by altering the width of the <span> however this seemed abit messy:
<span class="form-control" style="width:280px;">#Model.EvpId</span>
The ultimate answer to my question was this as it is what I originally was looking for:
#Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
Hope this helps someone.
Instead of wrapping in a P tag or SPAN I just put the class directly into the exiting DIV, and that worked too.
<div class="col-md-10 form-control-static">
...
</div>
I would like the validation error text to appear to the right form controls, but instead it appears under. In Bootstrap 2 there was a style called help-inline that appeared to do this, but it has been removed from version 3.
The solution I have right now is ok -- at medium and large resolution it looks the way I want it:
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.TextBoxFor(model => model.FirstName, htmlAttributes: new { #class = "form-control", maxlength = "40" })
</div>
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger col-md-6 form-control-static" })
</div>
This produces:
The problem is that when the screen width is reduced, the ValidationMessage span takes up an extra line even when hidden -- which grows the height of the form. Which you can see if you look at the spacing after the first and last names which use the above syntax, opposed to City which uses the more common syntax:
Is there way of updating the more common syntax of:
<div class="form-group">
#Html.LabelFor(model => model.City, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
</div>
Here is the rendered HTML from the example above:
<div class="form-group">
<label class="control-label col-md-2" for="Address_City">City</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Address_City" name="Address.City" type="text" value="RCQXNEZMTBSURAX" />
<span class="field-validation-valid text-danger" data-valmsg-for="Address.City" data-valmsg-replace="true"></span>
</div>
</div>
So there a way to have the validation appear to the right of the control (inline) without creating that extra line at reduced width?