ASP.NET MVC RadioButtonListFor is always preset - asp.net-mvc

I have a radiobuttonlistFor custom adapter working, but if a users form data is reset, and no data has been previously submitted, one of the radio buttons (the first) is always preselected, I want to avoid this, how can I achieve this?
#Html.RadioButtonForSelectList(model => model.ViewModelForThingCreate.ThingTypeID, Model.ViewModelForCarCreate.CarTypeSelectList)
and:
public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(this HtmlHelper<TModel> HTMLHelper,Expression<Func<TModel, TProperty>> Expression, IEnumerable<SelectListItem> ListOfValues)
{
var MetaData = ModelMetadata.FromLambdaExpression(Expression, HTMLHelper.ViewData);
var SB = new StringBuilder();
if (ListOfValues != null)
{
foreach (SelectListItem Item in ListOfValues)
{
var ID = string.Format("{0}_{1}", MetaData.PropertyName, Item.Value);
var Radio = HTMLHelper.RadioButtonFor(Expression, Item.Value, new { id = ID }).ToHtmlString();
SB.AppendFormat("<label class=\"radio inline\" for=\"{0}\">{1} {2}</label>", ID, Radio, HttpUtility.HtmlEncode(Item.Text));
}
}
return MvcHtmlString.Create(SB.ToString());
}
Thanks!

This is your custom helper with the buttons set to not checked. Try this, I assume it will render all radio buttons unchecked.
public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(this HtmlHelper<TModel> HTMLHelper,Expression<Func<TModel, TProperty>> Expression, IEnumerable<SelectListItem> ListOfValues)
{
var MetaData = ModelMetadata.FromLambdaExpression(Expression, HTMLHelper.ViewData);
var SB = new StringBuilder();
if (ListOfValues != null)
{
foreach (SelectListItem Item in ListOfValues)
{
var ID = string.Format("{0}_{1}", MetaData.PropertyName, Item.Value);
var Radio = HTMLHelper.RadioButtonFor(Expression, Item.Value, new { id = ID }).ToHtmlString();
SB.AppendFormat("<label class=\"radio inline\" checked="false" for=\"{0}\">{1} {2}</label>", ID, Radio, HttpUtility.HtmlEncode(Item.Text));
}
}
return MvcHtmlString.Create(SB.ToString());
}

I've just tried your method in mvc3 template and it seems to work fine for me. Basically I've created some Model
public class IndexModel
{
public string ID;
public IEnumerable<SelectListItem> Elements;
}
Then created instance and filled values:
var model = new IndexModel()
{
ID = "a",
Elements =
new List<SelectListItem>() {
new SelectListItem() { Text = "test1", Value = "1"},
new SelectListItem() { Text = "test2", Value = "2"}}
};
In view I've used your extension method
<form>
#(Extensions.RadioButtonForSelectList(Html, x => x.ID, Model.Elements))
<button type="reset">Reset</button>
</form>
All seem perfectly fine after launch. Fields are not selected at load and they're cleared after pressing "Reset" button.
Can you give some more details as I'm not sure if I fully understand what are you trying to achieve :-)
EDIT:
Here's example in plain HTML of radio buttons. They're definitely not filled at the beginning and if you want them to be required add required but by default you can send form without selecting any radio button. Also you can make one checked by adding checked as in second example. Are you using some javascript on client side? Maybe it is causing this side-effect? http://jsbin.com/isadun/1
mz

Unfortunately One radio button must always be checked. That is the unfortunate part about radio buttons; however, You could always add a hidden radio button to your form and set the checked property to true; Have your internal code accept a null or whatever you expect if nothing is selected from it.
Try Setting all of the radio buttons value's to unchecked or false
foreach(button in ButtonGroup){
button.checked = false;
}

Related

Not able to get correct boolean value from SelectListItem in custom Radio Button

I'm creating a custom radio button helper using tagbuilder. I'm making use of the steps suggested in the post: Custom helper for generating html tags for radio button and associated label , but have tweaked it a bit to pass the values to the radio button using List , somewhat like this:-
#{
List<SelectListItem> inventory = new List<SelectListItem>();
inventory.Add(new SelectListItem { Text = "True", Value = bool.TrueString, Selected = true });
inventory.Add(new SelectListItem { Text = "False", Value = bool.FalseString});
}
But, even when I select true, it always takes the value as FALSE.
Below, is my code for constructing tag builder, please let me know where I'm going wrong:
public static MvcHtmlString CustomRadioButtonFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, IEnumerable<SelectListItem> radioList)
{
StringBuilder radiobutton = new StringBuilder();
TagBuilder radio = null;
TagBuilder label = null;
string[] propertyNameParts = expression.Body.ToString().Split('.');
string propertyName = propertyNameParts.Last();
string booleanStr = "";
// get the value of the property
Func<TModel, bool> compiled = expression.Compile();
var name = ExpressionHelper.GetExpressionText(expression);
var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
if (metadata.Model != null)
{
booleanStr = Convert.ToString(compiled(htmlHelper.ViewData.Model));
}
else
booleanStr = string.Empty;
// convert it to a boolean
bool isChecked = false;
Boolean.TryParse(booleanStr, out isChecked);
foreach (SelectListItem item in radioList)
{
radio = new TagBuilder("input");
label = new TagBuilder("label");
label.InnerHtml = item.Text;
radio.Attributes.Add("type", "radio");
radio.Attributes.Add("name", name);
radio.Attributes.Add("value", booleanStr);
radiobutton.Append(label.ToString());
radiobutton.Append(radio.ToString());
}
return MvcHtmlString.Create(radiobutton.ToString());
}
Any help would be appreciated. Thanks in advance!

Razor DropDownListFor: Adding Extra Attribute To SelectList Option Tag

I'm trying to create a select list. I've created it just fine using a collection from my viewmodel that allows me to set each option's value and text with the following code:
#Html.DropDownListFor(model => model.Networks, new SelectList(Model.Networks, "NetworkID", "Name"), new { #class="form-control" })
Model.Networks contains another property called CountryId. I'd like to add an attribute to each option tag so it looks like:
<option value="[NetworkId]" data-countryId="[CountryId]">Canada</option>
Which way should I go about doing this?
You can create a Form Helper class to create a custom drop down list, and create a custom 'selectListItem' class that has an extra property 'itemsHtmlAttributes' of type IDictionary - see below. You may need to play around with the 'id' or 'name' attributes to get the default model binding working. Below is a bit messy, I would suggest using TagBuilder to build the 'select' and 'option' tags:
public class SelectListItemCustom : SelectListItem
{
public IDictionary<string, object> itemsHtmlAttributes { get; set; }
}
public static class FormHelper
{
public static MvcHtmlString DropDownListForCustom(this HtmlHelper htmlHelper, string id, List<SelectListItemCustom> selectListItems)
{
var selectListHtml = "";
foreach (var item in selectListItems)
{
var attributes = new List<string>();
foreach (KeyValuePair<string, string> dictItem in item.itemsHtmlAttributes)
{
attributes.Add(string.Format("{0}='{1}'", dictItem.Key, dictItem.Value));
}
// do this or some better way of tag building
selectListHtml += string.Format(
"<option value='{0}' {1} {2}>{3}</option>", item.Value,item.Selected ? "selected" : string.Empty,string.Join(" ", attributes.ToArray()),item.Text);
}
// do this or some better way of tag building
var html = string.Format("<select id='{0}' name='{0}'>{1}</select>", id, selectListHtml);
return new MvcHtmlString(html);
}
}
VIEW:
#{
var item = new SelectListItemCustom { Selected = true, Value = "123", Text = "Australia", itemsHtmlAttributes = new Dictionary<string, object> { { "countrycode", "au" } } };
var items = new List<SelectListItemCustom> { item };
Html.Raw(Html.DropDownListForCustom("insertIdHere", items))
}

ASP.NET MVC checkbox and radio button examples

I am looking for detailed ASP.NET MVC examples which make extensive use of grouped checkboxes (where multiple checkboxes can be selected, use case: choose the magazines you want to subscribe to with options such as "SI", "Forbes", "Money" etc) as well as grouped radio buttons (use case: at a bank choose either "savings" or "checking" account).
I have searched and found only scattered UI snipped but no complete MVC example which makes heavy use of these two UI elements and goes into detail on how the values from these elements are processed in the controller, captured in the model and persisted in the database.
Thanks,
The example here is for HTMLHelper for Checkbox Grouping
public static class HtmlHelperGroup
{
static string container = #"<div id=""{0}"">{1}</div>";
static string checkboxhtml = #"<input type=""checkbox"" name=""{0}"" value=""{1}"" {3} />{2}</br>";
public static string CheckBoxGroup(this HtmlHelper obj, string name, List<SelectListItem> data)
{
StringBuilder sb = new StringBuilder();
foreach (var content in data)
{
sb.Append(string.Format(checkboxhtml, name, content.Value,content.Text, content.Selected ? "checked" : string.Empty ));
}
return string.Format(container, "container_" + name, sb.ToString());
}
}
<%=Html.CheckBoxGroup("account", new List<SelectListItem>()
{
new SelectListItem() { Text="Checking", Value = "1" },
new SelectListItem() { Text="Saving", Value = "2" }}) %>
Hope this helps

Creating a SelectListItem with the disabled="disabled" attribute

I'm not seeing a way to create, via the HtmlHelper, a SelectListItem that will spit out the following HTML:
<option disabled="disabled">don't click this</option>
The only properties SelectListItem has are:
new SelectListItem{
Name = "don't click this",
Value = string.Empty,
Selected = false
}
The only option I see is to
Subclass the SelectListItem to add an Enabled property to get the value to the view
Not use the HTML helper for DropDownList
Create a new HtmlHelper extension that accepts my new EnablableSelectList and adds my disabled attribute.
The Disabled property is supported since ASP.NET MVC 5.2:
new SelectListItem {
// ...
Disabled = true
}
See the API reference.
This is something I might try before recreating the helper completely. The basic idea is that the Html you get from the helper should be well formed, so it should be safe to parse. So you can build on that idea by making your own extension that uses the existing extension but adds the functionality to disable the items.
Something like this might do (totally untested)
public class CustomSelectItem : SelectListItem
{
public bool Enabled { get; set; }
}
public static class CustomHtmlHelpers
{
public static MvcHtmlString MyDropDownList(this HtmlHelper html, IEnumerable<CustomSelectItem> selectList)
{
var selectDoc = XDocument.Parse(html.DropDownList("", (IEnumerable<SelectListItem>)selectList).ToString());
var options = from XElement el in selectDoc.Element("select").Descendants()
select el;
foreach (var item in options)
{
var itemValue = item.Attribute("value");
if (!selectList.Where(x => x.Value == itemValue.Value).Single().Enabled)
item.SetAttributeValue("disabled", "disabled");
}
// rebuild the control, resetting the options with the ones you modified
selectDoc.Root.ReplaceNodes(options.ToArray());
return MvcHtmlString.Create(selectDoc.ToString());
}
}
Clientside option: if you for example give your dropdownlist a class 'custom' and the items that should be unselectable the value -1 (for example), then you can do something like:
$('select.custom option[value=-1]').each(function () {
$(this).attr("disabled", "disabled");
});
If all you are trying to do is prevent a user from selecting a certain value from the list, it seems like the simpler and more time-efficient way to do it is to use input validation. Which you may quite possibly be doing anyways, if you want to verify they've made a selection to begin with.
-----Option 1
Controller:
var ExpectedShipmentsRange = new List();
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "Selected number of shipments", Value="0", Disabled = true, Selected = true });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "0 to 20 shipments", Value = "0-20" });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "20 to 40 shipments", Value = "20-40" });
ViewBag.ExpectedShipmentsRange = ExpectedShipmentsRange;
View:
#Html.DropDownListFor(m => m.ExpectedShipments, (IEnumerable<SelectListItem>)#ViewBag.ExpectedShipmentsRange, new { #class = "form-control" })
-----Option 2
Controller:
ViewBag.citiesSa = _dbContext.Countries.ToList();
View:
#Html.DropDownListFor(m => m.City, new SelectList(#ViewBag.citiesSa, "Id", "Name"), "Select your city", new { #class = "form-control" })
-----Option 3 does not support disabled option:
List<SelectListItem> ExpectedShipmentsRange = new List<SelectListItem>();
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "0 to 20 shipments", Value = "0-20" });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "20 to 40 shipments", Value = "20-40" });
ViewBag.ExpectedShipmentsRange = new SelectList(ExpectedShipmentsRange, "Value", "Text");
View:
#Html.DropDownListFor(m => m.ExpectedShipments, (SelectList)#ViewBag.ExpectedShipmentsRange, new { #class = "form-control" })
I've noticed that while using SelectList to populate the DropDownListFor() method the Disabled & Selected parameters are not respected. They are only honored when populating using List<SelectListItem>. However I've run into other odd bugs when populating the DropDownListFor() using List<SelectListItem> and found that using SelectList is the correct option for populating a DropDownListFor() list. Here's an example of how to create a SelectList list:
public static SelectList States = new SelectList(new[]
{
new SelectListItem { Text = "AL", Value = "AL" },
new SelectListItem { Text = "AK", Value = "AK" },
...
}, "Value", "Text", 1);
In my case I needed to disable the first item of the select list, the only way I was able to do so using the SelectList was by creating an extension method for the DropDownListFor() method. Here is the class I used:
public static class HtmlHelperExtensions
{
private static MvcHtmlString DisableFirstItemDropDownListFor(MvcHtmlString source, string sourceItemName, string sourceItemValue = "", string targetItemValue = "")
{
string htmlString = source.ToHtmlString();
if (string.IsNullOrEmpty(sourceItemValue))
{
htmlString = htmlString.Replace("value=\"\"", "value=\"\" disabled=\"disabled\" selected=\"selected\"");
}
return new MvcHtmlString(htmlString);
}
public static MvcHtmlString DisableFirstItemDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes)
{
return DisableFirstItemDropDownListFor(htmlHelper.DropDownListFor(expression, selectList, htmlAttributes), string.Empty);
}
}
You can then use this method in your .cshtml file like so:
#Html.DisableFirstItemDropDownListFor(x => x.YourFieldType, Model.YourModel, new { #class = "YourClass" })

ValidationMessage - Handle multiple errors for the same property

I'm using ValidationMessage control in MVC. When validating each property, it may have more than one error message to show, but the ValidationMessage only displays the first error message in the list.
Here is an example:
ModelState["Key"] = new ModelState();
ModelState["Key"].Errors.Add("Error 1");
ModelState["Key"].Errors.Add("Error 2");
and in the html I have: <%= Html.ValidationMessage("Key")%>
which displays: "Error 1"
I want to see all error messages on the page which will be "Error 1 Error 2"
Any idea how to do it?
I had exactly the same problem, so I created an extension method for HtmlHelper as replacement for the MVC ValidationMessage method.
The benefit of this over ValidationSummary method is that it displays error message per field so you can place it right next to each field (same as ValidationMessage method).
public static string AllValidationMessage(this HtmlHelper helper, string modelName)
{
StringBuilder builder = new StringBuilder();
TagBuilder ulTag = new TagBuilder("ul");
ulTag.AddCssClass("u-error-list");
builder.Append(ulTag.ToString(TagRenderMode.StartTag));
if (helper.ViewData.ModelState.ContainsKey(modelName) &&
helper.ViewData.ModelState[modelName].Errors.Count > 0)
{
foreach (var err in helper.ViewData.ModelState[modelName].Errors)
{
TagBuilder liTag = new TagBuilder("li") { InnerHtml = HttpUtility.HtmlEncode(err.ErrorMessage) };
liTag.AddCssClass("u-error-item");
builder.Append(liTag.ToString());
}
}
builder.Append(ulTag.ToString(TagRenderMode.EndTag));
var msgSpan = helper.ValidationMessage(modelName, "{placeholder}");
if (msgSpan == null)
return string.Empty;
return msgSpan.ToHtmlString().Replace("{placeholder}", builder.ToString());
}
public static string AllValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
return HtmlHelperExtensions.AllValidationMessage(helper, ExpressionHelper.GetExpressionText(expression));
}
Edit: added AllValidationMessageFor method
Edit: added a null check on msgSpan
With just out-of-the-box MVC, you'll have to add a ValidationSummary:
<%= Html.ValidationSummary() %>
That will show all ModelErrors.
Based on the solutions presented here and in How to display multiple validation errors with #Html.ValidationMessageFor?, I created my own multiline validation message for a property. It behaves somewhat like ValidationSummary but can be used per field. I use it present a validation message for a collection field of a model. This allows me to present a summary message for the collection and only the collection.
public static MvcHtmlString MultilineValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
var propertyName = ExpressionHelper.GetExpressionText(expression);
var modelState = htmlHelper.ViewData.ModelState;
// If we have multiple (server-side) validation errors, collect and present them.
if (modelState.ContainsKey(propertyName) && modelState[propertyName].Errors.Count > 1)
{
var msgs = new StringBuilder();
foreach (ModelError error in modelState[propertyName].Errors)
{
msgs.AppendLine(error.ErrorMessage + "<br />");
}
// Return standard ValidationMessageFor, overriding the message with our concatenated list of messages.
var msgSpan = htmlHelper.ValidationMessageFor(expression, "{0}", htmlAttributes as IDictionary<string, object> ?? htmlAttributes);
var msgDiv = msgSpan.ToHtmlString().Replace("span", "div");
return new MvcHtmlString(string.Format(msgDiv, msgs.ToString()));
}
// Revert to default behaviour.
return htmlHelper.ValidationMessageFor(expression, null, htmlAttributes as IDictionary<string, object> ?? htmlAttributes);
}
A more straight to the point approach:
Controller:
ModelState.AddModelError("other", "error 1");
ModelState.AddModelError("other", "error 2");
ModelState.AddModelError("other", "error 3");
View:
<ul>
#foreach (var error in Html.ViewData.ModelState["other"].Errors)
{
<li>#error.ErrorMessage</li>
}
</ul>
As ModelState follows a dictionary pattern for errors, it seems ultimately we need to concatenate all the errors into the single ModelState key:
ModelState["Key"].Errors.Add("Error 1. " + "Error 2");
If you use the IValidatableObject convention to perform custom validations, you can convert the validation result failures to ModelState entries as follows:
var resultsGroupedByMembers = validationResults
.SelectMany(_ => _.MemberNames.Select(
x => new {MemberName = x ?? "",
Error = _.ErrorMessage}))
.GroupBy(_ => _.MemberName);
foreach (var member in resultsGroupedByMembers)
{
ModelState.AddModelError(
member.Key,
string.Join(". ", member.Select(_ => _.Error)));
}
The cross join is needed noting there may be more than one MemberName per Validation Result. Unbound results are bound to "" and should be available to the ValidationSummary.
Also in your Controller Action you can check the
ModelState.IsValid
and if its false, just return the View and the ValidationSumary will be populated.

Resources