100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > MVC之AJAX异步提交表单

MVC之AJAX异步提交表单

时间:2024-03-21 19:07:22

相关推荐

MVC之AJAX异步提交表单

第一种用法:

在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表单,然后将表单中的数据进行异步传输,而不会受到后面这个提交按钮的影响。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。