ASP.NET MVC Checkbox with Textboxes - asp.net-mvc

i have written this code in one of the view using ASP.NET MVC. MVC returns me the checkboxes values (only those are checked) and with textboxes it returns me all (0,1,2 etc). how can i co-relate which textbox value belongs to which checkbox (since only i get the checked checkbox values)
For Each item As InternalMailCalendarViewModel In ViewData("InternalMailCalendar")
End Code
<div class="editor-field">
#Html.CheckBox("InternalMailCalendarID", New With {.value = item.ID})
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
#*
<div class="editor-field">
<input type="checkbox" id="InternalMailCalendarID" name="InternalMailCalendarID" value="#item.ID" />
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
*#
#Code
Next
End Code

According to my understanding of your code and problem, I suggest you following solution:
Just assign hmtl "Name" property to textbox uniquely and that unique name assign to checkbox as a value. So that you can co-relate textbox with checkbox.

Related

onchange not binding to editorfor mvc

I am having an issue with binding an onChange event to an EditorFor thats being dynamically loaded a dropdown list of countries in a partial view. I have spent a few hours looking for a solution as to what i am doing wrong and why the prop/attribute onChange event is not binding to the div element when the page loads.
The EditorFor block:
<div class="row">
<div class="col-md-2 labelText">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>`enter code here`
<div class="col-md-10">
#Html.EditorFor(m => m.Country, "DropDownSelect", new { DisplayLabel = "empty", List = BaseController.CountryList, CssClass = "tealInput", onChange = "OnChange()" })
</div>
</div>
Now when i view source on the page once its loaded to check if the onChange is present in the div it is not.
Viewed Source after page load:
<select class="tealInput" data-bind="value: DefaultBilling.Country" data-val="true" data-val-length="The Country value cannot exceed 50 characters. " data-val-length-max="50" id="DefaultBilling_Country" name="DefaultBilling.Country"><option value="">Select</option>
As you can see the onchange isnt present and so far i have not been able to debug the issue. Any information on this and possible resources to go study to find out why this is happening would be greatly appreciated.
I have changed the way I am displaying the dropdown:
<div class="row">
<div class="col-md-2 labelText" style="white-space:nowrap;">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>
<div class="col-md-10">
<select class="tealInput" name="country" data-bind='value: DefaultBilling.Country' id="ddlCountry_#Model.AddressTypeId" style="text-align:right;" onchange="OnChange()">
#foreach (var countries in BaseController.CountryList)
{
<option value="#countries.Value">#countries.Text</option>
}
</select>
</div>
</div>
Same issue here as well, on my watch its showing OnChange() is unavailable

unknown gap before input-group-addon in default asp.net mvc 5 template

how to reproduce :
create new ASP.Net MVC project
add a model
add a controller with scaffolding views
open the Create.cshtml in browser , then change any "form-group" using firebug or developer tools :
From :
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
</div>
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>
To :
<div class="form-group">
<label class="control-label col-md-2" for="Title">Title2</label>
<div class="col-md-10">
<div class="input-group">
<input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
<span class="input-group-addon">#</span>
</div>
</div>
</div>
we just put "input" inside a "div" with "class='input-group'" and added an "input-group-addon"
the result is very weird , it looks like this :
http://i.imgur.com/ylpYJKh.png
but the correct result is this :
http://jsfiddle.net/6t3d9z8e/
is this a bug with ASP.Net MVC 5 default template or what ?
It's interesting bug in interaction between bootstrap css and microsoft default styles.
See in your default css file "Site.css" and remove block after comment Set width on the form input elements since they're 100% wide by default, where setting max-width property on inputs.
And if you want to limit your input by size you should do this by bootstrap's col-md-... classes.
By looking at your screenshots, it is very clear that MVC5 is overwriting the default bootstrap input properties.
Add the below CSS code to your style sheet. This will solve the problem.
.input-group .text-box { width: 100%; }

In this ASP.NET MVC 3 app, what am I missing to get unobtrusive client-side validation?

I need help figuring out how to succeed in implementing unobtrusive client-side validation of a field in my ASP.NET MVC 3 app. I can see that unobtrusive client-side validation is basically enabled, since MVC generates related HTML.
What I want to achieve in this case is to have validation of input to the Bugs editor (i.e., the corresponding <input> element) as I type, for testing purposes I've set the property's max length to 2. When I test, I can tell that validation does not currently take place, so something is at least missing. So, the success criteria for this question is working client-side validation of the Bugs form field.
I can see one possible problem in the generated HTML: The Verbose property is not marked as Required in the model, but its corresponding <input> still gets the dataval=true attribute for instance, whereas the <input> for Bugs does not. Shouldn't it be the other way around, as fields with validation rules should get dataval=true, to enable unobtrusive validation?
The code that should be relevant to understanding the case follows, please let me know if more info is required:
Options.cs:
public class Options
{
[Required, StringLength(2)]
public string Bugs;
public bool Verbose;
}
Options.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<div id="options-form">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Options</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Bugs)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Bugs)
#Html.ValidationMessageFor(model => model.Bugs)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Verbose)
</div>
<div class="editor-field">
#Html.CheckBoxFor(model => model.Verbose)
#Html.ValidationMessageFor(model => model.Verbose)
</div>
</fieldset>
}
</div>
The two editors (for Bugs and Verbose) are rendered as follows:
<div id="options-form">
<form action="/Options" method="post">
<fieldset>
<legend>Options</legend>
<div class="editor-label">
<label for="Bugs">Bugs</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Bugs" name="Bugs" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Bugs" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Verbose">Verbose</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-required="The Boolean field is required." id="Verbose" name="Verbose" type="checkbox" value="true" /><input name="Verbose" type="hidden" value="false" />
<span class="field-validation-valid" data-valmsg-for="Verbose" data-valmsg-replace="true"></span>
</div>
</fieldset>
</form>
</div>
Bugs and Verbose are public fields in this code, not properties. Make them properties and that should fix it.
Define get; and set; for both Bugs and Verbose properties. That will not just correct(add) validation, but in the future, model binder will be able to bind models back from form fields on server.
And regarding required attribute for Verbose. That is because of implicit required validation for value types taking place. string is nullable, so it is not required if you do not set Required attribute on it explicitely - so Bugs stays without required. But bool cannot be null by nature of c#, so mvc automatically adds Required attribute to it. You can control that with
DataAnnotationsModelValidatorProvider.AddImplicitRequiredAttributeForValueTypes = false;
I experienced the same problem recently (unobtrusive client-side validation didn't work in IE but worked in the other browsers though). The reason was in jQuery version. I rolled back from jQuery 1.6.x version to the version 1.5.2 an it started to work.

Html.BeginForm() does not submit if nothing is selected in a Html.Dropdownlist() helper with optional label

#using (Html.BeginForm("Boxing", "Company",FormMethod.Post))
{
<div class="box">
<div>
<div class="left">
<div class="topLabel">
Id No:</div>
<div class="input_text_65">
#Html.TextBoxFor(m => m.Id)
</div>
<div class="botLabel">
percentt:
</div>
<div>
<input type="text" style="width: 50px" name="percent" />%
</div>
</div>
<div class="lastDetailField">
<div class="topLabel">
D/C:
</div>
<div class="select_110">
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable<Model.cType>)ViewData[ViewDataKeys.cTypes]), "----")
</div>
<div class="margin_top_45">
<input id="submit" type="submit" value="submit" />
</div>
</div>
</div>
</div>
}
If I didn't select any option in the dropdownlist (leaving the optionlabel "----" selected) and I press the submit button, the form will not be posted and the focus will be move to the dropdownlist
if I remove the optional Label, like this:
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable)ViewData[ViewDataKeys.cTypes]))
then it will work just fine. I'm thinking if I will put an optional label, does that mean I am required to choose an item? I want the form to be submitted even if I leave the dropdownlist with the optionallabel selected.
thanks in advance!
Do you have a required attribute in your model/viewmoden on cType? I think the clientside validation is kicking in, but because you didn't set a validation helper, you're not seeing the message. The form won't submit though if you select the optional label.

Asp.Net MVC 3 Razor Rendering Bug?

This one is strange...I have the following markup for a view using Razor view engine ASP.Net MVC 3 RC
<p>
<div class="editor-label">
#Html.LabelFor(model => model.Client.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Client.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.LastName) #Html.ValidationMessageFor(model => model.Client.LastName)
</div>
</p>
The problem is that when it renders, the P tag is not surrounding the DIVs! It renders like this:
<p>
</p><div class="editor-label">
<label for="Client.FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The First Name field is required." id="Client_FirstName" name="Client.FirstName" value="My FName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Client.LastName">Last Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Last Name field is required." id="Client_LastName" name="Client.LastName" value="My LName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.LastName" data-valmsg-replace="true"></span>
</div>
What the heck is going on? Any help is appreciated!
a paragraph cannot contain other block level elements. w3c
also check out this question
Hmmm, it seems like it is just standard browser behavior?
http://blog.programmingsolution.net/html/html-div-tag-inside-html-p-paragraph-tag-does-not-work-correctly/
The P element represents a paragraph. It cannot contain block-level elements e.g. DIV

Resources