在C＃中的MVC分组单选按钮 [英] Grouping radio buttons in c# mvc

问题描述

我有我显示菜单的形式。每个菜单有一节和选择如下：

I Have a form in which I display a menu. Each menu has a section and choices as below:

Starters

Prawn Cocktail 
Soup

Mains

Beef
Lamb

我通过菜单部分和菜单选择该部分循环，每个菜单选项我想要一个单选按钮，将它们分组在一起每小组，以便只有一个菜单选项可以每部分选择。默认顶端选择将被选中。这是我迄今为止

I am looping through the menu sections and menu choices for that section, for each menu option I want a radio button and to group them together per section so that only one menu option can be selected per section. By default the top selection will be selected. This is what I have so far

在模型

public List<MenuCourses> courses {get; set;}
public List<MenuOptions> options {get;set;}

和视图

@for ( int i = 0; i < Model.MenuCourses.Count(); i++ ){

      @Html.DisplayFor(m=> m.MenuCourses[i].CourseTitle )

      // loop options
      for ( int k = 0; k < Model.MenuOptions.Count(); k++ ){

          if(Model.MenuOptions[k].MenuCoursesID == Model.MenuCourses[i].MenuCoursesID){

             @Html.DisplayFor(m=> m.MenuOptions[k].Title)
             //NEED RADIO BUTTON HERE BUT HOW DO I BIND TO THE MODEL?

           }
       }

我需要每个菜单选项有分组到该部的单选按钮，并且当用户点击保存我需要拿起哪个菜单选项已经被选择。

I need each menu option to have a radio button grouped to that section, and when the user hits save I need to pick up which menu options has been selected.

任何帮助将大大AP preciated

Any help would be greatly appreciated

在此先感谢

推荐答案

您可以做到这一点的 EditorTemplates 。

You can do this with EditorTemplates.

让我们创建3视图模型为我们的场景。

Let's create 3 view models for our scenario.

public class Course
{
    public int ID { set; get; }
    public string Name{ set; get; }
    public List<Option> Options{ set; get; }
    public int SelectedAnswer { set; get; }
    public Course()
    {
        Options= new List<Option>();
    }
}
public class Option
{
    public int ID { set; get; }
    public string Title { set; get; }
}
public class OrderViewModel 
{
    public List<Course> Courses{ set; get; }
    public OrderViewModel()
    {
        Courses= new List<Course>();
    }
}

在该视图我们的 GET 操作方法，我们将创建OrderViewModel类的一个对象，并设置课程集合，它的选项属性，然后发送到视图通过它传递给视图的方法。

In our GET action method for the view, we will create an object of our OrderViewModel class and set the Course collection and it’s Options properties and then send that to the view by passing it to the View method.

public ActionResult Index()
{
    var vm= new OrderViewModel();

    //the below is hard coded for DEMO. you may get the data from some  
    //other place and set the course and options

    var q1 = new Course { ID = 1, Name= "Starters" };
    q1.Options.Add(new Option{ ID = 12, Title = "Prawn Cocktail " });
    q1.Options.Add(new Option{ ID = 13, Title = "Soup" });
    vm.Courses.Add(q1);     

    var q2 = new Course { ID = 1, Name= "Mains" };
    q2.Options.Add(new Option{ ID = 42, Title = "Beef" });
    q2.Options.Add(new Option{ ID = 43, Title = "Lamp" });
    vm.Courses.Add(q2);

   return View(vm);           
}

现在转到〜/查看/ YourControllerName 文件夹，并创建一个文件夹，名为 EditorTemplates 。名称为创建一个新的观点有 Course.cshtml 。下面code添加到该文件

Now go to the ~/Views/YourControllerName folder and create a folder called EditorTemplates. Create a new view there with the name Course.cshtml. Add the below code to that file

@model Course
<div>
    @Html.HiddenFor(x=>x.ID)
    <h3> @Model.Name</h3>
    @foreach (var a in Model.Options)
    {
       <p>
          @Html.RadioButtonFor(b=>b.SelectedAnswer,a.ID)  @a.Title
       </p>
    }
</div>

现在转到主视图，并使用 EditorFor HTML辅助方法带来的editortemplate

Now go to the main view and use EditorFor html helper method to bring the editortemplate

@model OrderViewModel 
<h2>Your Order</h2>
@using (Html.BeginForm())
{
    @Html.EditorFor(x=>x.Courses)
    <input type="submit" />
}

要获得形式选定的项目提交，你可以做到这一点。

To get the selected items on form submit, you can do this

[HttpPost]
public ActionResult Index(OrderViewModel model)
{
    if (ModelState.IsValid)
    {
        foreach (var q in model.Courses)
        {
            var qId = q.ID;
            var selectedAnswer = q.SelectedAnswer;
            // Save the data 
        }
        return RedirectToAction("ThankYou"); //PRG Pattern
    }
    //to do : reload courses and options on model.
    return View(model);
}

这显然是在这个博客帖子与您可以下载并运行自己，看看它是如何工作的一个工作样本。

This is clearly explained in this blog post with a working sample which you can download and run yourself and see how it works.

这篇关于在C＃中的MVC分组单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！