2

メニューを表示するフォームがあります。各メニューには、以下のセクションと選択肢があります。

Starters

Prawn Cocktail 
Soup

Mains

Beef
Lamb

メニュー セクションとそのセクションのメニュー選択をループしています。メニュー オプションごとにラジオ ボタンが必要で、セクションごとにグループ化して、セクションごとに 1 つのメニュー オプションのみを選択できるようにします。デフォルトでは、一番上の選択が選択されます。これは私がこれまでに持っているものです

モデルでは

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?

           }
       }

各メニュー オプションには、そのセクションにグループ化されたラジオ ボタンが必要です。ユーザーが [保存] をクリックすると、どのメニュー オプションが選択されているかを取得する必要があります。

どんな助けでも大歓迎です

前もって感謝します

4

1 に答える 1

7

これは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 ヘルパー メソッドを使用してエディター テンプレートを表示します。

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

これについては、このブログ投稿で明確に説明されており、ダウンロードして自分で実行し、どのように機能するかを確認できる実際のサンプルが含まれています。

于 2012-10-16T20:34:41.963 に答える