zoukankan      html  css  js  c++  java
  • 在Asp.net MVC中使用Asp.net Ajax

    问题:

           通常的,如果你要在Asp.net的页面中使用Asp.net Ajax,你需要在页面中添加ScriptManager控件。而ScriptManager控件需要运行在服务器端标识(server-side)的Form控件中。因此,为了使用ScriptManager控件,你必须要使用包含一个服务器端标示(server-side)的Form的页面。

           这就造成了问题。你不应该在Asp.net MVC的view中包含服务器端标示(server-side)的Form控件。为什么呢?使用服务器端标示(server-side)的form控件意味着这个添加的form控件迫使你使用postbacks和viewstate而回到Web Form页面编程模型,这就违背了Asp.net MVC的精神。因此很多人断定Asp.net Ajax不能合适与Asp.net MVC。

    解决方案:       

    解决方案非常简单,就是不使用ScriptManager控件,而用包含Microsoft Ajax Liberty标准的<script src=”MicrosoftAjax.js”></script>标示替换。

    你可以从下面的网址中下载Microsoft Ajax Liberty的单独版本。http://www.asp.net/ajax/downloads/

    下载包中包含若干个版本的Microsoft Ajax Liberty。最重要的是二个名为MicrosoftAjax.js 和MicrosoftAjax.debug.js的Scripts(下载包中也包含本地化的Microsoft Ajax Liberty版本)。MicrosoftAjax.js脚本库是一个成品(压缩版),而MicrosoftAjax.debug.js是用于调试的脚本库(调试版)。

    你可以拷贝MicrosoftAjax.js 和MicrosoftAjax.debug.js脚本库到你的Asp.net MVC 页面应用程序。放置这些脚本库合适场所是在Asp.net MVC程序中的内容文件夹中。在你向你的项目中添加这些脚本库后,你可以在你的View(或者在Master Page中)中引用压缩版或调试版的任一一个版本。

     1 <script language="javascript" type="text/javascript" src="/Content/MicrosoftAjax.debug.js"></script>
     2     <script language="javascript" type="text/javascript">
     3         function success(results) {
     4             alert(results);
     5         }
     6         function fail(error) {
     7             alert("Error:" + error.get_message());
     8         }
     9         function pageLoad() {
    10             Sys.Net.WebServiceProxy.invoke
    11             (
    12                 "Services/MyService.asmx",
    13                 "HelloWorld",
    14                 false,
    15                 null,
    16                 success,
    17                 fail
    18             );
    19         }
    20     </script>

    注意Sys.Net.WebServiceProxy.invoke()方法是在pageLoad()中调用的方法。这个方法请求一个Web Service。这个invoke()方法接收一下几个参数:

             servicePath:WCF或者ASMX Web Service的路径;

             methodName:Web方法的名称;

             useGet:确定使用Get或者Post(默认Get);

             params:一列要传给Web方法的参数;

             onSuccess:Web方法成功调用后要执行的Javascript函数;

             onFailure:Web方法调用失败后要执行的Javascript函数;

             userContext:回传到客户端的数据;

       timeout:在Web Service终止前的时间();

    UpdatePanel Control怎么使用:          

    在普通的Asp.net页面中使用的UpdatePanel控件,能够使你更新包含在UpdatePanel中的页面内容而不是更新页面的全部内容。那么怎样在一个MVC的view中使用UpdatePanel控件。

    如果没有包含ScriptManager控件,UpdatePanel控件是不能被使用在页面中的。因此,既然ScriptManager控件依赖运行在服务器端标记的form控件不能在MVC的view中用,UpdatePanel控件也不能在MVC的view中使用。

    但不用担心,你还有另一种选择。你不需要用UpdatePanel控件使用Microsoft Ajax 库类来执行部分View的更新。你可以用Sys.Net.WebRequest对象来代替。

              例如,列表四的View包含两个Button。但你点击第一个Button,Content1.htm文件中的内容就被放入名为up1的DIV标签中。当你点击第二个button时,Content2.htm文件中的内容就被放入上述的标签中。页面是通过Microsoft Ajax库支持实现Ajax调用的。 

     1  <title>Test UpdatePanal</title>
     2 
     3     <script language="javascript" type="text/javascript" src="/Content/MicrosoftAjax.debug.js"></script>
     4 
     5     <script language="javascript" type="text/javascript">
     6         function updatePage(executer, e) {
     7             if (executer.get_responseAvailable()) {
     8                 $get("up1").innerHTML = executer.get_responseData();
     9             }
    10             else {
    11                 if (executer.get_timeOut())
    12                     alert("Timed Out");
    13                 else if (executer.get_aborted())
    14                     alert("Aborted");
    15             }
    16         }
    17         function getContent(url) {
    18             var request = new Sys.Net.WebRequest();
    19             request.set_url(url);
    20             request.set_httpVerb("GET");
    21             request.add_completed(updatePage);
    22             request.invoke();
    23         }
    24         function pageLoad() {
    25             $addHandler($get("btn1"), "click", function() { getContent("test1.htm") });
    26             $addHandler($get("btn2"), "click", function() { getContent("test2.htm") });
    27         }
    28     </script>
    29 
    30 </head>
    31 <body>
    32     <div>
    33         <input id="btn1" type="button" value="Content 1" />
    34         <input id="btn2" type="button" value="Content 2" />
    35         <div id="up1" ></div>
    36     </div>
    37 </body>

    列表四,pageL()方法是用来连接页面中的两个button和Javascript的getContent()函数。当你点击第一个button时,Url地址"test1.htm"被传送到getContent()方法中。当你点击第二个button时,Url地址"test2.htm"被传送到getContent()方法中。

    getContent()方法执行所有的工作。在这个方法中,一个WebRequest对象被创建。这个对象的两个属性被设置:Url和Http Verb。当WebRequest处理程序被设置后,WebRequest对象被请求时updatePage()方法被调用。

    updatePage()方法简单更新了名为up1的Div标签中的内容。       

    结论:

              这篇Blog文章的目的是解释怎样在一个MVC页面程序中使用Microsoft Ajax库。我是通过怎样添加Script引用、怎样添加Service引用和实现在没有ScriptManager或UpdatePanel控件下页面的局部更新解释Asp.net Ajax也能Asp.net MVC中使用。

     

     

     

  • 相关阅读:
    数数小木块
    猴子吃桃问题
    整除个数
    大小写互换
    车牌号
    比较字母大小
    队花的烦恼一
    字母小游戏
    字符串逆序输出
    茵茵的第一课
  • 原文地址:https://www.cnblogs.com/manyiString/p/js5.html
Copyright © 2011-2022 走看看