Razor 填充下拉列表

Question

在我的页面上，我想在下拉列表中包含一个成员列表，但我不确定我该怎么做。

如何使用我通过控制器传递的成员填充下拉列表？

这是我的控制器

 //Add Event
            public ActionResult CreateEvent()
            {    
                var members = db.ClubMembers.ToList();
                return View(members);
            }

            //Add Event
            [HttpPost]
public ActionResult CreateEvent(ClubEvent incomingEvent)
            {
                try
                {
                    if (ModelState.IsValid)
                    {
                        using (var db = new UltimateDb())
                        {
                            db.ClubEvents.Add(incomingEvent);
                            db.SaveChanges();
                        }
                        return RedirectToAction("Index");
                    }
                    return View();
                }
                catch
                {
                    return View();
                }
            }

这是我将使用的视图

@model ultimateorganiser.Models.ClubEvent

@{
    ViewBag.Title = "CreateEvent";
}

<h2>CreateEvent</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>ClubEvent</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        @*Event Title*@
        <div class="form-group">
            @Html.LabelFor(model => model.EventTitle, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EventTitle, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EventTitle, "", new { @class = "text-danger" })
            </div>
        </div>


        @*Event Description*@
        <div class="form-group">
            @Html.LabelFor(model => model.EventDesc, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EventDesc, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EventDesc, "", new { @class = "text-danger" })
            </div>
        </div>

        @*Event Type*@
        <div class="form-group">
            @Html.LabelFor(model => model.eventType, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.eventType, htmlAttributes: new { @class = "form-control", @id = "dropdown" })
                @Html.ValidationMessageFor(model => model.eventType, "", new { @class = "text-danger" })
            </div>
        </div>

        @*Add People*@
        @*<div class="form-group">
            Add Members
            <div class="col-md-10">

                Drop Down List of members will go here

            </div>
        </div>*@

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Answer 1

在视图和操作方法之间传递数据的最佳方式是视图模型。我们将采用这种方式。

首先为创建视图创建一个新的视图模型。

public class CreateEventVm
{
  public string EventDescription {set;get;}
  public List<SelectListItem> Members {set;get;}
  public int MemberId {set;get;}
}

在你的 GET 操作中

public ActionResult Create()
{
  var vm = new CreateEventVm();
  var db= new UltimateDb();
  vm.Members =db.Members.Select(s=> new SelectListItem 
                   { Value=s.Id.ToString(),
                     Text = s.Name
                   }).ToList();
  return View(vm);
}

还有你创建的剃刀视图，它是强类型到我们新的 CreateEventVm 的

@model CreateEventVm
@using(Html.BeginForm())
{
  <label>Description</label>
  @Html.TextBoxFor(s=>s.EventDescription)
  <label>Member</label>
  @Html.DropDownListFor(s=>s.MemberId,Model.Members,"Select one")
  <input type="submit" />
}

在你的 HttpPost 操作方法中

[HttpPost]
public ActionResult Create(CreateEventVm model)
{
  if(ModelState.IsValid)
  {
    using (var db = new UltimateDb())
    {
      var event = new ClubEvent();
      event.EventDescription = model.EventDescription;
      //Set other properties also from view model.

      db.ClubEvents.Add(event);
      db.SaveChanges();
    }

    // Redirect to another action after successful save (PRG pattern)
    return RedirectToAction("SavedSuccessfully");
  }
  vm.Members =db.Members.Select(s=> new SelectListItem 
                       { Value=s.Id.ToString(),
                         Text = s.Name
                       }).ToList();
  return View(vm);
}