MVC 3 中不显眼的下拉验证

Question

因此，下面的链接概述了 MVC 3 / 使用下拉列表的不显眼验证的问题。 本质上，不会为下拉列表发出客户端验证脚本。 有没有一个简单的解决方法？ 当这个错误在最终发布之前被报告时，我对如何像这样发布 MVC 3 感到困惑。 在我们等待修复时，是否有一个简单的解决方案浮出水面？

也许我独自一人，但似乎验证表单的所有元素很重要。 :)

DropDownListFor() 不显眼的验证问题

Answer 1

我意识到这个问题已经得到解答，但是在过去的一天里，我一直在努力解决这个问题，试图弄清楚为什么上面的示例可以正常工作，但我的代码却没有。

事实证明，如果您尝试使用与设置的属性相同的名称将 select 列表放入您的 ViewData 或 ViewBag 中，那么客户端验证将不起作用。 但是，下拉菜单会填充，因此非常不直观。

// Do NOT do this:
// In the controller:
ViewBag.ItemID = Database.Items.Select(i => new SelectListItem(){Value = i.ID, Text = i.Name});
// In the view:
@Html.DropDownList("ItemID")

// Instead DO this
// In the controller:
ViewBag.ItemIDList = Database.Items.Select(i => new SelectListItem(){Value = i.ID, Text = i.Name});
// In the view:    
@Html.DropDownListFor(m => m.ItemID, (IEnumerable<SelectListItem>)ViewBag.ItemIDList)

虽然前者产生了一个功能完善的下拉菜单，但不知何故它只是没有得到客户端验证。 如果您检查 HTML，“选择”元素上的所有属性都不存在。

这与在 MVC 中填充所有其他字段或编辑器的方式完全相反，因为您可以通过设置 ViewBag.ItemName = "Bob" 来设置默认值和当前值，并且如果您有一个 "ItemName" 文本框，它将填充 "Bob"。

希望我发布这篇文章可以让人们避免同样长达数小时的头痛。

Answer 2

您可以将所需的 data-* 属性附加到元素，以便它们被不显眼的验证脚本拾取。

@Html.DropDownListFor(x => x.People, new SelectList(Model.People,"Id", "Name"), "Select Person", new Dictionary<string, object>() {{ "data-val", "true" }, { "data-val-required", "Please select a person" }} )

Answer 3

它对我来说似乎也很好用

   <p>                                                         
       <p>
            <span class="lbl"> @Html.LabelFor(x => x.SelectedTimeZone, " Select a TimeZone: ")</span>
            <span>@Html.DropDownListFor(x => x.SelectedTimeZone, Model.TimeZones)</span>
            <span class="validation-error">@Html.ValidationMessageFor(x => x.SelectedTimeZone)</span>    
        </p>

//查看model

  [Required(ErrorMessage = "Time zone is required")]
    public string SelectedTimeZone { get; set; }
    public SelectList TimeZones { get; set; }

    public SetupViewModel()
    {
        TimeZones = new SelectList(TimeZoneExtensions.BuildTimeZoneList(), "value", "text", "selected");
        SelectedTimeZone = "UTC";
    }

Answer 4

啊，这很奇怪，因为以下内容对我来说非常好。

查看 model：

public class MyViewModel
{
    [Required]
    public string SelectedItem { get; set; }

    public IEnumerable<SelectListItem> Items
    {
        get
        {
            return Enumerable.Range(1, 5).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = "item " + x
            });
        }
    }
}

Controller：

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

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

看法：

@using AppName.Models
@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.DropDownListFor(
        x => x.SelectedItem,
        new SelectList(Model.Items, "Value", "Text"),
        "-- please select an item --"
    )
    @Html.ValidationMessageFor(x => x.SelectedItem)
    <input type="submit" value="OK" />
}

离开下拉列表而不选择值，客户端验证将立即触发。