Custom Check box issue

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.

My Custom CheckboxList

 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());
        }

My UI Rendered code in browser:

<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.

did you put the MVC validation scripts?

Hi,

ya..i have put the below script references..

<script
src="~/Scripts/jquery-1.7.1.min.js"></script>

<script
src="~/Scripts/jquery-ui-1.8.20.min.js"></script>

<script
src="~/Scripts/jquery.validate.min.js"></script>

<script
src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script
src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

Thanks,

Sundar.

Leave a Reply