创建仅将选中的单选按钮作为参数传递的方法调用

Question

逻辑是：我在视图上有几组单选按钮，它们负责一个公司的几个评级参数。例如：

<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>

然后我想将检查的参数传递给控制器方法，如下所示

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

那么问题来了：如何将所有检查的参数合并到一个方法调用中？我想使用 jquery 或 mvc 功能。也在寻找最有效的方法。

更新可以解决吗？

  @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" />
            }

Answer 1

我使用 GET 方法为您的要求创建了一个示例（有效）。

使用 AJAX 得到 URL /company/SaveRating?CompanyId=1&param1=3&param2=4

并使用 jquery 方法 addOrUpdateQueryStringParameter() 构建 URL 个参数

<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, '' + key + "=" + value + '');
        }
        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>

更新：

使用更新的 cshtml 文件，如果您设置 input type hidden 而不是 style="display:none"

，它运行良好（我刚刚测试过）

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

创建仅将选中的单选按钮作为参数传递的方法调用

Create method call passing only checked radio buttons as parameters

c#

asp.net

jquery

asp.net-mvc-4