Question

我有这个型号：

namespace CameraWebApp.Models
{
    public class Images
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int ImageId { get; set; }
        [Required(ErrorMessage="Please enter your first name")]
        public string SubmitterFirstName { get; set; }
        [Required(ErrorMessage = "Please enter your surname name")]
        public string SubmitterLastName { get; set; }
        [ExistingFileName]
        public string NameOfImage { get; set; }
        [StringLength(140, ErrorMessage="Please reduce the length of your description to below 140 characters")]
        [DataType(DataType.MultilineText)]
        public string DescriptionOfImage { get; set; }
        public string ImagePath { get; set; }
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public DateTime DateAdded { get; set; }
    }
}

每个属性都有一些数据注释，我用它来验证服务器端并在验证摘要中显示错误消息，我的视图如下所示：

@model CameraWebApp.Models.Images
<video id="video">
</video>
<div id="main">
<h1>
    Instructions
</h1>
<ul>
    <li>Above: Live video stream from your computer's camera.</li>
    <li>Press "Camera button" (right in RED) until you are happy with the photo captured.</li>
    <li>Copy and paste the "big text string" into the address bar of your browser.</li>
    <li>What do you see?</li>
    <li>What applications can you imagine for this UI?</li>
</ul>
</div>
<div id="sidebar">
<div id="canvasHolder">
    <canvas id="hiddenCanvas">
    </canvas>
</div>
<div id="errorMessages">
@Html.ValidationSummary(false)
</div>
<img id="preview" width="160" height="120" src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder-hi.png" alt="default portrait image">      
<!--<a id="button">Camera button</a>-->
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<label>base64 image:</label>
<input id="imageToForm" type="text" name="imgEncoded"/>  
<label>First Name</label>
@Html.EditorFor(model => model.SubmitterFirstName)
<label>Last Name</label>
@Html.EditorFor(model => model.SubmitterLastName)
<label>Name of Image</label>
@Html.EditorFor(model => model.NameOfImage)
<label>Image Description</label>
@Html.EditorFor(model => model.DescriptionOfImage)
<input type=button id="button"value=" Camera button"/>
<input type="submit" value="Click this when your happy with your photo"/>
}
</div>
@Html.ActionLink("gfd!!", "DisplayLatest");

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

错误消息显示上面的代码很好，我的问题是我然后尝试开始添加客户端验证并将以下代码添加到我的_Layout：

<script src="http://localhost:55928/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="http://localhost:55928/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="http://localhost:55928/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://localhost:55928/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

实际上在客户端进行验证，因为我可以从查看源查看，但它没有显示任何错误消息？有谁知道A：为什么它不再显示我的错误信息？ B：验证客户端时如何在验证摘要中显示错误消息？

Answer 1

页面上有两个验证摘要 - 一个在表单外部，一个在内部。客户端验证只会写入内部表单中的汇总容器（不确定是故意还是疏忽）。

表单中的一个用于排除属性级别错误（true参数）并仅显示模型范围的错误。

现在，ValidationSummary帮助程序在生成HTML时执行此操作（修改源以适应stackoverflow宽度）：

if (htmlHelper.ViewData.ModelState.IsValid)
{
    // [snip]

    // TODO: This isn't really about unobtrusive; can we fix up 
    // non-unobtrusive to get rid of this, too?
    if (htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled 
        && excludePropertyErrors)
    {
       // No client-side updates
       return null;
    }
}

excludePropertyErrors是您设置为true的内容。如果返回HTML时ModelState上没有错误，并且您已经告诉它排除属性错误，它将不会输出验证摘要容器（return null） - 因为客户端验证只处理属性错误，你告诉它你不想要那些。

简而言之，有两个问题：

客户端验证不会使用表单
如果服务器上已经存在验证错误，则仅输出表单内的验证摘要。

Answer 2

您必须对所有属性使用@Html.ValidationFor(model => model.YourProperty)

如何使用客户端验证显示验证摘要？

2 个答案: