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

现在转到主视图并使用EditorForhtml helper方法来引入editortemplate

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

这个博客文章中有一个工作样本清楚地解释了这个问题,你可以自己下载并运行它,看看它是如何工作的.