创建仅通过选中的单选按钮作为参数的方法调用

时间:2019-03-21 17:10:52

标签: c# jquery asp.net asp.net-mvc-4

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

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

1 个答案:

答案 0 :(得分:0)

我使用GET方法创建了一个满足您要求的示例。

使用AJAX get和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, '$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>

更新:

使用更新的cshtml文件,如果您设置input type hidden而不是style="display:none",则效果很好(我刚刚测试过)

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