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

離開下拉列表而不選擇值，客戶端驗證將立即觸發。