Suppose this is my view...
<div class="control-group">
#Html.LabelFor(model => model.Title, new { #class = "control-label" })
#Html.ValidationMessageFor(model => model.Title, null, new { #class = "help-inline" })
<div class="controls">
#Html.EditorFor(model => model.Title)
</div>
</div>
In case of error How we can hide the Label and display validation message in place of Label?
Please suggest on this...
You could display the Label only if the ModelState is valid:
<div class="control-group">
#if (this.ViewData.ModelState.IsValid)
{
#Html.LabelFor(model => model.Title, new { #class = "control-label" })
}
#Html.ValidationMessageFor(model => model.Title, null, new { #class = "help-inline" })
<div class="controls">
#Html.EditorFor(model => model.Title)
</div>
</div>
Notice that if you are using client side validation you will also need to hook up to the validate method on the client and toggle the corresponding label visibility as well.
Just to compliment Darin's answer, if you are using client-side validation you will need to do something like
$("#myForm").validate({
invalidHandler: function(event, validator) {
$('.control-label').hide();
}
});
Otherwise the label won't hide.
It's worth still checking ModelState.IsValid when the page loads as well though incase the user has JS disabled.
Related
This the html page that not work the problem with NewspostedDate
<div class="form-group">
#Html.LabelFor(model => model.NewsPostedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewsPostedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewsPostedDate, "", new { #class = "text-danger" })
</div>
</div>
instead of Editorfor you can use TextBoxfor.
try this
#Html.TextBoxFor(m => m.NewsPostedDate, new { #class = "form-control date-picker" })
$('.date-picker').datepicker({ format: "yyyy/mm/dd", autoclose: true })
Note:
Good approach first load you css file , then load javascript/jquery . because user first see you UI , then interact with your UI
Looks like your Editorfor is missing the class "NewsPostedDate" or perhaps you mean to refer directly to the element so it should be:
jQuery('#NewsPostedDate').datetimepicker({ format: 'DD/MM/YYYY' });
Note the # instead of the .
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>
MVC4. I have a dynamic list on a view, a new textbox is added with button click (which adds a partialView) so user can enter a list of stuff. That is contained in a form element with a submit button.
In the controller I have tried three different types:
[HttpPost]
public ActionResult Index(IEnumerable<AccessoryVM> form)
{
-- form is NULL
[HttpPost]
public ActionResult Index(AccessoryVM form)
{
-- form has only the first item in the list
[HttpPost]
public ActionResult Index(FormCollection form)
{
-- seems to receive the list, but having trouble getting the values
All the examples I have seen are using a for list to add an index to each item, but they aren't using a dynamic list (it has a fixed length).
What should the Controller receiving type be?
EDIT to add more detail:
Button click appends partial view:
$("#add-item").on("click", function () {
$.ajax({
url: '/Accessory/AddItem',
cache: false,
success: function (html) {
$("#form-body").append(html);
}
})
return false;
})
Partial View:
#model EmployeeHardwareRequest.Models.ViewModels.AccessoryVM
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.AccessoryId, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
Main View - partial is appended to the #form-body:
#using (Html.BeginForm("Index", "Accessory", FormMethod.Post, new { #id="accessory-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div id="form-body">
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.SelectedAccessory, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button id="add-item" class="btn btn-primary">Add Another Item</button>
</div>
<div class="col-md-6">
<input type="submit" value="Select Software" class="btn btn-default pull-right" />
</div>
</div>
}
Most likely, you have a binding issue. Assuming all you're posting is a collection of AccessoryVM, then the parameter should be List<AccessoryVM> form. However, in order for the modelbinder properly bind the posted values, your input names must be in a specific format, namely either form[N].Foo or just [N].Foo.
You haven't given any detail about what's going on in your view, but since these are dynamically added, you must be using JavaScript to add additional inputs to the page. If you're doing it via AJAX (returning a partial view), you'll need to pass the index to your endpoint so that it can be utilized to generate the right input names. If you're using something like Knockout, Angular, etc., you should ensure that whatever template is being used to generate the inputs takes an index into account.
I would like to fill the textbox field with the current date automatically when the page loads and still be able to edit it but when I place 'datetime.now' it does not seem to work
this is my view:
<div class="form-group">
#Html.LabelFor(model => model.ReturnedDate, "Returned date", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ReturnedDate,DateTime.Now.ToShortDateString()),new { htmlAttributes = new { #class = "box" } })
#Html.ValidationMessageFor(model => model.ReturnedDate)
</div>
</div>
You need to assign your date something like below.
#Html.TextBoxFor(model => model.ReturnedDate, new { #Value = #DateTime.Now.ToShortDateString() })
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>