ASP.NET MVC 3.0 Razor 学习笔记之三

ASP.NET MVC 3.0 Razor 和 ASP.NET 2.0 的 Razor 使用jquery 验证差别不是很大，2.0 是我们自己在页面写的ID ，3.0 Razor 自动使用我们的属性值作为ID。

继续昨天的学习，在页面引用jqeury类库，在Scripts文件夹里面有。

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

然后注释我们后台的ajax 验证，如果是DataTime类型，MVC 框架会强制的验证，不管你是否在属性上面贴了 [Required]

public class News
{
//[Required]
[Display(Name = "公告名称")]
public string NewsName { get; set; }

// [Required]
[Display(Name = "创建时间")]
public DateTime CreateDate { get; set; }

// [Required]
[Display(Name = "公告类型")]
public string NewsType { get; set; }

// [Required]
[Display(Name = "公告类容")]
public string Content { get; set; }
}

然后我们在View 里面写jqeury 代码来验证，建立一个newsvalidate.js

$(document).ready(function () {

$("#submit").click(function () {

if ($("#NewsName").attr("value") == "" || $("#CreateDate").attr("value") == "") {

if ($("#NewsName").attr("value") == "") {
alert("消息名称不能为空");
}
if ($("#CreateDate").attr("value") == "") {
alert("创建时间不能为空");
}

}
})
});

页面引用 ：

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

@model RazorApplication.Models.News
<script src="@Url.Content("~/Scripts/jquery-1.4.4.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>
<script src="@Url.Content("~/Scripts/newsvalidate.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>News</legend>
<div class="editor-label">
@Html.LabelFor(model => model.NewsName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.NewsName)
@Html.ValidationMessageFor(model => model.NewsName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CreateDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CreateDate)

</div>
<div class="editor-label">
@Html.LabelFor(model => model.NewsType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.NewsType)
@Html.ValidationMessageFor(model => model.NewsType)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Content)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Content)
@Html.ValidationMessageFor(model => model.Content)
</div>
<p>
<input id="submit" type="submit" value="Create" />
</p>
</fieldset>

}

然后验证结果：



后面继续补充，json 的应用！