We Keep Coding

ASP .NET MVC How to increase the width of an inputfield with #Html.EditorFor

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>

HTML DropDownList and ActionLink on same line

I want to display a DropDownList and a Link next to it, using MCV5 and Bootwatch (CSS)
View:
<div class="form-group">
<label class="control-label col-md-2" for="productoID">Producto</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-6">
#Html.DropDownListFor(model => model.productoID, null, "-- Seleccione un Producto --", new { #id = "producto", #Selected = false, #class = "form-control" })
#Html.ValidationMessageFor(model => model.productoID)
</div>
<div class="col-md-2">
#Html.ActionLink("+", "../Producto/Create")
</div>
</div>
</div>
</div>`
Actually they are displayed on same line, but not next to each other, there is an space I cannot remove.

You cannot get rid of the space because you are putting the dropdown list and the anchor in separate columns.
You want to put them in the same column using an inline form.

Bootstrap 3 input-group-addon suffix not attached to form field

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.

FluentValidation Rule dependency validation based on drop-down selection in MVC4

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.

Add onsubmit event to call JS function in MVC3

I have a problem with calling JS method from form in MVC3 project: I have a "search"page without forms with two buttons - Search and Cancel. Click on search runs JS function runSearch in ProductDefinition.
<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
<h3>Search Results</h3>
</div>
<div class="modal-body" style="height: 650px;">
<div>
<input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
</div>
<div id="searchresultcontain" class="grid">
</div>
<div id="Pagination" class="pagination">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button>
<button class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
How can I run this JS method (runSearch) when I press ? As far as I understand, this will be onsubmit event which is form event, so I am need to add form element with onsubmit property. I tried surrounding input field with BeginForm helper method:
#using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" }))
{
<input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
<input type="submit" value="Submit" style="visibility: hidden" />
}
but it does not seem to be working - when I press enter I for some reason get source of the page and arrive at localhost/?onsubmit=productDefinition.runSearch() URL.
What can be the source of the problem and how can I get the same behaviour for onsubmit as for onclick?

#using (Html.BeginForm(new { onsubmit = "return runSearch();" }))
<script type="text/javascript">
function runSearch() {
// your logic to perform the search.
return true;
}
</script>

You need to use the following version of BeginForm method in order to specify html attributes.
However, it is considered a bad practice to use inline javascript so I would suggest to assign and id attribute to your form and handle its submit event in the external javascript file instead. If you are using jQuery for your project, here is a good example from their docs - http://api.jquery.com/submit/. In plan JavaSCript it is a bit more tricky but still easy to do.

#model Models.Person
<script type="text/javascript">
$(document).ready(function () {
$('#registerInputId').click(function () {
alert('what do you do before send? For example encrypt the password');
$('#Password').val(CryptoJS.MD5($('#Password').val()));
})
});
</script>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal" style="display: inline-block; margin: 5% auto;">
<div style="font-size: 18px; margin-right:2px; margin-bottom:20px; text-align:right;">Add form</div>
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
</div>
<div class="form-group" style="margin-top: 30px;">
<div class="col-md-offset-3 col-md-6">
<input id="registerInputId" type="submit" value="Register" class="btn btn-default" />
</div>
</div>
</div>
}

Form.Id is required if onsubmit handler implements generic functionality, applicable for multiple forms. (example : disabling all input fields)
Form
#using (Html.BeginForm(new {
id = "form24",
onsubmit = "return onSubmitHandler(id);"
}))
handler
<script type="text/javascript">
function onSubmitHandler(formId) { /*formId is form24 */ }
</script>