DropDownListFor Unobtrusive Validation required 沒有得到正確的屬性

這個問題是相似的，但接受的答案解決了伺服器端，我對客戶端解決方案感興趣。

鑑於此 ViewModel

public class MyViewModel
{
   public string ID { get; set; }

   [Required(ErrorMessage = "I DEMAND YOU MAKE A CHOICE!")]
   [Display(Name = "Some Choice")]
   public int SomeChoice{ get; set; }   
   [Required(ErrorMessage = "I DEMAND YOU MAKE A CHOICE!")]
   [Display(Name = "Keyword")]
   public string Keyword { get; set; }    
}

和剃須刀

<div>
@Html.LabelFor(model => model.SomeChoice, new { @class = "label" })
@Html.DropDownListFor(model => model.SomeChoice, (SelectList)ViewBag.SomeChoice, "Select...")
@Html.ValidationMessageFor(model => model.SomeChoice)
</div>

並假設 ViewBag.SomeChoice 包含一個選擇列表

呈現的 html 沒有得到 data-val=“true” data-val-required=“I DEMAND YOU MAKE A CHOICE！” 其中的屬性，如 @Html.EditorFor(model => model.Keyword) 或 @Html.TextBoxFor 將呈現。

為什麼？

像這樣添加一個class =“required”

@Html.DropDownListFor(model => model.SomeChoice, (SelectList)ViewBag.SomeChoice, "Select...", new { @class = "required" })

它使用 jQuery Validation 類語義並在送出時阻止但不顯示消息。我可以做這種事情

@Html.DropDownListFor(model => model.SomeChoice, (SelectList)ViewBag.SomeChoice, "Select...", new Dictionary<string, object> { { "data-val", "true" }, { "data-val-required", "I DEMAND YOU MAKE A CHOICE!" } })

它將把正確的屬性放在那裡，並阻止送出並顯示消息，但沒有利用我在 ViewModel 上的RequiredAttribute ErrorMessage

那麼有沒有人寫過一個 DropDownListFor，它在驗證方面的行為與其他 HtmlHelpers 一樣？

編輯 這是我的確切程式碼

在 HomeController.cs

 public class MyViewModel
 {
   [Required(ErrorMessage = "I DEMAND YOU MAKE A CHOICE!")]
   [Display(Name = "Some Choice")]
   public int? SomeChoice { get; set; }
 }


   public ActionResult About()
   {
       var items = new[] { new SelectListItem { Text = "A", Value = "1" }, new SelectListItem { Text = "B", Value = "2" }, new SelectListItem { Text = "C", Value = "3" }, };
       ViewBag.SomeChoice = new SelectList(items,"Value", "Text");
       ViewData.Model = new MyViewModel {};
       return View();
   }

關於.cshtml

@using Arc.Portal.Web.Host.Controllers
@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())
{
<div>
   @Html.LabelFor(model => model.SomeChoice)
   @Html.DropDownListFor(model => model.SomeChoice, (SelectList)ViewBag.SomeChoice, "Select...")
   @Html.ValidationMessageFor(model => model.SomeChoice)
</div>

<button type="submit">OK</button>
}

這是渲染的程式碼

<form action="/Home/About" method="post">    <div>
   <label for="SomeChoice">Some Choice</label>
   <select id="SomeChoice" name="SomeChoice"><option value="">Select...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
   <span class="field-validation-valid" data-valmsg-for="SomeChoice" data-valmsg-replace="true">    </span>
</div>
<button type="submit">OK</button>
</form>

它發回給我的控制器……這不應該發生

只需在您將下拉列表綁定到視圖模型的屬性上使用可為空的整數：

[Required(ErrorMessage = "I DEMAND YOU MAKE A CHOICE!")]
[Display(Name = "Some Choice")]
public int? SomeChoice { get; set; }  

此外，為了獲得適當的不顯眼的 HTML5 data-* 屬性，下拉列表必須在表單內：

@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())
{
   <div>
       @Html.LabelFor(model => model.SomeChoice, new { @class = "label" })
       @Html.DropDownListFor(
           model => model.SomeChoice, 
           Model.ListOfChoices, 
           "Select..."
       )
       @Html.ValidationMessageFor(model => model.SomeChoice)
   </div>

   <button type="submit">OK</button>
}

此外，您會注意到我擺脫了ViewBag（我根本無法忍受）並將其替換為您的視圖模型上的相應屬性，該屬性將包含下拉菜單的可能選項。

引用自：https://stackoverflow.com/questions/7828957