相信大家在做Webform时经常会遇到在页面的后台CS文件中根据数据运行结果修改页面显示样式、显示(隐藏)、或者弹出框,当时我们会用到ScriptManage或者Page来向页面注册一段js来实现页面加载显示我们需要的效果。
在MVC中没了ScriptManage、Page对象让我们轻松向页面注册脚本,只能麻烦一点通过ajax来完成。
先决条件:
1.首先需要在加载的页面中引用Jquery包和unobtrusive-ajax
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"> </script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"> </script>
2.控制器中Action返回数据
Action返回的contentType需要是application/x-javascript,text/javascript,因为浏览器在解析时可以把application/x-javascript最终解析为text/javascript。
第一种方法:使用Content方法返回ContentResult,通过使用字符串和内容类型创建内容结果对象,因此在使用时要明确contentType类型
使用JavaScript返回JavaScriptResult对象
1.使用form表单Ajax提交,引用Jquery包和ajax包
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"> </script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"> </script>
2.编写form表单,记得设置data-ajax属性
<form id="Data_form" action="/SysBase/CreateYeePayUser" method="post" data-ajax="true"> <input type="submit" id="SignUp" value="注册" /> </form>
或者直接使用MVC的Ajax辅助方法完成异步操作
@using (@Ajax.BeginForm("CreateYeePayUser", new AjaxOptions())) { <input type="submit" id="SignUp" value="注册" /> }
使用Ajax.BeginForm和使用form表单的data-ajax达到同样的效果。
3.Action返回脚本
public ActionResult CreateYeePayUser() { return Content("alert('注册成功');", "application/x-javascript"); //return JavaScript("alert('注册成功');"); }
4.当点击注册按钮时会弹出“注册成功”
第二种方法:由于第一种使用起来相对比较繁琐,所以经常使用还是建议直接使用$.ajax();
页面代码:
<input type="submit" id="SignUp" value="注册" onclick="submitData()" /> <script> function submitData() { $.ajax({ url: "/SysBase/CreateYeePayUser" }); }
Action代码一样,点击注册时,执行弹窗结果。