Sae*_*eid 11 javascript asp.net-mvc razor unobtrusive-validation asp.net-mvc-3
我在这里问类似的问题,但是在这个问题中我使用了另一个实现,正是这种方式下面的代码显示了我的实现:
模型:
public class Department {
public long Id { get; set; }
[IsDateAfter("Date2", true, ErrorMessage = "O My")]
public DateTime Date1 { get; set; }
public DateTime Date2 { get; set; }
public string Name1 { get; set; }
public string Name2 { get; set; }
}
Run Code Online (Sandbox Code Playgroud)
自定义验证器:
public sealed class IsDateAfter : ValidationAttribute, IClientValidatable {
private readonly string testedPropertyName;
private readonly bool allowEqualDates;
public IsDateAfter(string testedPropertyName, bool allowEqualDates = false)
{
this.testedPropertyName = testedPropertyName;
this.allowEqualDates = allowEqualDates;
}
protected override ValidationResult IsValid(object value, ValidationContext
validationContext) {
var propertyTestedInfo =
validationContext.ObjectType.GetProperty(this.testedPropertyName);
if (propertyTestedInfo == null) {
return new ValidationResult(string.Format("unknown property
{0}", this.testedPropertyName));
}
var propertyTestedValue =
propertyTestedInfo.GetValue(validationContext.ObjectInstance, null);
if (value == null || !(value is DateTime)) {
return ValidationResult.Success;
}
if (propertyTestedValue == null || !(propertyTestedValue is
DateTime)) {
return ValidationResult.Success;
}
// Compare values
if ((DateTime)value >= (DateTime)propertyTestedValue) {
if (this.allowEqualDates) {
return ValidationResult.Success;
}
if ((DateTime)value > (DateTime)propertyTestedValue) {
return ValidationResult.Success;
}
}
return new
ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
public IEnumerable<ModelClientValidationRule>
GetClientValidationRules(ModelMetadata metadata, ControllerContext context) {
var rule = new ModelClientValidationRule {
ErrorMessage = this.ErrorMessageString,
ValidationType = "isdateafter"
};
rule.ValidationParameters["propertytested"] =
this.testedPropertyName;
rule.ValidationParameters["allowequaldates"] =
this.allowEqualDates;
yield return rule;
}
}
Run Code Online (Sandbox Code Playgroud)
脚本:
$.validator.unobtrusive.adapters.add(
'isdateafter', ['propertytested', 'allowequaldates'], function (options) {
options.rules['isdateafter'] = options.params;
options.messages['isdateafter'] = options.message;
});
$.validator.addMethod("isdateafter", function (value, element, params) {
alert(params.propertytested);
var startdatevalue = $('input[name="' + params.propertytested + '"]').val();
if (!value || !startdatevalue) return true;
return (params.allowequaldates) ? Date.parse(startdatevalue) <= Date.parse(value) :
Date.parse(startdatevalue) < Date.parse(value);
}, '');
Run Code Online (Sandbox Code Playgroud)
和我的_Layout页面(母版页)
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jQuery.IsDateAfter.js")"
type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Departments", "Index", "Department")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
当然,在"编辑和创建视图"页面中,其他脚本源如下:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
Create Page Dom的一部分:
<fieldset>
<legend>Department</legend>
<div class="editor-label">
<label for="Date1">Date1</label>
</div>
<div class="editor-field">
<input id="Date1" class="text-box single-line valid" type="text" value="" name="Date1"
data-val-required="The Date1 field is required." data-val-isdateafter-
propertytested="Date2" data-val-isdateafter-allowequaldates="False" data-val-
isdateafter="O My" data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-
for="Date1"></span>
</div>
<div class="editor-label">
<label for="Date2">Date2</label>
</div>
<div class="editor-field">
<input id="Date2" class="text-box single-line valid" type="text" value="" name="Date2"
data-val-required="The Date2 field is required." data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-
for="Date2"></span>
</div>
Run Code Online (Sandbox Code Playgroud)
我尝试所有的实施是相同的位置,但在客户端无法正常工作,需要回传,我没有任何其他的实现,例如在Global.asax中注册像这样,是否有任何人知道这件事?我真的很困惑,我试过2路,但没有一个给出真正的答案.
你弄乱了你的脚本包含.在_Layout中,您按顺序包含以下脚本:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jQuery.IsDateAfter.js")" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
现在很明显jquery.validate.min.js并jquery.validate.js代表相同的脚本,第一个是缩小版本.但是由于您没有包含jquery.validate.unobtrusive.js脚本(这在您的视图中稍后会执行),因此您的自定义jQuery.IsDateAfter.js脚本将包含错误,因为它不会知道$.validator.unobtrusive.adapters您正在使用的对象.所以这里是布局中的脚本应该如何看起来:
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
jQuery.IsDateAfter.js如果您希望在多个视图中使用自定义脚本,并且可以将其添加到视图中,您也可以将自定义脚本添加到最后的布局中:
<script src="@Url.Content("~/Scripts/jQuery.IsDateAfter.js")" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
这是视图中应该拥有的唯一脚本.您应该jquery.*从"编辑和创建视图"页面中删除任何其他脚本包含.
备注:您还会注意到我Microsoft*.js已从您的布局中删除了所有脚本.它们已过时,不应再用于ASP.NET MVC 3.
| 归档时间: |
|
| 查看次数: |
11800 次 |
| 最近记录: |