![](/img/trans.png)
[英]How to display error messages from server side fluent validation AND client side validation at the same time?
[英]How to display Validation Summary with Client side validation?
我有这个模型:
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:验证客户端时,如何在验证摘要中显示错误消息?
您在页面上有两个验证摘要-一个在表单外部,一个在内部。 客户端验证将仅写入表单内的摘要容器(不确定是有意还是无意)。
表单中的一个被排除在属性级别错误( 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
)-因为客户端验证仅处理属性错误,并且你已经告诉过你你不想要那些。
简而言之,两个问题:
您必须为所有属性使用@Html.ValidationFor(model => model.YourProperty)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.