第一種用法:
在MVC中,依然可以使用ajax校驗,跟在WebForm中的使用時一樣的,唯一的區別就是將以前的URL路勁改為訪問控制器下的行為
前台
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.post("/Home/ShowUserName", {}, function (data) {
var data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
$("#div").append(data[i]);
}
})
})
});
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="加載"/>
<div id="div"></div>
</div>
</body>
</html>
后台
public ActionResult ShowUserName()
{
IQueryable<string> teacherNameList= dbContext.Teacher.Select(u => u.TeacherName);
JavaScriptSerializer js = new JavaScriptSerializer();
string nameList= js.Serialize(teacherNameList);
return Content(nameList);
}
其實對於MVC中已經對json做了更好的封裝,就后台代碼而言,可以返回JsonResult,所以可以省掉自己手寫JavaScriptSerializer類
第二種用法:
MVC中已經對ajax校驗進行了很好的封裝,可以使用相關的類庫直接點出來。
Ajax.BeginForm(...)
首先因為即使微軟的MVC進行封裝了,它依然依賴於ajax,所以需要添加相應的j文件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function Hello(data)
{
alert("hello"+data);
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("Index1", "ajax", new AjaxOptions() { Confirm = "確定要刪除嗎", HttpMethod = "post", OnSuccess = "Hello" }))
{
<input type="submit" value="提交" />
}
</div>
</body>
</html>
上面的代碼實現了異步提交的操作,當然Ajax.BeginForm有很多的重載,可以實現基本所有的手寫的功能,同時發現其中的提交按鈕的類型是submit類型,但是依然是走的異步調用的流程,具體的原因是,隱式JS文件中,首先會找到這個打了標記的Form表單,然后將表單中的數據進行異步傳輸,而不會受到后面這個提交按鈕的影響。
