您的位置：首页 > 其它

MVC4 简单异步演示

2015-06-12 15:55 218 查看

MVC中的异步提交有两种方法，一种是JQuery方式，一种是MVC中自带的Ajax.BeginForm方式，两种都可以实现异步提交与刷新

JQuery.Ajax

Controllers代码

public ActionResult Index()
{
return View();
}

public ActionResult GetDate()
{
//获取参数信息
string id = Request["id"].ToString();
string name = Request["name"].ToString();
return Content("用户："+name+" 时间:"+ DateTime.Now.ToString());
}

View页面代码

@{
ViewBag.Title = "Index";
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
@*使用JQuery的异步方式获取后台的信息*@
<script type="text/javascript">
$(function () {
$("#btnJQ").click(function () {
//从后台获取时间
$.ajax({
url: "/Ajax/GetDate",//请求地址
type: "Get",//请求的类型
success: function (data) {  //成功后的回调函数
alert(data);
},
data: "id=1&name=信息"//传递的数据
});
});
});
</script>
</head>
<body>
<h2>Ajax页面</h2>
<div>
<input type="button" id="btnJQ" value="显示后台返回的数据" />
</div>
</body>
</html>

Ajax.BeginForm

Controllers代码

public ActionResult MicrosoftAjax()
{
return View();
}

public ActionResult ReData()
{
//获取参数信息
string sname = Request["UserName"].ToString();
//让网站睡眠1秒钟
//System.Threading.Thread.Sleep(1000);
return Content("用户名：" + sname);
}

View页面代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MicrosoftAjax</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function afterSuccess(data) {
//数据执行成功后，触发的事件
alert(data);
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("ReData", "Ajax", new AjaxOptions()
{
Confirm = "您是否要提交吗？",
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
OnSuccess = "afterSuccess"
}))
{
<div>
用户名：<input type="text" name="UserName" /><br />
密码：<input type="text" name="Pwd" /><br />
<input type="submit" value="提交" />
</div>
}

<div id="result">
这个是要显示结果的div
</div>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航