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

  • 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');

    Tuesday, October 20, 2020 4:22 PM

Answers

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 20, 2020 8:48 PM

All replies

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 20, 2020 8:48 PM
  • User-1854646908 posted

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

    Thanks you Man

    Wednesday, October 21, 2020 2:16 PM