Using Bootstrap 3 as part of an C# ASP.NET MVC5 project.
I'm getting a very strange issue when trying to use input-group-addon to add a 'GB' suffix to a form field.
Here's the C#:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.capacity, new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
#Html.TextBoxFor(model => model.capacity, new { #class = "form-control" })
<span class="input-group-addon">GB</span>
</div>
#Html.ValidationMessageFor(model => model.capacity)
</div>
</div>
</div>
}
Which equates to:
<form action="/NewSpaceRequest/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="tP5XKKhflSS8K1e7q1I_ZSuR8Ty7X88FfuOMG5JhmF-KXtUOcn4SQdNGTMZZVC2pdBMjb7RgNrIB90Y9I5C_FgX9xmMLrwrbiFZde7PRZ13gCqjBDAVglM38T7j09-C-uNkRSCZbFqDgiU_XcH9D-w2" />
<div class="form-horizontal">
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="capacity">Capacity</label>
<div class="col-md-10">
<div class="input-group">
<input class="form-control" data-val="true" data-val-number="The field Capacity must be a number." data-val-range="The field Capacity must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="The Capacity field is required." id="capacity" name="capacity" type="text" value="" />
<span class="input-group-addon">GB</span>
</div>
<span class="field-validation-valid" data-valmsg-for="capacity" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
Notice how the suffix isn't 'pulled left' to the form field?
Not sure why.
The framework stack (ASP.NET, MVC5) comes with additional styles on top of Bootstrap, found in Site.css, which statically sets the maximum with of input fields.
You can safely remove this entire entry.
Upon doing this, your form fields will be super long. To remedy this, I changed col-md-10 to something shorter like col-md-4, works a treat.
Related
If I create multiple elements like this...
#for (int i = 0; i < 10; i++)
{
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[i].RailcarNumber" class="control-label"></label>
<input asp-for="Railcars[i].RailcarNumber" class="form-control" />
<span asp-validation-for="Railcars[i].RailcarNumber" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[i].Weight" class="control-label"></label>
<input asp-for="Railcars[i].Weight" class="form-control" />
<span asp-validation-for="Railcars[i].Weight" class="text-danger"></span>
</div>
</div>
</div>
}
Validation appears to work correctly for all rows.
However, if I create a single row like this...
<div class="railcars">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[0].RailcarNumber" class="control-label"></label>
<input asp-for="Railcars[0].RailcarNumber" class="form-control" />
<span asp-validation-for="Railcars[0].RailcarNumber" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[0].Weight" class="control-label"></label>
<input asp-for="Railcars[0].Weight" class="form-control" />
<span asp-validation-for="Railcars[0].Weight" class="text-danger"></span>
</div>
</div>
</div>
</div>
And then clone rows using jQuery's clone(), validation only appears to work for the first (non-cloned) row.
Note: I am taking care to update all the ID, name, and for attributes of the cloned elements, and updating the subscript number. I checked that it's correct and posts the correct information to the server. ModelState even correctly detects validation problems with the cloned elements. It's just that client-side validation doesn't work on them.
Here is the HTML produced:
Uncloned Row (validation works):
<div class="row first-railcar">
<div class="col-md-4">
<div class="form-group railcar-number">
<label class="control-label" for="Railcars_0__Railcar">Railcar Number</label>
<input class="form-control" type="text" data-val="true" data-val-length="The field Railcar Number must be a string with a maximum length of 18." data-val-length-max="18" data-val-required="The Railcar Number field is required." id="Railcars_0__Railcar" maxlength="18" name="Railcars[0].Railcar" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[0].Railcar" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group railcar-volume">
<label class="control-label" for="Railcars_0__Volume">Volume (pounds)</label>
<input class="form-control" type="text" data-val="true" data-val-number="The field Volume (pounds) must be a number." data-val-required="The Volume (pounds) field is required." id="Railcars_0__Volume" name="Railcars[0].Volume" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[0].Volume" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"> </label><br>
<img class="add-railcar" src="/images/add.png" title="Add Additional Railcar" style="display: none;">
<img class="remove-railcar" src="/images/delete_2.png" title="Remove Railcar" style="display: none">
</div>
</div>
</div>
Cloned Row (validation doesn't work):
<div class="row">
<div class="col-md-4">
<div class="form-group railcar-number">
<label class="control-label" for="Railcars_1__Railcar">Railcar Number</label>
<input class="form-control" type="text" data-val="true" data-val-length="The field Railcar Number must be a string with a maximum length of 18." data-val-length-max="18" data-val-required="The Railcar Number field is required." id="Railcars_1__Railcar" maxlength="18" name="Railcars[1].Railcar" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[1].Railcar" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group railcar-volume">
<label class="control-label" for="Railcars_1__Volume">Volume (pounds)</label>
<input class="form-control" type="text" data-val="true" data-val-number="The field Volume (pounds) must be a number." data-val-required="The Volume (pounds) field is required." id="Railcars_1__Volume" name="Railcars[1].Volume" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[1].Volume" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"> </label><br>
<img class="add-railcar" src="/images/add.png" title="Add Additional Railcar">
<img class="remove-railcar" src="/images/delete_2.png" title="Remove Railcar" style="">
</div>
</div>
</div>
I also carefully compared the cloned HTML above to the HTML created by my first example (with the for loop), and they are identical. Apparently, there is something different about it being added after the page has loaded.
Does anyone know how to clone elements this way and have validation work on all the cloned elements?
Update:
My use of jQuery's clone() includes two true values ($row.clone(true, true)). If I don't do this, the click handlers for my images don't work.
As recommended, I tried several variations of the following code after cloning the elements. But I couldn't get it to make any difference.
var form = document.getElementById('input-form');
$.validator.unobtrusive.parse(form);
You are on the right track with $.validator.unobtrusive.parse(form);. However for jQuery Validation to work on copied/appended with ajax/cloned elements you need three things.
Make sure every input element has a unique name.
Remove any previous validation bindings in the form of existing elements.
Re-create the validation bindings.
So here is a working example below.
<form>
<div class="container" id="ElementContainer">
<div id="ElementToClone">
<div class="row">
<div class="col col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="elem[0]" id="elem_0" data-val="true" data-val-required="Required.">
</div>
</div>
</div>
</div>
</div>
<div class="pt-3">
<button type="button" class="btn btn-primary" onclick="Clone()">Clone</button>
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
<script>
function Clone() {
var $container = $('#ElementContainer');
var $elem = $('#ElementToClone');
var $form = $container.closest('form');
//duplicate x times
for (var i = 1; i <= 5; i++) {
var clonedHtml = $elem.html();
//create a unique name
clonedHtml = clonedHtml.replace('elem[0]', 'elem[' + i + ']');
//create an unique id (not required for validate to function)
clonedHtml = clonedHtml.replace('elem_0', 'elem_' + i);
//append the cloned element
$container.append(clonedHtml);
}
//remove validation from the inital input elements or it won't work
$form.removeData('validator').removeData('unobtrusiveValidation');
//bind the validation again
$.validator.unobtrusive.parse($form);
}
</script>
P.S. tested on MVC, not Core. But it should work the same since it is front-end anyways.
I have an issue where I'm using the same template to render some content on a page and the same template is used to render additional content on the page using an AJAX request.
The following code renders the partial razor view:
#model SearchBoxViewModel
<div class="smart-search">
#using (Html.BeginForm("Index", "Search", FormMethod.Get, new { #class = "form-horizontal", role = "form" }))
{
<div class="form-group">
<div class="hidden-xs col-sm-1 col-md-1 col-lg-1 text-right">
#Html.LabelFor(m => m.SearchPhrase, new { #class = "control-label heading" })
</div>
<div class="col-xs-8 col-md-9 col-lg-10">
#Html.TextBoxFor(m => m.SearchPhrase, new {#class = "form-control", placeholder = "for products, companies, or therapy areas"})
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<input type="submit" value="Search" class="btn btn-default"/>
</div>
<div class="what-to-search hidden-11 col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
#Html.CheckBoxFor(m => m.WhatToSearch, null, false)
#Html.DisplayNameFor(m => m.WhatToSearch)
</label>
</div>
</div>
</div>
}
</div> <!-- /.smart-search -->
The following code makes the AJAX request:
$.ajax(anchor.attr("data-overlay-url-action"))
.done(function (data) {
$("div.overlay").addClass("old-overlay");
$("div.navbar").after(data);
$("div.overlay:not(.old-overlay)")
.attr("data-overlay-url-action", anchor.attr("data-overlay-url-action"))
.hide()
.fadeIn();
$("div.old-overlay")
.fadeOut()
.removeClass("old-overlay");
anchor.addClass("overlay-exists");
});
So what you get is the same partial razor view output on the page twice, once during the page request and once during the AJAX request.
The problem is that TextBoxFor, CheckBoxFor, etc. all make use of TagBuilder.GenerateId to generate the id attribute value but it doesn't account for generating id's across multiple requests where AJAX might be involved. This results in the same id value being output on the page, causing JavaScript to break.
The following is the HTML that is output twice (once during the request and then added in a separate part of the page during an AJAX request):
<div class="smart-search">
<form role="form" method="get" class="form-horizontal" action="/PharmaDotnet/ux/WebReport/Search"> <div class="form-group">
<div class="hidden-xs col-sm-1 col-md-1 col-lg-1 text-right">
<label for="SearchPhrase" class="control-label heading">Search</label>
</div>
<div class="col-xs-8 col-md-9 col-lg-10">
<input type="text" value="" placeholder="for products, companies, or therapy areas" name="SearchPhrase" id="SearchPhrase" class="form-control">
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<input type="submit" class="btn btn-default" value="Search">
</div>
<div class="what-to-search hidden-11 col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
<input type="checkbox" value="true" name="WhatToSearch" id="WhatToSearch">
NewsManager Search Only
</label>
</div>
</div>
</div>
</form></div>
So the SearchPhrase and WhatToSearch id's are duplicated.
Is there any way to work around this, or is there a better way to render the form elements to avoid this issue?
You could specify your own ID for the items, and then you wouldn't have this ID collision problem. Have you tried setting the id manually: Html.TextBoxFor( ... , new { id = "AnythingHere" }), where the id could be a freshly generated Guid? (Note that you'd probably need to add a prefix, because Guids can start with a number.
So you can use the following. The Guid doesn't look good, and is unnecessarily long. You might want to go with something shorter, like short guid, DateTime.Ticks, ...
#{
var id = "chk_" + Guid.NewGuid().ToString();
}
#Html.CheckBoxFor(..., new { id = id })
#Html.LabelFor(..., new { #for = id })
I just cant fix something that seems so easy.
I want a textbox (editorfor) for a model property and I would like to increase its width but nothing is happening. I'm using the code as listed below. I tried setting the width to 500px but nothing happens. Ideally I would like the textbox to stretch over the full width of the container. Any ideas?
#if (Model.isAnswerVisible)
{
<div class="form-group">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">#Model.AreaNameAnswer</span>
#Html.EditorFor(model => model.Answer, new { htmlAttributes = new { id = "answer", style = "width: 500px", onkeyup = "limitCharacters()", #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Answer, "", new { #class = "text-danger" })
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Leg kort uit wat jouw antwoord is op de vraag"></span>
<label id="lblCountAnswer" style="color: green">#Model.MaxTokensAnswer</label>
</div>
</div>
}
The default MVC5 template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.
Reverse the order of your elements and you get a gap:
Instead of this
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">OK</button>
</span>
</div>
</div>
</div>
I know this question has been asked and answered a dozen of times but none of the solutions help me.
I have a following ViewModel which is consisted of ProductDetail data model and a list of Product_ProductCategoryAttribute data model.
public class ProductDetailViewModel
{
public ProductDetail ProductDetail { get; set; }
public List<Product_ProductCategoryAttribute> Product_ProductCategoryAttribute { get; set; }
}
On an action postback I receive an empty ViewModel.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "idProductDetail,idProductCategory,idProduct,Name,Description")] ProductDetailViewModel productDetailAll)
{
if (ModelState.IsValid)
{
ProductDetail productDetail = productDetailAll.ProductDetail;
db.Entry(productDetail).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(productDetailAll);
}
However, as I believe that the underlying problem is somewhere within the view I will add the view code snippet.
#using (Html.BeginForm("Edit", "ProductDetail", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.HiddenFor(model => model.ProductDetail.idProductDetail)
<div class="form-group">
#Html.LabelFor(model => model.ProductDetail.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.ProductDetail.Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductDetail.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.ProductDetail.Description, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
#for (int i = 0; i < Model.Product_ProductCategoryAttribute.Count(); i++)
{
<div class="form-group">
<label class="control-label col-md-2">#Model.Product_ProductCategoryAttribute[i].ProductCategoryAttribute.Name</label>
<div class="col-md-5">
#Html.TextBoxFor(model => model.Product_ProductCategoryAttribute[i].Value, new { #class = "form-control" })
</div>
</div>
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-default" />
</div>
</div>
</div>
}
HTML generated from the view above is as follows (some parts are ommited for brevity):
<form action="/Administration/ProductDetail/Edit/4" method="post"><input name="__RequestVerificationToken" type="hidden" value="IS4fstTTjOD4d9FEzyM5yWlvO9xqlOq_AHFx_8_vC079F1iDvucf5wgRIgV4iXH-NGU-u-J8IHBiKT4ApvR3cSLbhw_AntbibEFsD68eUkc1" />
<input data-val="true" data-val-number="The field idProductDetail must be a number." data-val-required="The idProductDetail field is required." id="ProductDetail_idProductDetail" name="ProductDetail.idProductDetail" type="hidden" value="4" />
<div class="form-group">
<label class="control-label col-md-2" for="ProductDetail_Name">Name</label>
<div class="col-md-10">
<input htmlAttributes="{ class = form-control }" id="ProductDetail_Name" name="ProductDetail.Name" type="text" value="Čipka i hiljadu šara" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProductDetail_Description">Description</label>
<div class="col-md-10">
<input htmlAttributes="{ class = form-control }" id="ProductDetail_Description" name="ProductDetail.Description" type="text" value="Šipka i čipka" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Veličina</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_0__Value" name="Product_ProductCategoryAttribute[0].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Širina</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_1__Value" name="Product_ProductCategoryAttribute[1].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Pakiranje</label>
<div class="col-md-5">
<input class="form-control" id="Product_ProductCategoryAttribute_2__Value" name="Product_ProductCategoryAttribute[2].Value" type="text" value="" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-default" />
</div>
</div>
</div>
I'm not sure if something is wrong with the naming convention but my bet would be on that.
The problem was in autogenerated controller Edit action which added couple of [Bind(Include="")] attributes which were wrong and which were preventing data to be posted to the server.
Correct snippet would look like this:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit (ProductDetailViewModel productDetailAll)
{
if (ModelState.IsValid)
{
ProductDetail productDetail = productDetailAll.ProductDetail;
db.Entry(productDetail).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(productDetailAll);
}
I need to validate two textboxes based on dropdownselect. It is dependency validation. for this I am using FluentValidation. Key thing is here, values of dropdownlist is language specification. (Russia, spanish).
RuleFor(x => x.HasMaterialPublishedElseWhereText).NotEmpty().WithMessage(i18n_Models_Abstract.RequiredField);
RuleFor(x => x.DtPublishedTimeText).NotEmpty().When(x => x.HasMaterialPublishedElseWhereText == i18n_Models_Abstract.AbstractYes).WithMessage(i18n_Models_Abstract.RequiredField);
RuleFor(x => x.PublishedPlaceText).NotEmpty().When(x => x.HasMaterialPublishedElseWhereText == i18n_Models_Abstract.AbstractYes).WithMessage(i18n_Models_Abstract.RequiredField);
view
<div class="row" style="padding-bottom: 10px">
<div class="col-md-10">
<div class="col-md-4">
#Html.HiddenFor(model => model.HasMaterialPublishedElseWhereOptions)
#{
options = Model.HasMaterialPublishedElseWhereOptions;
optionsList = options.Split(',').ToList();
optionSelect = optionsList.Select(option => new SelectListItem() { Text = option, Value = option }).ToList();
}
#Html.DropDownListFor(model => model.HasMaterialPublishedElseWhereText, optionSelect, i18n_Models_Abstract.SelectOption +"...", new { #class = "input-validation-error form-control" })
#Html.ValidationMessageFor(model => model.HasMaterialPublishedElseWhereText)
</div>
</div>
</div>
<div class="row" style="padding-bottom: 10px">
<div class="col-md-10">
<div class="col-md-4">
#Html.TextBoxFor(model => model.DtPublishedTimeText, new { #class = "form-control", #placeholder = Model.DtPublishedTimeLabel, maxlength = 40 })
#Html.ValidationMessageFor(model => model.DtPublishedTimeText)
</div>
</div>
</div>
<div class="row" style="padding-bottom: 10px">
<div class="col-md-10">
<div class="col-md-4">
#Html.TextBoxFor(model => model.PublishedPlaceText, new { #class = "form-control", #placeholder = Model.PublishedPlaceLabel, maxlength = 40 })
#Html.ValidationMessageFor(model => model.PublishedPlaceText)
</div>
</div>
</div>
HTML
<div class="col-md-4">
<input id="HasMaterialPublishedElseWhereOptions" name="HasMaterialPublishedElseWhereOptions" type="hidden" value="да/yes,нет/no">
<select class="input-validation-error form-control" data-val="true" data-val-required="обязательное поле" id="HasMaterialPublishedElseWhereText" name="HasMaterialPublishedElseWhereText">
<option value="">Выбрать опции...</option>
<option selected="selected" value="да/yes">да/yes</option>
<option value="нет/no">нет/no</option>
</select>
<span class="field-validation-valid" data-valmsg-for="HasMaterialPublishedElseWhereText" data-valmsg-replace="true"></span>
</div>
<div class="col-md-4">
<input class="form-control" id="DtPublishedTimeText" maxlength="40" name="DtPublishedTimeText" placeholder="Если Да, укажите дату публикации/If yes, Date" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="DtPublishedTimeText" data-valmsg-replace="true"></span>
</div>
<div class="col-md-4">
<input class="form-control" id="PublishedPlaceText" maxlength="40" name="PublishedPlaceText" placeholder="" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="PublishedPlaceText" data-valmsg-replace="true"></span>
</div>
All other validation are working, except this dependency one not working? Anything doing wrong?
Dependent validation doesn't generate appropriate html attributes, because dependency value (true or false) would be known only after user input.
Neither jquery.validate framework (on which client-side validation based), nor MVC model metadata infrastructure (which used for simple rules that could be converted to client-side rules), doesn't support more than one attributes set, so, MVC infrastructure makes decision to generate no attributes at all.
Same logic works for RuleSets customization: rules defined under specified ruleset doesn't participate in validation attributes generation.