[RESOLVED]Custom Check box creation and Validation.

hi,

I am new to MVC. i have created custom Checkbox list control.

am able to bind the data to that control.

but Validation is not working when click on submit button.

Validation need to work like, i should select atleast one check box.

My Custom Class

 public static MvcHtmlString CheckboxForSelectList<TModel, TProperty>(
         this HtmlHelper<TModel> htmlHelper,
         Expression<Func<TModel, TProperty>> expression,
         IEnumerable<SelectListItem> listOfValues, string name)
        {
            var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            var sb = new StringBuilder();

            if (listOfValues != null)
            {
                // Create a radio button for each item in the list 
                foreach (SelectListItem item in listOfValues)
                {
                    // Generate an id to be given to the radio button field 
                    var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

                    // Create and populate a radio button using the existing html helpers 
                    var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));
                    TagBuilder textBox = new TagBuilder("input");
                    textBox.Attributes.Add("type", "checkbox");
                    textBox.Attributes.Add("name", name);
                    textBox.Attributes.Add("id", "chk" + id);

                    textBox.Attributes.Add("aria-required", "true");
                    textBox.Attributes.Add("data-val", "true");
                    textBox.Attributes.Add("data-val-required", "This field is required.");
                    var chk = textBox.ToString(TagRenderMode.Normal);
                   // var chk = htmlHelper.CheckBoxFor(expression, new { id = id }).ToHtmlString();
                    
                    // Create the html string that will be returned to the client 
                    // e.g. <input data-val="true" data-val-required="You must select an option" id="TestRadio_1" name="TestRadio" type="radio" value="1" /><label for="TestRadio_1">Line1</label> 
                    sb.AppendFormat("<div class="CheckBox">{0}{1}</div>", chk, label);
                }
            }

            return MvcHtmlString.Create(sb.ToString());
        }

UI rendered code:

<div class="CheckBox">
<input aria-required="true" data-val="true" data-val-required="This field is required." id="chkName_0" name="[4].Name" type="checkbox"></input>
<label id='Name_0'>Item 0</label>
</div>

<div class="CheckBox">
<input aria-required="true" data-val="true" data-val-required="This field is required." id="chkName_1" name="[4].Name" type="checkbox"></input>
<label id='Name_1'>Item 1</label>
</div>

<div class="CheckBox">
<input aria-required="true" data-val="true" data-val-required="This field is required." id="chkName_2" name="[4].Name" type="checkbox"></input>
<label id='Name_2'>Item 2</label>
</div>

<span class="field-validation-valid" data-valmsg-for="[4].Name" data-valmsg-replace="true"></span>

Please help me on this.

Thanks,

Sundar.

Hi Sundar1987,

Thanks for your post.

Sundar1987

Validation need to work like, i should select atleast one check box.

You should custom validation attribute,like this according to your requirement to modify this and use it:

AttributeUsage( AttributeTargets.Class)]
public class AtLeastOneCheckboxAttribute : ValidationAttribute
{
    private string[] _checkboxNames;

    public AtLeastOneCheckboxAttribute(params string[] checkboxNames)
    {
        _checkboxNames = checkboxNames;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var propertyInfos = value.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance)
            .Where(x=>_checkboxNames.Contains(x.Name));

        var values = propertyInfos.Select(x => x.GetGetMethod().Invoke(value, null));
        if (values.Any(x => Convert.ToBoolean(x)))
            return ValidationResult.Success;
        else
        {
            ErrorMessage = "At least one checkbox must be selected";
            return new ValidationResult(ErrorMessage);
        }
    }
}

Or you can try to use Jquery to implement it,please check this:

unobtrusive MVC3 validating group of checkboxes

Hope this can  be helpful.

Best Regards,

Eileen

Leave a Reply