I using bootstrap with MVC and Im trying to use validation but I get a strange problem. When I open up the form with the bootstrap stying, The text inputs are already outlined in red and the validation message is showing BEFORE ive actually typed anything into the textbox, can anyone tell me how to avoid this ? heres the html
<div class="form-group has-feedback has-error">
<div class="col-md-4">
#Html.LabelFor(model => model.Contact.LastName, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-6">
#Html.TextBoxFor(model => model.Contact.LastName, new { #class = "form-control", #placeholder = "Last Name" })
#Html.ValidationMessageFor(model => model.Contact.LastName, "You must include a last name.", new { #class = "text-danger" })
</div>
</div>
Your Syntax:
#Html.ValidationMessageFor(model => model.Contact.LastName, "You must include a last name.", new { #class = "text-danger" })
In this you are already give Error Message ="You must include a last name."..but its should message come from data annotation model validation.
[Required(ErrorMessage = "You must include a last name.")]
public string LastName{ get; set; }
#Html.ValidationMessageFor(model => model.Contact.LastName, string.Empty, new { #class = "text-danger" })
In ValidationMessageFor Message should be null. like as above shown in code.
Related
I render a PartialView inside my main View
View:
#model FullProductViewModel
...
<div class="send-container">
#Html.Partial("_CommentForm", new CommentViewModel { ProductId = Model.Id, Title = "" , Context="" })
</div>
...
I have a filed with name "Title" in Both my classes "FullProductViewModel" and "CommentViewModel".
_CommentForm PartialView:
#model CommentViewModel
<p class="page-title">#Resources.SendComment</p>
#using (Html.BeginForm("Comment", "Home", FormMethod.Post, new { #class = "form-comment form-submit" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.LabelFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="input-group">
#Html.LabelFor(model => model.Context)
#Html.ValidationMessageFor(model => model.Context, "", new { #class = "text-danger" })
#Html.TextAreaFor(model => model.Context, htmlAttributes: new { #class = "form-control", rows = "8" })
</div>
<div class="input-group">
#Html.LabelFor(model => model.CaptchaCode)
#Html.ValidationMessageFor(model => model.CaptchaCode, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.CaptchaCode, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="captcha-wrapper">
<img alt="Captcha" id="imgcaptcha" src="#Url.Action("Captcha", "Captcha")" />
</div>
<button class="btn btn-submit" type="submit">#Resources.SendMessage</button>
}
The problem is "Title" inside PartialView take its value form "FullProductViewModel" model but not "CommentViewModel ". i can easily change the field name "Title" inside one of models to solve problem... but why this happened and how i can fix it without change field name?
Your Title property is conflicting with the #{ ViewBag.Title = ".. line of code in your view (the ViewBag code is used by the _Layout.cshtml file to set the global <title> attribute for the page).
All the HtmlHelper methods that generate form controls set the value by checking (in order)
ModelState
The ViewDataDictionary (ViewData or ViewBag)
The value of the models property
In your case, nothing has been added to ModelState. But because a value for Title has been added to the ViewDataDictionary, its that value which is used for the value of your textbox. The method never gets to read the actual value you have set in your model.
The only realistic option (unless you want to modify the code in the _Layout and all views that use it) is to change the name of the property.
I am using MVC and on my Index view I have placed a 'EditorFor' and a 'DropDownFor' fields on it for data entry. I would like a user to enter values and then 'Save' the record from the view. However I am having problems retrieving the data entered. I have tried creating an ActionResult and binding the data however nothing comes across. I have tried giving the fields id names and passing them in as parameters and again nothing is passed.
This is what I have in my View -
<h3>Sensitive Areas</h3>
#Html.HiddenFor(model => model.BurnSitesID, new { #id = "burnSitesID"})
<div class="form-group">
#Html.LabelFor(model => model.SensitiveTypesID, "Sensitive Area", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("SensitiveTypesID", string.Empty)
#Html.ValidationMessageFor(model => model.SensitiveTypesID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DistSensitiveArea, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DistSensitiveArea, new { #id = "distSensitiveArea" })
#Html.ValidationMessageFor(model => model.DistSensitiveArea, "", new { #class = "text-danger" })
</div>
<input type="submit" id="CreateArea" value="Save"/>
How would you take the values entered and pass them to the controller? I have tried a button however if my button is not named the exact same thing as the view it does not do anything.
Please use Html.BeginForm("ActionName","ControllerName", FormMethod.Post) .
Button should be Submit type .
If you are use textbox .
#Html.TextBoxFor("txtName", "", new { #class = "form-control", #maxlength = "50" })
<input type="submit" id="CreateArea" value="Save"/>
[HttpPost]
public ActionResult ActionName(FormCollection form)
{
string Name=form["txtName"].ToString();
}
Where Name is a name/ID of field name .
Thanks .
Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.
Now I've added a dropdown list using "#Html.DropdownListFor" and it's square, with a different font colour.
I know I can specify which CSS class to use in the Razor e.g.
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "###########" } })
But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.
Here's a bigger snippet showing a well-styled text field directly above it
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OrderItemType, "", new { #class = "text-danger" })
</div>
</div>
Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?
Thanks
The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:
#Html.DropDownListFor(model => model.OrderItemTypeId,
(SelectList)ViewBag.OrderItemTypes,
new { #class = "form-control etc" })
See Microsoft Docs.
You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.
See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="panel panel-default">
<div class="panel-body">
#using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {
#* State selection dropdown *#
<div class="form-group">
#Html.LabelFor(m => m.State)
#Html.DropDownListFor(m => m.State, // Store selected value in Model.State
// This argument needs some explanation - here we take a Distionary<string, string>
// and turn it into an instance of SelectList, see blog post for more details
new SelectList(Model.States, "Key", "Value"),
// Text for the first 'default' option
"- Please select your state -",
// A class name to put on the "<select>"
new { #class = "form-control" }
)
#Html.ValidationMessageFor(m => m.State)
</div>
<button type="submit" class="btn btn-primary">Update</button>
}
</div>
</div>
</div>
</div>
I've been having problems getting formatting to work in my MVC 5 View. The View was scaffold as a TextAreaFor. I added DataFormatting for my property in my ViewModel but it doesn't actually format for me. From everything I have researched I'm formatting the ViewModel correctly but I haven't been able to figure out why the formatting isn't actually working.
So, I tried using #Html.EditFor. That seemed to make the date formatting work but it didn't to apply the Bootstrap "form-control" class. I then tried #Html.TextBoxFor and it responded like the #Html.TextAreaFor, no formatting but did apply the Bootstrap class.
I don't know which one to use and what else I need to do to get my View to not only format the date but to also apply the Bootstrap CSS.
Here is my ViewModel property.
[DisplayName("Call Date")]
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime? CallDate { get; set; }
This is the original TextAreaFor that the scaffolding created. No formatting but Bootstap CSS works.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
This is the EditFor that formats the date but doesn't apply Bootstrap CSS.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
This is the TextBoxFor that responded like the TextAreaFor.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
To add html attributes using #Html.EditorFor() you must be using MVC-5.1+, and if you are, then the usage is
#Html.EditorFor(m => m.CallDate, new { htmlAttributes = new { #class="form-control datepicker" }})
If you not using MVC-5.1+, and you want to generate a textbox and also format the date value, then the usage is (where the 2nd parameter is the format string)
#Html.TextBoxFor(m => m.CallDate, "{0:d}", new { #class = "form-control datepicker" })
Note that #Html.TextAreaFor() generate a <textarea> element for multi-line text and would not be appropriate for a DateTime property.
I have 3 textboxes ...one for day, second for month and third for year. I want to use mvc validation to check if one of this field is empty and then show *. Is it possible on button submit display just one error message if one of those fields are empty?
<div class="form-group">
<label for="dateofbirth" class="control-label col-lg-5">
#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("BIRTHDATE")):
#Html.ValidationMessage("*")
</label>
<div class="col-lg-2">
#Html.TextBoxFor(m => m.Register.Day, new { id = "day_birthdate", #class = "form-control" })
</div>
<div class="col-lg-2">
#Html.TextBoxFor(m => m.Register.Month, new { id = "month_birthdate", #class = "form-control" })
</div>
<div class="col-lg-3">
#Html.TextBoxFor(m => m.Register.Year, new { id = "year_birthdate", #class = "form-control" })
</div>
You can add the #ValidationMessageFor for all fields under same label.
<label for="dateofbirth" class="control-label col-lg-5">
#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("BIRTHDATE"))
:
#Html.ValidationMessageFor(m => m.Register.Day,"", new { #class = "text-danger" })
#Html.ValidationMessageFor(m => m.Register.Month,"", new { #class = "text-danger" })
#Html.ValidationMessageFor(m => m.Register.Year,"", new { #class = "text-danger" })
</label>
In your module class on the property attached with textbox provide attribute [Required].
than you can use of ValidationSummary which is already available in Asp.net MVC.
if you want to display message just beside file than do use ValidationMessageFor
Check : ASP.NET MVC Client Side Validation
class property definition for this
[Required(ErrorMessage = "*")]
public string Name { get; set; }
Example
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>