loyung

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

    相信大家在做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代码一样,点击注册时,执行弹窗结果。

 

posted on 2016-05-04 19:17  loyung  阅读(1285)  评论(0)    收藏  举报