View
<script type="text/javascript">
function GetTime() {
$.get("Home/GetTime", function (response) {
$("#myPnl").html(response);
}); return false;
}
</script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
<a href="#" onclick="return GetTime();">Click Me</a>
Controller
public ActionResult GetTime()
{
return Content(DateTime.Now.ToString());
}
通过post方法实现Form的Ajax提交
View
@model MvcAjax.Models.UserModel
@{
ViewBag.Title = "AjaxForm";
}
<script type="text/javascript">
$(document).ready(function () {
$("form[action$='SaveUser']").submit(function () {
$.post($(this).attr("action"), $(this).serialize(), function (response) {
$("#myPnl").html(response);
}); return false;
});
}); </script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@using (Html.BeginForm("SaveUser", "Home"))
{
<table>
<tr>
<td>
@Html.LabelFor(m => m.UserName)
</td>
<td>
@Html.TextBoxFor(m => m.UserName)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Email)
</td>
<td>
@Html.TextBoxFor(m => m.Email)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Desc)
</td>
<td>
@Html.TextBoxFor(m => m.Desc)
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}
Model
using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models
{
public class UserModel
{
[Display(Name = "Username")]
public string UserName { get; set; } [Display(Name = "Email")]
public string Email { get; set; } [Display(Name = "Description")]
public string Desc { get; set; }
}
}
Controller
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//...... return Content("Save Complete!");
}
以上代码实现了Jquery POST提交数据的方法。
通过查看以上两种Jquery方式的Ajax实现方法，和之前AJax HTML Helper比较可以发现其实Controller都是相同的。
采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法，发送请求到MVC的controller中，然后处理获取的response，更新到页面中。
注意点：
无论是使用超链接和form方式来提交请求，javascript的方法始终都有一个返回值false，用来防止超链接的跳转或者是form的实际提交。
这个地方就会出现一个疑问：
如果针对该页面禁止了Javascript脚本，那么该页面就是跳转或者是form就是提交，返回的ActionResult处理就会出现问题了。
这个时候就需要在Controller中判断该请求是否是Ajax请求，根据不同的情况返回不同的ActionResult：
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//...... if (Request.IsAjaxRequest())
return Content("Save Complete!");
else
return View();
}