【问题标题】:Submit multiple radio button values with one button ASP.NET MVC一键提交多个单选按钮值 ASP.NET MVC
【发布时间】:2015-02-12 02:23:49
【问题描述】:

我的页面上有三组单选按钮,我想用一个按钮提交它们的每一个值。

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

我想将字典作为参数发送给控制器操作,以便检索每个评分的值。

控制器如下所示:

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

我试过了:

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

但不允许像这样将字典作为 RouteValue 传递。

如何通过一个按钮 /submit 将所有 3 个单选按钮 [name,value] 对发送到操作?另外,这三个组应该采用相同的形式还是单独的形式?

我愿意使用 javascript,但更喜欢使用 Razor HTML 助手。

谢谢

【问题讨论】:

  • 首先,Razor 代码在发送到视图之前在服务器上进行解析,因此@Url.Action 在任何客户端更改之前呈现一个值。其次,您不能将字典传递给 GET 方法(至少不是那样 - 它需要类似于 this answer 中的内容)。但实际上,您为什么不只是发布表单并绑定到模型?

标签: javascript c# html asp.net asp.net-mvc


【解决方案1】:

型号

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

控制器

    [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();
    }

查看

    @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 将保存包含提交值的字典

【讨论】:

    【解决方案2】:

    您可以使用 FormCollection 在您的帖子中设置单选按钮的值。

    您必须在您的 post 方法中简单地编写 var variable = f["rating1"]; ,然后您就可以在 post 方法中获得您选择的单选按钮值,

       public ActionResult Rate(Guid uniqueId,FormCollection f)
    
           {
    
               var variable1 = f["rating1"]; 
    
               var variable2 = f["rating2"]; 
    
               var variable3 = f["rating3"]; 
    
               [...]
    
           }
    

    【讨论】:

      猜你喜欢
      • 2016-08-02
      • 2016-04-16
      • 1970-01-01
      • 2012-04-08
      • 1970-01-01
      • 2018-05-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多