How to Bind RadioButton List created by jQuery in ASP.NET MVC 5

Question

User-1854646908 posted

I want to create RadioButton List by jQuery and bind it with my Model in ASP.NET MVC 5

I try this but not work,

This is the Class Model:

public class MyModelClass()
{

    public MyModelClass()
    {

    }

    public List<MyClass> DataCollectionList { get; set; }

}

public class MyClass
{

    public MyClass()
    {

    }

    public string CurrentValue { get; set; }

    public bool IsChecked { get; set; } 

}

jQuery Code:

$('<input>').attr('type', 'radio').attr('name', 'DataCollectionList[' + 0 + '].IsChecked');
$('<input>').attr('type', 'radio').attr('name', 'DataCollectionList[' + 1 + '].IsChecked');
$('<input>').attr('type', 'radio').attr('name', 'DataCollectionList[' + 2 + '].IsChecked');
$('<input>').attr('type', 'radio').attr('name', 'DataCollectionList[' + 3 + '].IsChecked');

Answer 1

User475983607 posted

I think you misunderstand how radio buttons work.  Only the selected name/value is submitted.  Your design is four different radio button groups with one option not one group with 4 options.  None of the radio button have a value.

<h1>Index</h1>

<form method="post">
    <div id="radios">

    </div>
    <div>
        <input id="Submit1" type="submit" value="submit" />
    </div>
</form>

@section scripts {
<script>
    $('#radios').append($('<input>').attr('type', 'radio').attr('name', '[0].Name').attr('value', 'red')).append(' red').append($('<br />'));
    $('#radios').append($('<input>').attr('type', 'radio').attr('name', '[0].Name').attr('value', 'green')).append(' green').append($('<br />'));
    $('#radios').append($('<input>').attr('type', 'radio').attr('name', 'Color[0].Name').attr('value', 'blue')).append(' blue').append($('<br />'));

    $('#radios').append($('<hr />'));

    $('#radios').append($('<input>').attr('type', 'radio').attr('name', '[1].Name').attr('value', 'red')).append(' red').append($('<br />'));
    $('#radios').append($('<input>').attr('type', 'radio').attr('name', '[1].Name').attr('value', 'green')).append(' green').append($('<br />'));
    $('#radios').append($('<input>').attr('type', 'radio').attr('name', '[1].Name').attr('value', 'blue')).append(' blue').append($('<br />'));
</script>

    public class Color
    {
        public string Name { get; set; }
    }

        public ActionResult Index(List<Color> model)
        {
            return Json(model);
        }

Answer 2

User-1854646908 posted

Yes, i was misunderstanding how RadioButton works, but after some search i got it 

Thanks you Man