Search code examples
asp.net-mvcasp.net-coremodel-bindingasp.net-core-3.1asp.net5

How to model bind dynamic radio buttons in ASP.net Core / 5


I have a Likert Survey generator where a dynamic number of questions can be entered - then a user goes through and answers each question with 4 radio buttons (Strongly Disagree, Disagree, Agree, Strongly Agree).

I can output them easily enough - but can they be model bound on the post back or do I have to traverse the posted form elements (ie not use model binding)?

I've Googled a lot and can find no solution - is it posible?

Thanks.


Solution

  • If you want to bind a list in view,here is a demo about binding a list with input names:

    Model:

    public class Qusetion 
        {
            public string Content { get; set; }
            public string Answer { get; set; }
    
        }
    

    View:

    <form method="post">
        <div>
            <label>question1</label>
            <input name="list[0].Content" value="question1" hidden/>
            <div>
                <input type="radio" name="list[0].Answer" value="Strongly Disagree" />Strongly Disagree
                <input type="radio" name="list[0].Answer" value="Disagree" />Disagree
                <input type="radio" name="list[0].Answer" value="Agree" />Agree
                <input type="radio" name="list[0].Answer" value="Strongly Agree" />Strongly Agree
            </div>
        </div>
        <div>
            <label>question2</label>
            <input name="list[1].Content" value="question2" hidden/>
            <div>
                <input type="radio" name="list[1].Answer" value="Strongly Disagree" />Strongly Disagree
                <input type="radio" name="list[1].Answer" value="Disagree" />Disagree
                <input type="radio" name="list[1].Answer" value="Agree" />Agree
                <input type="radio" name="list[1].Answer" value="Strongly Agree" />Strongly Agree
            </div>
        </div>
        <div>
            <label>question3</label>
            <input name="list[2].Content" value="question3" hidden/>
            <div>
                <input type="radio" name="list[2].Answer" value="Strongly Disagree" />Strongly Disagree
                <input type="radio" name="list[2].Answer" value="Disagree" />Disagree
                <input type="radio" name="list[2].Answer" value="Agree" />Agree
                <input type="radio" name="list[2].Answer" value="Strongly Agree" />Strongly Agree
            </div>
        </div>
        <input type="submit" value="submit" />
    </form>
    

    Controller:

    public IActionResult BindList(List<Qusetion> list)
            {
               
                return View();
            }
    

    result: enter image description here

    Update:

    If you want to bind with loop.you can pass list to view.And the code will work is because .net core bind model with name attribute.And because you want to bind list,so the name will be like list[index].xxx. Here is a demo with loop:

    View:

    @model IEnumerable<Qusetion>
    <form method="post">
        @{ var i = 0;}
        @foreach (var question in Model)
        {
            <div>
                <label>@question.Content</label>
                <input name="list[@i].Content" value="@question.Content" hidden />
                <div>
                    <input type="radio" name="list[@i].Answer" value="Strongly Disagree" />Strongly Disagree
                    <input type="radio" name="list[@i].Answer" value="Disagree" />Disagree
                    <input type="radio" name="list[@i].Answer" value="Agree" />Agree
                    <input type="radio" name="list[@i].Answer" value="Strongly Agree" />Strongly Agree
                </div>
            </div>
            i++;
        }
        
        <input type="submit" value="submit" />
    </form>
    

    Controller:

    public IActionResult BindList(List<Qusetion> list)
            {
    
                List<Qusetion> list1 = new List<Qusetion> { new Qusetion { Content = "question1" }, new Qusetion { Content = "question2" }, new Qusetion { Content = "question3" } };
                return View(list1);
            }
    

    result: enter image description here