I'm trying to style my #HTML.ValidationMessageFor element with Bootstrap 3 but no CSS is applied. When consulting Bootstrap's documentation, it states:
To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
Even after nesting the desired #Html.ValidationMessageFor as stated above, no styling is applied:
Please see my code snippets below:
Model Property:
[Range(0, int.MaxValue, ErrorMessage = "Client ID cannot be larger than 2147483647.")]
[RegularExpression(#"^[0-9]+$", ErrorMessage = "Client ID must be a positive number.")]
public int searchClientID { get; set; }
View:
<div class="form-group col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="client-ID">Client ID</span>
#Html.TextBoxFor(m => m.searchClientID, new { #class = "form-control" })
</div>
<div class="has-error">
#Html.ValidationMessageFor(m => m.searchClientID, null, new { #class = "has-error" })
</div>
</div>
EDIT WITH ANSWER:
<div class="has-error">
#Html.ValidationMessageFor(m => m.searchClientName, String.Empty, new { #class = "help-block" })
</div>
dont replace form-group with has-error.I have used something similar to this recently and try the following markup.
<div class="form-group has-error">
<div >
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { #class = "help-block" })
</div>
Related
How to remove the menu part when the modal window pops up, and so that only the forms for inserting information remain. My code works fine. but when I press Edit button, it popups like the whole window with nav bar.
My Edit controller (Entity Framevork):
// GET: Products/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Product product = db.Products.Find(id);
if (product == null)
{
return HttpNotFound();
}
ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID", "CATEGORY_NAME", product.FK_CATEGORY);
return View(product);
}
// POST: Products/Edit/5
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "PRODUCT_ID,PRODUCT_NAME,FK_CATEGORY")] Product product)
{
if (ModelState.IsValid)
{
db.Entry(product).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID", "CATEGORY_NAME", product.FK_CATEGORY);
return View(product);
}
My Edit PartialView:
#model MyNewApp5.Models.Product
<div class="modal-header">
<h4 class="modal-title">Edit product</h4>
</div>
<!-- Modal body -->
<div class="modal-body" id="editform">
<div class="form-horizontal">
#using (Html.BeginForm("Edit", "Products", FormMethod.Post, new { #id = "formsubmit" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.PRODUCT_ID)
<div class="form-group">
#Html.LabelFor(model => model.PRODUCT_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PRODUCT_NAME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PRODUCT_NAME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FK_CATEGORY, "FK_CATEGORY", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("FK_CATEGORY", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.FK_CATEGORY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
}
</div>
And my Index:
<div class="modal fade" id="myModal" role="dialog" data-url="#Url.Action("CreatePartialView", "Products")">
</div>
<script>
function editBut() {
$('.btn-success').click(function () {
var url = $('#myModalEdit').data('url');
$.get(url, function (data) {
$("#myModalEdit").html(data);
$("#myModalEdit").modal('show');
});
});
}
</script>
Edit |
try this
// Open modal in AJAX callback
$('btn-success').click(function(event) {
event.preventDefault();
this.blur(); // Manually remove focus from clicked link.
var url = $('#myModalEdit').data('url')
$.get(url, function(html) {
$(html).appendTo('body').modal();
});
});
<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
</div>
it's taken from https://jquerymodal.com/ - Example 4: AJAX
I hope this helps
How can I add the form-control class to this TextBoxFor? I'm new to coding.
<div>
<div class="form-group text-center">
<Label class="center-block">Hours</Label>
</div>
<div style="margin-top:-1%" class="form-group text-center">
#Html.TextBoxFor(model => model.hours, new { type = "number", min = "0", step = "1", htmlAttributes = new { #class = "form-control center-block" } })
#Html.ValidationMessageFor(model => model.hours, "", new { #class = "text-danger" })
</div>
</div>
Result:
Not sure where htmlAttributes is coming from here, but you're already within the context of setting HTML attributes in that object, such as type and min and step. You're also setting #class in your ValidationMessageFor, why not apply that same standard?
Just remove the htmlAttributes and set the #class property on the object that has the other attributes:
#Html.TextBoxFor(
model => model.hours,
new {
type = "number",
min = "0",
step = "1",
#class = "form-control center-block"
})
I cannot manage to put a placeholder titled "Please Select", so I simply put it as an item in my drop-down, but now "Please select" can be selected, which is a bit of a nuisance. Is there a way to have a place holder for the drop-down list below.
<div class="form-group">
#Html.LabelFor(model => model.Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.Type, new List<SelectListItem>
{ new SelectListItem{Text="Please select type"},
new SelectListItem{Text="Book"},
new SelectListItem{Text="Book chapter"},
new SelectListItem{Text="Journal article"},
new SelectListItem{Text="Conference"}}, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Type, "", new { #class = "text-danger" })
</div>
</div>
Overloads 4, 5 & 6 of the DropDownListFor helper all contain a parameter optionLabel, which can be used for your purposes.
I'm building a form and have used the default scaffolding option based on my model in visual studio. What I need is for the checkbox to be checked by default when the view is loaded and disabled. I.E I want to preventing the user from changing the checkbox state.
The view code looks like this:
#model Models.Checkertest
#{
ViewBag.Title = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test</h2>
#using (Html.BeginForm("Test", "AccountManagement", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>User Creation</h4>
<div class="form-group">
#Html.Label("Enable Bypass", htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-4">
<div class="checkbox">
#Html.EditorFor(model => model.box1)
#Html.ValidationMessageFor(model => model.box1, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
}
In your action method in your controller, set the box1 property to true on your model. It would look something like this:
var model = new Checkertest {box1 = true};
return View(model);
To make the checkbox readonly, set the readonly attribute on it, like this:
#Html.EditorFor(model => model.box1, new {#readonly = "readonly"})
I am making an MVC application and I am trying to make it go to a certain page after clicking a "Create" button. I am only learning this and I'm not sure how to phrase it :P But let me explain.:
I have 3 entities, Year, Week and Day. They are linked together and have their own create and delete pages etc. When you make a day you say what year and week it is in. What I want to know is after I click "Create" after putting in the data for a day, how do I make it go to the Year index page rather than the Day one? When I click "Create", it shows me the list of all the days created, I rather it take me to the list of Years.
The Create page CSHTML code for day is inside #using (Html.BeginForm()), and I tried using #using (Html.BeginForm("Index", "Year")), this does take me to the Year index page, but it does not create the day at all.
Does any one know how to go about this?
Day "Create" page code:
#model Utility3.Models.Day
#{
ViewBag.Title = "Create";
}
<h1>Add Day</h1>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#*<h4>Day</h4>*#
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Label("Year", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("YearID", String.Empty)
#Html.ValidationMessageFor(model => model.YearID)
</div>
</div>
<div class="form-group">
#Html.Label("Week Number", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("WeekID", String.Empty)
#Html.ValidationMessageFor(model => model.WeekID)
</div>
</div>
<div class="form-group">
#Html.Label("Day of the Week", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DayofWeek", new List<SelectListItem>
{
new SelectListItem { Text = "Monday", Value = "Monday", Selected=true},
new SelectListItem { Text = "Tuesday", Value = "Tuesday"},
new SelectListItem { Text = "Wednesday", Value = "Wednesday"},
new SelectListItem { Text = "Thursday", Value = "Thursday"},
new SelectListItem { Text = "Friday", Value = "Friday"},
new SelectListItem { Text = "Saturday", Value = "Saturday"},
new SelectListItem { Text = "Sunday", Value = "Sunday"}
}, "Select Day")
#Html.ValidationMessageFor(model => model.DayofWeek)
</div>
</div>
<div class="form-group">
#Html.Label("Reading1", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Reading1)
#Html.ValidationMessageFor(model => model.Reading1)
</div>
</div>
<div class="form-group">
#Html.Label("Reading2", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Reading2)
#Html.ValidationMessageFor(model => model.Reading2)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Year ActionResult Index
// GET: /Year/
public ActionResult Index()
{
return View(db.Years.ToList());
}
When you post method, redirect to the Year Index view
[HttpPost]
public ActionResult Create(Utility3.Models.Day model)
{
if (!ModelState.IsValid)
{
return View();
}
....... // Save your model
return RedirectToAction("Index", "Year");
}