驗證消息沒有顯示在客戶端

Question

這裏是我的模型

public partial class Asset 
{ 
    public long ID { get; set; } 
    [RegularExpression("^[0-9]*$", ErrorMessage = "Title must be numeric")] 
    public string Title { get; set; } 
    public string Description { get; set; } 
} 

在我看來

<div class="Content-inner-pages"> 
<div class="TopHeading TopHeading2"> 
    <h2>Assets</h2> 
    @* @Html.ActionLink("Create", "Create")*@ 
    <a class="CreateBtn AssetsBtn" href="Javascript:void(0);" onclick="javascript: HideUpdateButton();">Add Asset</a> 
    <div class="clearfix"></div> 
</div> 
<input type="hidden" id="hdnIsNew" value="1" /> 
<input type="hidden" id="hdnRecId" /> 
<!-- Slide Popup panel --> 
<div class="cd-panel from-right AddAssetForm"> 
    <header class="cd-panel-header"> 
     <h3>Add Asset</h3> 
     <a href="javascript:void(0);" onclick="javascript: DisplayClear();" class="cd-panel-close">Close</a> 
    </header> 
    <div class="cd-panel-container"> 
     <div class="cd-panel-content"> 
      <!-- Add Reminder --> 
      <div class="form-horizontal form-details popup-box"> 
       @using (Html.BeginForm("AssetsPage", "SuperAdmin", FormMethod.Post, new { enctype = "multipart/form-data" })) 
       { 
        <div class="form-group"> 
         <label class="col-md-5 control-label"> 
          Asset Title 
         </label> 
         @Html.TextArea("ID", "", new { @class = "form-control", @id = "ID", @style = "display:none;" }) 
         <div class="col-md-7"> 
          @Html.TextBox("Title", "", new { @class = "form-control", @id = "Title", required = "required" }) 
          @Html.ValidationMessage("Title", "*") 

         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-5 control-label">Description</label> 
         <div class="col-md-7"> 
          @Html.TextArea("Description", "", new { @class = "form-control", @id = "Description", required = "required" }) 
          @Html.ValidationMessage("Description", "*") 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-5 control-label">Attachment</label> 
         <div class="col-md-7"> 
          <input type="file" name="file" id="filena" class="custom-file-input" required="required"> 
          @Html.ValidationMessage("file", "*") 

         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-7 col-md-offset-5"> 

          <input type="submit" id="SaveBtn" value="Save" name="actiontype" class="btn-class btn-success"> 
          <input type="submit" id="UpdateBtn" value="Update" name="actiontype" class="btn-class btn-success"> 

         </div> 
        </div> 
       } 
      </div><!-- End Add Reminder --> 

     </div> <!-- cd-panel-content --> 
    </div> <!-- cd-panel-container --> 
</div> <!-- cd-panel --> 

<div class="box"> 
    <div class="box-content Custom-DataTable"> 
     <table id="AdministationAssets" class="table table-hover dt-responsive CustomDatable AdministationAssetsTable" cellspacing="0" width="100%"> 
      <thead> 
       <tr> 
        <th style="width:5%;">Assets</th> 
        <th style="width:15%;"> 
         @Html.DisplayNameFor(model => model.Title) 
        </th> 
        <th style="width:50%;"> 
         @Html.DisplayNameFor(model => model.Description) 
        </th> 
        <th style="width:8%;">Options</th> 
       </tr> 
      </thead> 
      <tbody> 

       @foreach (var item in Model) 
       { 
        <tr> 
         <td id="target" class=""> 
          @{ 
        switch (item.Extenstion.ToLower()) 
        { 
         case "doc": 
          <i class="fa fa-file-word-o text-primary AssetIcon"></i> 
          break; 
         case "docx": 
         <i class="fa fa-file-word-o text-primary AssetIcon"></i> 
          break; 
         case "xls": 
         <i class="fa fa-file-excel-o text-success AssetIcon"></i> 
          break; 
         case "xlsx": 
         <i class="fa fa-file-excel-o text-success AssetIcon"></i> 
          break; 
         case "ppt": 
         <i class="fa fa-file-powerpoint-o text-danger AssetIcon"></i> 
          break; 
         case "jpg": 
         <i class="fa fa-file-photo-o text-warning AssetIcon"></i> 
          break; 
         case "png": 
         <i class="fa fa-file-photo-o text-warning AssetIcon"></i> 
          break; 
         case "pdf": 
         <i class="fa fa-file-pdf-o text-danger AssetIcon"></i> 
          break; 
         case "zip": 
         <i class="fa fa-file-archive-o text-muted AssetIcon"></i> 
          break; 
         case "htm": 
         <i class="fa fa-file-code-o text-info AssetIcon"></i> 
          break; 
         case "txt": 
         <i class="fa fa-file-text-o text-info AssetIcon"></i> 
          break; 
         case "mov": 
         <i class="fa fa-file-movie-o text-warning AssetIcon"></i> 
          break; 
         case "mp3": 
         <i class="fa fa-file-audio-o text-warning AssetIcon"></i> 
          break; 

         default: 
         <i class="fa fa-file AssetIcon"></i> 
          break; 
        } 
          } 
         </td> 
         <td> 
          @Html.DisplayFor(modelItem => item.Title) 
         </td> 
         <td> 
          @Html.DisplayFor(modelItem => item.Description) 
         </td> 
         <td> 
          @Html.ActionLink("Download", "DownloadAsset", new { id = item.ID }, new { @class = "ActionInvoice" }) 
          @Html.ActionLink("Edit", "AddEditRecord", new { id = item.ID }, new { @class = "ActionEdit AssetEdit", onclick = "javascript:GetEditDetails(" + item.ID + ")" }) 
          @Html.ActionLink("Delete", "AssetDelete", new { id = item.ID }, new { @class = "ActionDelete", onclick = "return confirm('Are You Sure delete this record?');", }) 

         </td> 
        </tr> 
       } 
      </tbody> 
     </table> 
    </div> 
</div> 

的事情是驗證正在發生的必填字段，正則表達式的數字號碼，但錯誤消息不會顯示正則表達式，因爲我想顯示該錯誤：標題必須是數字。 請在應用驗證時讓我知道我在這裏做錯了什麼。

Answer 1

你沒有得到任何驗證的原因是，在您的視圖模型是

@model IEnumerable<Asset> 

和你不存在於模型的屬性產生輸入

@Html.TextBox("Title") 

創建<input name="Title" id = "Title" value="" />但IEnumerable<Asset>沒有名爲Title的屬性，因此沒有生成data-val-*屬性，因此沒有規則添加到$.validator以生成客戶端驗證。

請注意，唯一驗證您獲取的是由於添加了new { required = "required" }屬性，它只是HTML-5驗證，並且不會爲您提供基本的服務器端驗證。

您可以通過創建一個視圖模型

public class AssetVM 
{ 
    public long? ID { get; set; } 
    [Required(ErrorMessage = "Please enter a title")] 
    [RegularExpression("^[0-9]*$", ErrorMessage = "Title must be numeric")] 
    public string Title { get; set; } 
    [Required(ErrorMessage = "Please enter a description")] 
    public string Description { get; set; } 
    public IEnumerable<Asset> Assets { get; set; } 
} 

，並在控制器解決這個問題，初始化一個新的AssetVM和填充Assets屬性與收集並返回到視圖。

var model = new AssetVM() 
{ 
    Assets = .... // your query 
}; 
return View(model); 

，並在視圖

@model AssestVM 
.... 
@using (Html.BeginForm("AssetsPage", "SuperAdmin", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.HiddenFor(m => m.ID) 
    .... 
    @Html.TextBoxFor(m => m.Title, new { @class = "form-control"}) 
    @Html.ValidationMessage(m => m.Title) 
    .... 
} 
.... 
@foreach(var asset in Model.Assets) 
{ 
    // build your table 
} 

另一種方法是保留現有的@model IEnumerable<Asset>並創建一個返回您的形式爲Asset，並在主視圖，然後使用@Html.Partial("_Asset", new Asset())產生的局部視圖主視圖中的表單。

旁註：

1. 使用@Html.HiddenFor()產生風格作爲ID，不是 textarea的輸入隱藏
2. 沒有必要使用new { id = "###" } - 在HtmlHelper 方法已經添加id屬性並且您剛剛用相同的值覆蓋 值
3. 刪除new { required = "required" }屬性使用 Unobtrusive Javascript而不是 行爲
4. 污染您的標記由於您是上傳文件，視圖模型也應該 包含一個屬性public HttpPostedFileBase File { get; set; } 和形式@Html.TextBoxFor(m => m.File, new { type = "file" })。你也應該考慮爲文件的顯示名稱 一個屬性，以便可以輸出視圖
5. 考慮增加一個屬性爲類名的視圖模型 避免在視圖中的醜陋switch聲明（設置在 控制器）
6. 刪除操作應該是一個POST，而不是GET

有關如何實現這一點的工作示例，請參閱this DotNetFiddle，雖然你的情況，因爲你也在上傳文件，您需要使用FormData發佈表單，如this answer