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方法将其发送到视图。 / p>

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帮助方法来进行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);
}

这在this blog post中已经清楚地解释了一个工作样本，您可以自行下载并运行它，看看它是如何工作的。

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

1 个答案: