2

我有这个模型：

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：验证客户端时如何在验证摘要中显示我的错误消息？

4

2 回答 2

3

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

表单中的一个用于排除属性级别的错误（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) - 因为客户端验证仅处理属性错误，而您已经告诉过它你不想要那些。

简而言之，有两个问题：

  • 客户端验证不会使用表单外的验证摘要
  • 只有当服务器上已经出现验证错误时，才会输出表单内的验证摘要。
于 2013-07-10T16:34:35.153 回答
1

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

于 2013-07-10T16:11:54.527 回答