Submit multiple radio button values with one button ASP.NET MVC

Question

There are three groups of radio buttons on my page and I want to submit each of their values with one button.

<table>
    <tr>
     <td>
      @Html.RadioButton("rating1", "yes", true) Yes
      @Html.RadioButton("rating1", "no", false) No
      @Html.RadioButton("rating1", "maybe", false) Maybe
     </td>
    </tr>
<tr>
     <td>
      @Html.RadioButton("rating2", "yes", true) Yes
      @Html.RadioButton("rating2", "no", false) No
      @Html.RadioButton("rating2", "maybe", false) Maybe
     </td>
    </tr>
<tr>
     <td>
      @Html.RadioButton("rating3", "yes", true) Yes
      @Html.RadioButton("rating3", "no", false) No
      @Html.RadioButton("rating3", "maybe", false) Maybe
     </td>
    </tr>
</table>

I want to send a dictionary as a parameter to the controller action so I can retrieve the values for each rating.

The controller looks like this:

public ActionResult Rate(Guid uniqueId, Dictionary<Guid, string> ratings)
        {
            [...]
        }

I have tried:

<input type="submit" value="Send Ratings" onclick="@Url.Action("Rate", "Controller", new {new Dictionary<string,string> {{"rating1", "yes"}, {"rating2", "no"}, {"rating3", "maybe"}})"></input>

but passing a Dictionary as a RouteValue like that is not allowed.

How do I send all 3 radio button [name,value] pairs to the action with one button /submit? Also, should all three groups be in the same form or separate forms?

I am open to using javascript, but would prefer using Razor HTML helpers.

Thanks

First, Razor code is parsed on the server before its sent to the view so `@Url.Action` renders a value before any client changes. Second you cant pass a dictionary to a GET method (at least not like that - it would need be something like in [this answer](http://stackoverflow.com/questions/28297075/transmit-javascript-object-into-controller-action-as-dictionary/28298048#28298048)). But really, why are you not just posting a form and binding to a model? — , Feb 12 '15 at 02:39

Nitin Sawant · Answer 1 · 2016-11-09T08:57:43.073

Model

public class ExampleViewModel
{
    public ExampleViewModel()
    {
        Answers = new Dictionary<string, string>();
        Questions = new List<KeyValuePair<string, List<string>>>();
    }

    public Dictionary<string, string> Answers { get; set; }
    public List<KeyValuePair<string, List<string>>> Questions { get; set; }
    public ExampleViewModel Add(string key, string[] value)
    {
        Questions.Add(new KeyValuePair<string, List<string>>(key, value.ToList()));
        return this;
    }
}

Controller

    [HttpGet]
    public ActionResult Index()
    {
        ExampleViewModel model = new ExampleViewModel();
        model.Add("rating1",new[] { "Yes" ,"No", "Maybe"});
        model.Add("rating2", new[] { "Yes", "No", "Maybe" });
        model.Add("rating3", new[] { "Yes", "No", "Maybe" });
        return View(model);
    }
    [HttpPost]
    public ActionResult Index(ExampleViewModel model)
    {
        //model.Answers is the dictionary of the values submitted 
        string s = model.Answers.Count.ToString();
        return View();
    }

View

    @model ExampleViewModel
    @using (Html.BeginForm())
    {
        <table class="table table-bordered table-striped">
            @for(int i=0;i<Model.Questions.Count;i++)
            {
                var question = Model.Questions[i];
                <tr>
                    <td>
                        @foreach (var answer in question.Value)
                        {
                            <input type="hidden" name="Model.Answers[@question.Key].Key" value="@question.Key" />
                            <input type="hidden" name="Model.Answers.Index" value="@question.Key" />
                            @Html.RadioButton("Model.Answers[" + question.Key+"].Value", answer, false) @answer
                        }
                    </td>
                </tr>
            }
            <tr>
                <td>
                    <input type="submit" class="btn btn-primary" value="Submit" />
                </td>
            </tr>
        </table>
    }

model.Answers will hold the dictionary containing the submitted values

score -1 · Answer 2 · edited Feb 20 '15 at 01:05

You can use FormCollection for gating your radio button value on your post.

you have to simply write var variable = f["rating1"]; in your post method and u get your selected radio button value on post method,

   public ActionResult Rate(Guid uniqueId,FormCollection f)

       {

           var variable1 = f["rating1"]; 

           var variable2 = f["rating2"]; 

           var variable3 = f["rating3"]; 

           [...]

       }

Submit multiple radio button values with one button ASP.NET MVC

2 Answers2