在 c# mvc 中对单选按钮进行分组

Question

我有一个显示菜单的表单。每个菜单都有一个部分和选项如下：

Starters

Prawn Cocktail 
Soup

Mains

Beef
Lamb

我正在循环浏览该部分的菜单部分和菜单选项，对于每个菜单选项我想要一个单选按钮并将它们按部分组合在一起，以便每个部分只能选择一个菜单选项。默认情况下，将选择顶部选择。这就是我目前所拥有的

在模型中

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?

           }
       }

我需要每个菜单选项都有一个单选按钮分组到该部分，当用户点击保存时，我需要选择已选择的菜单选项。

任何帮助将不胜感激

提前致谢

Answer 1

您可以使用 EditorTemplates 做到这一点。

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

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 类的对象并设置 Course 集合及其 Options 属性，然后通过将其传递给 View 方法将其发送到视图。

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

现在转到~/Views/YourControllerName 文件夹并创建一个名为EditorTemplates 的文件夹。在那里创建一个名为 Course.cshtml 的新视图。将以下代码添加到该文件中

@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 helper 方法带上编辑器模板

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

要在表单提交中获取所选项目，您可以这样做

[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 blog post 中有明确的解释，您可以下载并运行自己的工作示例，看看它是如何工作的。