Create method call passing only checked radio buttons as parameters

Question

The logic is: I have several groups of radiobuttons on the view which are responsible for several rating parameters of one company. For example:

<td>
  <fieldset class="rating">
    <input type="radio" id="param1" name="srating" value="5"/>
    <input type="radio" id="param1" name="srating" value="4"/>
    <input type="radio" id="param1" name="srating" value="3"/>
    <input type="radio" id="param1" name="srating" value="2"/>
    <input type="radio" id="param1" name="srating" value="1"/>
  </fieldset>
</td>
<td>
  <fieldset class="rating">
    <input type="radio" id="param2" name="pgrating" value="5"/>
    <input type="radio" id="param2" name="pgrating" value="4"/>
    <input type="radio" id="param2" name="pgrating" value="3"/>
    <input type="radio" id="param2" name="pgrating" value="2"/>
    <input type="radio" id="param2" name="pgrating" value="1"/>
  </fieldset>
</td>

Then I want to pass checked parameters to the controller method which looks like this

public void SaveRating(int CompanyId, int param1, int param2)
{
  // ...
}

So the question is: How to combine all the checked parameters into one method call? I suppose to use jquery or mvc features. Also looking for the most efficient way to do it.

UPDATE Can it be a solution?

  @using (Html.BeginForm("SaveRating", "MyController"))
            {
                <td>
                    <input  style="display:none" name="CompanyID" value="@Model.ID"/>
                    <fieldset class="rating">
                        <input type="radio" id="sstar5" name="param1" value="5"/><label class="full" for="sstar5"></label>
                        <input type="radio" id="sstar4" name="param1" value="4"/><label class="full" for="sstar4"></label>
                        <input type="radio" id="sstar3" name="param1" value="3"/><label class="full" for="sstar3"></label>
                        <input type="radio" id="sstar2" name="param1" value="2"/><label class="full" for="sstar2"></label>
                        <input type="radio" id="sstar1" name="param1" value="1"/><label class="full" for="sstar1"></label>
                    </fieldset>
                </td>
                <td>
                    <fieldset class="rating">
                        <input type="radio" id="pgstar5" name="param2" value="5"/><label class="full" for="pgstar5"></label>
                        <input type="radio" id="pgstar4" name="param2" value="4"/><label class="full" for="pgstar4"></label>
                        <input type="radio" id="pgstar3" name="param2" value="3"/><label class="full" for="pgstar3"></label>
                        <input type="radio" id="pgstar2" name="param2" value="2"/><label class="full" for="pgstar2"></label>
                        <input type="radio" id="pgstar1" name="param2" value="1"/><label class="full" for="pgstar1"></label>
                    </fieldset>
                </td>
                <input type="submit" value="Save" />
            }

[Does Id Have To Be Unique In The Whole Page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Mar 21 '19 at 17:12
@Taplar Yes, I missed this while was editing code on StackOverflow, in the application they are uniqe — Storm, Mar 21 '19 at 17:14
Aside from the repeated `id`, change the `name` attribute to `param1` and `param2` respectively, then just submit the form. You don't need any logic to retrieve the selected values as only those ones are sent in the request by default. The model binder will do the rest for you, assuming you also have a `CompanyId` field somewhere. — Rory McCrossan, Mar 21 '19 at 17:15
Ok, so then is your question how to find the selected radios? — Taplar, Mar 21 '19 at 17:15
Are you doing a normal form submit or ajax? Rory's comment is targeted at form submits, though would also potentially apply to ajax calls. — Taplar, Mar 21 '19 at 17:16
So yeah, if your mvc logic automatically maps field names to the parameter names on the backend method, you just need to change the names like Rory said. **Or change the parameter names to match the html names as the html names are more verbose than "param1"** — Taplar, Mar 21 '19 at 17:18
@RoryMcCrossan Am I supposed to cover all these radios in one form? So that the binder will choose checked ones and pass them? — Storm, Mar 21 '19 at 17:19
The form is not going to pass the unchecked radio buttons. You seem to be confused on that front. Radio buttons are just a user interface to set a single value for a single field. — Taplar, Mar 21 '19 at 17:20
@Taplar I think I got this. I will update the post with some kind of solution after a few minutes — Storm, Mar 21 '19 at 17:21
Does it work for you? If so, you're good. Though if that is the case I would suggest changing your name from "param1" and "param2" to something more descriptive, and do the same on your method. Just reading the method, "param1" and "param2" don't tell you anything about what they are. — Taplar, Mar 21 '19 at 17:32
@Taplar The method is not implemented, just talking about the logic. I will change the param's names for sure that's just example — Storm, Mar 21 '19 at 17:34
I'm not intimately familiar with asp's mapping of field names to the parameter names. Best I can say at this point is that it looks accurate if the mapping is done automatically for you. An ASP guru would probably help more on that front, ^_^ — Taplar, Mar 21 '19 at 17:36
@Taplar Yea, I think the mapping is automatic, guess I found the correct way. Thanks for the help — Storm, Mar 21 '19 at 17:39

Hien Nguyen · Accepted Answer · 2019-03-21T17:37:44.293

I create a sample (it worked) for your requirement with GET method.

Use AJAX get with URL /company/SaveRating?CompanyId=1&param1=3&param2=4

And use jquery method addOrUpdateQueryStringParameter() to build URL parameters

<td>
    <fieldset class="rating">
        <input type="radio" id="param1" name="srating" value="5"/>
        <input type="radio" id="param1" name="srating" value="4"/>
        <input type="radio" id="param1" name="srating" value="3"/>
        <input type="radio" id="param1" name="srating" value="2"/>
        <input type="radio" id="param1" name="srating" value="1"/>
    </fieldset>
</td>
<td>
    <fieldset class="rating">
        <input type="radio" id="param2" name="pgrating" value="5"/>
        <input type="radio" id="param2" name="pgrating" value="4"/>
        <input type="radio" id="param2" name="pgrating" value="3"/>
        <input type="radio" id="param2" name="pgrating" value="2"/>
        <input type="radio" id="param2" name="pgrating" value="1"/>
    </fieldset>
</td>

<input type="button" value="rate" onclick="rate();"/>

<script>
    function addOrUpdateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }

    function rate() {
        var url = '/Company/SaveRating';
        url = addOrUpdateQueryStringParameter(url, 'CompanyId', 1);
        url = addOrUpdateQueryStringParameter(url, 'param1', $('input[name="srating"]:checked').val());
        url = addOrUpdateQueryStringParameter(url, 'param2', $('input[name="pgrating"]:checked').val());
        $.ajax({
            url: url,
            type: 'GET',
            success: function (html) {
                //todo
            },
            error: function (error) {
                // handle
            }
        });
    }
</script>

Update:

With your update cshtml file, it worked well (i have just tested) if you set input type hidden instead of style="display:none"

<input  type="hidden" name="CompanyID" value="@Model.ID"/>

Your `addOrUpdateQueryStringParameter()` function seems completely redundant. If you've already included jQuery in the page just use `$('form').serialize()` — Rory McCrossan, Mar 21 '19 at 17:28
If you read the comments under the question you can see the OP does have a form tag. Even if that wasn't the case there's far less verbose methods of doing what you have here. — Rory McCrossan, Mar 21 '19 at 17:30
but the name of input is different from parameter name in action? — Hien Nguyen, Mar 21 '19 at 17:31
Again, read the comments. In fact, the OP has updated with their full HTML — Rory McCrossan, Mar 21 '19 at 17:31
Thanks for the answer. I need some time to figure out what's going on here — Storm, Mar 21 '19 at 17:36

Create method call passing only checked radio buttons as parameters

1 Answers1