asp.net – 如何使用MVC 4和View Models(强类型)渲染一组复选框

我更喜欢ASP.net MVC世界,而我正在试图找出如何渲染一组强大类型的视图模式的复选框.在webforms中,我将使用checkboxlist控件,但是使用MVC有点丢失.

我正在为婚礼策划业务构建一个简单的联系表单,需要将用户选择的任何复选框值传递给我的控制器.

表单复选框需要如下所示：

您的帮助将不胜感激.谢谢！

这是我到目前为止.

CONTROLLER

[HttpPost]
public ActionResult Contact(ContactViewModel ContactVM)
{
    if (!ModelState.IsValid)
    {
        return View(ContactVM);
    }
    else
    {
        //Send email logic

        return RedirectToAction("ContactConfirm");
    }
}

查看模型

public class ContactViewModel
{
    [Required]
    public string Name { get; set; }

    [Required]
    public string Phone { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required]
    public string Subject { get; set; }
    public IEnumerable<SelectListItem> SubjectValues
    {
        get
        {
            return new[]
            {
                new SelectListItem { Value = "General Inquiry",Text = "General Inquiry" },new SelectListItem { Value = "Full Wedding Package",Text = "Full Wedding Package" },new SelectListItem { Value = "Day of Wedding",Text = "Day of Wedding" },new SelectListItem { Value = "Hourly Consultation",Text = "Hourly Consultation" }  
            };
        }
    }


    //Not sure what I should do for checkboxes...

}

视图

@model NBP.ViewModels.ContactViewModel

@{
    ViewBag.Title = "Contact";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm())
{
    <div id="ContactContainer">
        <div><span class="RequiredField">*&nbsp;</span>Your Name:</div>
        <div>
            @Html.TextBoxFor(model => model.Name)
        </div>
        <div><span class="RequiredField">*&nbsp;</span>Your Phone:</div>
        <div>
            @Html.TextBoxFor(model => model.Phone)
        </div>
        <div><span class="RequiredField">*&nbsp;</span>Your Email:</div>
        <div>
            @Html.TextBoxFor(model => model.Email)
        </div>
        <div>Subject:</div>
        <div> 
            @Html.DropDownListFor(model => model.Subject,Model.SubjectValues)
        </div>
        <div>Vendor Assistance:</div>
        <div>

            <!-- CHECKBOXES HERE -->

        </div>
        <div>
            <input id="btnSubmit" type="submit" value="Submit" />
        </div>
    </div>
}

解决方法

您可以丰富您的视图模型：

public class VendorAssistanceViewModel
{
    public string Name { get; set; }
    public bool Checked { get; set; }
}

public class ContactViewModel
{
    public ContactViewModel()
    {
        VendorAssistances = new[]
        {
            new VendorAssistanceViewModel { Name = "DJ/BAND" },new VendorAssistanceViewModel { Name = "Officiant" },new VendorAssistanceViewModel { Name = "Florist" },new VendorAssistanceViewModel { Name = "Photographer" },new VendorAssistanceViewModel { Name = "Videographer" },new VendorAssistanceViewModel { Name = "Transportation" },}.ToList();
    }

    [Required]
    public string Name { get; set; }

    [Required]
    public string Phone { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required]
    public string Subject { get; set; }
    public IEnumerable<SelectListItem> SubjectValues
    {
        get
        {
            return new[]
            {
                new SelectListItem { Value = "General Inquiry",Text = "Hourly Consultation" }  
            };
        }
    }

    public IList<VendorAssistanceViewModel> VendorAssistances { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new ContactViewModel());
    }

    [HttpPost]
    public ActionResult Index(ContactViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        //Send email logic
        return RedirectToAction("ContactConfirm");
    }
}

视图：

@using (Html.BeginForm())
{
    <div id="ContactContainer">
        <div><span class="RequiredField">*&nbsp;</span>Your Name:</div>
        <div>
            @Html.TextBoxFor(model => model.Name)
        </div>
        <div><span class="RequiredField">*&nbsp;</span>Your Phone:</div>
        <div>
            @Html.TextBoxFor(model => model.Phone)
        </div>
        <div><span class="RequiredField">*&nbsp;</span>Your Email:</div>
        <div>
            @Html.TextBoxFor(model => model.Email)
        </div>
        <div>Subject:</div>
        <div> 
            @Html.DropDownListFor(model => model.Subject,Model.SubjectValues)
        </div>
        <div>Vendor Assistance:</div>
        <div>
            @for (int i = 0; i < Model.VendorAssistances.Count; i++)
            {
                <div>
                    @Html.HiddenFor(x => x.VendorAssistances[i].Name)
                    @Html.CheckBoxFor(x => x.VendorAssistances[i].Checked)
                    @Html.LabelFor(x => x.VendorAssistances[i].Checked,Model.VendorAssistances[i].Name)
                </div>
            }
        </div>
        <div>
            <input id="btnSubmit" type="submit" value="Submit" />
        </div>
    </div>
}