如何使一组使用MVC 4和视图模型复选框（强类型）(How do I render a group

2019-08-01 07:14发布

站内文章 / 前沿技术
9 0 0

我是相当新的ASP.net MVC的世界，我试图找出如何使一组强类型的视图模型复选框。 在网络表单，我只想用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>
}

Answer 1:

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

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 = "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" }  
            };
        }
    }

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


Answer 2:

使用您的视图模型的字符串数组。 然后，您可以使用我砍死在一起的帮手。 如果你不想使用助手和枚举再看看实际的HTML底部。 粘合剂将返回与仅在它的选择的字符串值的字符串数组。 如果都没有选，返回你的阵列空值。 你必须考虑的是，你已经被警告:)

查看型号： 

[Display(Name = "Which Credit Cards are Accepted:")]
        public string[] CreditCards { get; set; }

帮手： 

public static HtmlString CheckboxGroup<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> propertySelector, Type EnumType)
        {
            var groupName = GetPropertyName(propertySelector);
            var modelValues = ModelMetadata.FromLambdaExpression(propertySelector, htmlHelper.ViewData).Model;//propertySelector.Compile().Invoke(htmlHelper.ViewData.Model);
        StringBuilder literal = new StringBuilder();  

        foreach (var value in Enum.GetValues(EnumType))
        {
            var svalue = value.ToString();
            var builder = new TagBuilder("input");
            builder.GenerateId(groupName);
            builder.Attributes.Add("type", "checkbox");
            builder.Attributes.Add("name", groupName);
            builder.Attributes.Add("value", svalue);
            var contextValues = HttpContext.Current.Request.Form.GetValues(groupName);
            if ((contextValues != null && contextValues.Contains(svalue)) || (modelValues != null && modelValues.ToString().Contains(svalue)))
            {
                builder.Attributes.Add("checked", null);
            }

            literal.Append(String.Format("</br>{1}&nbsp;<span>{0}</span>", svalue.Replace('_', ' '),builder.ToString(TagRenderMode.Normal)));
        }

        return (HtmlString)htmlHelper.Raw(literal.ToString()); 
    }

    private static string GetPropertyName<T, TProperty>(Expression<Func<T, TProperty>> propertySelector)
    {
        var body = propertySelector.Body.ToString();
        var firstIndex = body.IndexOf('.') + 1;
        return body.Substring(firstIndex);
    }

HTML： 

@Html.CheckboxGroup(m => m.CreditCards, typeof(VendorCertification.Enums.CreditCardTypes))

如果助手扩展吓唬你使用这样的： 

            <input id="CreditCards" name="CreditCards" type="checkbox" value="Visa" 
            @(Model.CreditCards != null && Model.CreditCards.Contains("Visa") ? "checked=true" : string.Empty)/>
            &nbsp;<span>Visa</span><br />

            <input id="CreditCards" name="CreditCards" type="checkbox" value="MasterCard" 
            @(Model.CreditCards != null && Model.CreditCards.Contains("MasterCard") ? "checked=true" : string.Empty)/>
            &nbsp;<span>MasterCard</span><br />


Answer 3:

对我来说，这个工程太，我认为这是最简单的（阅读以前的答案）。

该视图模型有复选框的字符串[]。 

    public string[] Set { get; set; }

视图有这个代码，并且可以重复输入你需要很多次。 名称，输入控件的ID必须匹配的视图模型的属性的名称。 

<div class="col-md-3">
  <div class="panel panel-default panel-srcbox">
    <div class="panel-heading">
      <h3 class="panel-title">Set</h3>
    </div>
    <div class="panel-body">
      <div class="form-group-sm">
        <label class="control-label col-xs-3">1</label>
        <div class="col-sm-8">
          <input type="checkbox" id="Set" name="Set" value="1" />
        </div>
        <label class="control-label col-xs-3">2</label>
        <div class="col-sm-8">
          <input type="checkbox" id="Set" name="Set" value="2" />
        </div>
      </div>
    </div>
  </div>
</div>

在柱方法设置变量是一个数组中，具有检查值（S）。



文章来源: How do I render a group of checkboxes using MVC 4 and View Models (strongly typed)
标签： asp.net asp.net-mvc razor asp.net-mvc-4
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~