I am making a registration form for my website, and currently i have it like this
and the code for that is :
#Html.Label("Firstname")
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control" })
#Html.ValidationMessageFor(model => model.Firstname, null, new { #style = "color:red;" })
<br />
#Html.Label("Surname")
#Html.TextBoxFor(model => model.Lastname, new { #required = "require", #style = "width:75%;", #class = "form-control" })
#Html.ValidationMessageFor(model => model.Lastname, null, new { #style = "color:red;" })
<br /> . . .
What i am trying to do is to add the title for example "First Name" inside the textbox, when data is entered it would disappear, To look like this
I have tried adding:
#name ="FirstName"
#label ="FirstName"
#title ="FirstName"
but all of those did nothing.
You are talking about placeholder. It's a HTML attribute, just add it to the custom htmlAttributes parameters, for exemple:
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control", placeholder = "First Name" })
It seems you are looking for the Html5 placeholder attribute
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control", placeholder = "First Name" })
This will add default value to your TextBox
#Html.TextBoxFor(model => model.Firstname, new {#required = "require",
#style = "width:75%;",
#class = "form-control",
#value = "FirstName"})
Or if you want it to dissapear on entering the textbox
#Html.TextBoxFor(model => model.Firstname, new {#required = "require",
#style = "width:75%;",
#class = "form-control",
placeholder = "FirstName"})
Related
When I fill in the information on my add product page and try to save, I get the error.
public ActionResult Create()
{
List<SelectListItem> values= (from i in db.Categories.ToList()
select new SelectListItem
{
Text = i.Name,
Value = i.Id.ToString()
}
).ToList();
ViewBag.val = values;
return View();
}
View
<div class="form-group">
#Html.LabelFor(model => model.CategoryId, "CategoryId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m=> m.CategoryId ,(List<SelectListItem>)ViewBag.val, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CategoryId, "", new { #class = "text-danger" })
</div>
</div>
Error
System.InvalidOperationException: 'The ViewData item that has the key 'CategoryId' is of type 'System.Int32' but must be of type 'IEnumerable'.'
ViewBag doesn't require type-casting, try changing your code in View from
#Html.DropDownListFor(m=> m.CategoryId ,(List)ViewBag.val, new { #class = "form-control" })
to
#Html.DropDownListFor(m=> m.CategoryId ,#ViewBag.val, new { #class = "form-control" })
Or, you may also refer this SO answer
and use something like below -
#Html.DropDownListFor(m => m.ContribType,
new SelectList(#ViewBag.ContribTypeOptions, "ContribId",
"Value", Model.ContribTypeOptions.First().ContribId),
"Select, please")
I am using three different Selectlist to populate three different drop downs. Area, Discipline, and Shift.
The problem I am facing is that it works for the first one but not for the other two. On the form, the selectedvalue works for the area, however for discipline and shift it selects the first one on the list
List<SelectListItem> ShiftEdit = db.Shifts
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.ShiftID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Shift1
}).ToList();
ViewBag.ShiftEdit = new SelectList(ShiftEdit, "Value", "Text", employee.ShiftID);
List<SelectListItem> AreaEdit = db.Areas
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.AreaID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Area1
}).ToList();
ViewBag.AreaEdit = new SelectList(AreaEdit, "Value", "Text", employee.AreaID);
List<SelectListItem> DisciplineEdit = db.Disciplines
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.DisciplineID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Discipline1
}).ToList();
ViewBag.DisciplineEdit = new SelectList(DisciplineEdit, "Value", "Text", employee.DisciplineID);
The View:
<div class="form-group">
#Html.LabelFor(model => model.ShiftID, "Shift", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("ShiftID", (IEnumerable<SelectListItem>)ViewBag.ShiftEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.ShiftID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AreaID, "Area", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("AreaID", (IEnumerable<SelectListItem>)ViewBag.AreaEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DisciplineID, "Discipline", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DisciplineID", (IEnumerable<SelectListItem>)ViewBag.DisciplineEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.DisciplineID, "", new { #class = "text-danger" })
</div>
</div>
So I had mistakenly not deleted the original scaffoldded Viewbags which seemed to cause the problem.
I deleted them and it all works fine now
I need to retrieve the value of the startdate so that I can combine the startdate with the start time and get the datetime. How do I retrieve the data or the value of the #html.EditorFor?
I have already tried using jQuery to get the data but I can't find the way to link the jQuery and the values inside the #{} up.
#Html.EditorFor(model => model.StartDate, new { htmlAttributes = new {
#class = "form-control border-input", #type = "date", id = "modelId" }
})
#Html.ValidationMessageFor(model => model.StartDate, "", new { #class =
"text-danger" })
#Html.EditorFor(model => model.StartTime, new { htmlAttributes = new {
#class = "form-control border-input", #type = "time", id = "modelId2" } })
#Html.ValidationMessageFor(model => model.StartTime, "", new { #class =
"text-danger" })
I expect that I can combine the date and time together
I am naive to Asp.Net MVC.
I have a partial view(ASP.Net MVC) in which I have some required fields I want to show custom error message if any of the required field in not provided. Below is the complete cshtml code for my partial view.
#model CMSAdminPanel.ViewModel.ProductView
<h4>Material And Labour Cost For Each Size</h4>
<hr />
#Html.ValidationSummary(false, "", new { #class = "text-danger" })
#for (int i = 0; i < Model.ServiceView.ListPriceView.Count; i++)
{
#Html.HiddenFor(x => x.ServiceView.ListPriceView[i].ProductSizeType)
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].ProductSizeTypeName, "Size - " + Model.ServiceView.ListPriceView[i].ProductSizeTypeName, htmlAttributes: new { #class = "control-label col-md-4" })
</div>
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { #class = "form-control", required = "required"} })
#Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].MaterialCost, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => x.ServiceView.ListPriceView[i].MaterialCost, new { htmlAttributes = new { #class = "form-control", required = "required" } })
#Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].MaterialCost, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].Profit, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => x.ServiceView.ListPriceView[i].Profit, new { htmlAttributes = new { #class = "form-control", required = "required" } })
#Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].Profit, "", new { #class = "text-danger"})
</div>
</div>
}
I want to show custom message "Material cost is required" while I am getting "This field is required". So I want to override this difault error message on client side.
I want to achieve something like this:
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { #class = "form-control", required = "required", **data_val_required = "LabourCost is requried"**} })
#Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { #class = "text-danger" })
</div>
</div>
Any suggestion/solution would be great help
In your model class, add change the [Required] attribute to
[Required(ErrorMessage = "Material cost is required")]
public decimal MaterialCost {get;set;}
Another approach is to set it from JavaScript using JQuery or override the attribute that sets it. by default the output of the ValidationMessageFor is
data-val-required="The field is required.".
SO, you can override this value in your markup
I find out a way to override this default required message on Client Side by using htmlAttribute title property and below is the code :
<div class="form-group">
#Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { #class = "form-control", required = "required", title = "LabourCost is requried"} })
#Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { #class = "text-danger" })
</div>
</div>
in your model
[Required(ErrorMessage = "Material cost is required")]
public doubleMaterialCost { get; set; }
and you can choose to load it from Resources and pass resource string if you have multiple cultures in your site.
or in your Action
public ActionResult(YourModel model)
{
if (model.doubleMaterialCost == 0)
ModelState.AddModelError("doubleMaterialCost ", "Material cost is required");
I need to disable an input dynamically when its value is equal to "*". How can I achieve this using the MVC Razor?
#Html.TextBoxFor(m => m.Digits[0], new { #class = "form-control input-lg label_16", #placeholder =
"1st", (Model.Digits[0] == "*" ? "disabled" : "") })
The above code doesn't compile
Is this possible?
Try using ternary operator
#Html.TextBoxFor(m => m.Digits[0], Model.Digits[0] == "*" ? (object)new { #class = "form-control input-lg label_16", #placeholder =
"1st", #disabled = "disabled" } : new { #class = "form-control input-lg label_16", #placeholder =
"1st" })
in the code above, the second parameter of #Html.TextBoxFor helper method will be based on the value of Model.Digits[0]. If it's * then the parameter would include the disabled attribute
new { #class = "form-control input-lg label_16", #placeholder =
"1st", #disabled = "disabled" }
otherwise
new { #class = "form-control input-lg label_16", #placeholder =
"1st" }