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中使用。

     

     

     

  • 相关阅读:
    298. Binary Tree Longest Consecutive Sequence
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    163. Missing Ranges
    336. Palindrome Pairs
    727. Minimum Window Subsequence
    211. Add and Search Word
    年底购物狂欢,移动支付安全不容忽视
    成为程序员前需要做的10件事
    全球首推iOS应用防破解技术!
  • 原文地址:https://www.cnblogs.com/manyiString/p/js5.html
Copyright © 2011-2022 走看看