在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案。
通过get方法实现AJax请求
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();
}
分享到:
相关推荐
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上...相当不错的Json学习资料,也是ASP.NET结合jQuery实现Ajax无刷新操作技术的典型实例,有必要借鉴。
jQuery+Ajax实现排序效果
初学ajax的可以看看,Jquery实现AJAX 应用
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,处理页面接收到值后进行模糊匹配查询,然后将结果返回,输入页收到返回的数据后在处理,并生成相应的页面显示在页面上。若是jquery ...
Jquery_ajax实现搜索
本人亲自写的jQuery+ajax实现登录验证,内含两个项目,注释清晰,特来和大家分享
ajax+jquery+ashx实现上传文件 简单易用,直接调用
JQuery+ajax实现批量上传图片
选择本地图片后,立即上传并显示图像。本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息
jquery无刷新分页、排序 利用jquery实现的ajax无刷新分页以及排序,支持多种格式无刷新更换,数据库采用的是Sql2000自带的NorthWind数据库 数据库控制使用的是SqlHelper
jQuery+asp实现ajax文件上传 For
vs2013 利用Ajax+Jquery实现异步进度条效果
jquery 文本框 自动补全 ajax autocomplete 完整实例
jquery 实现ajax用户登陆 php
Jquery实现ajax三级联动
jquery+ajax实现无刷新提交的功能。
基于 jQuery 实现的 Ajax 异步分页的技术,网上看到就下载保存下来,感觉很不错
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
struts2+json+jquery实现ajax数据的存取