用MicrosoftAjax.js替代ScriptManager

在Asp.net MVC中使用Asp.net Ajax 收藏
该篇文章是Stephen Walther博客中的文章,个人觉得不错就翻译了一下。但由于个人英语水平有限,还望各位海量。如果想看原文,请点击Using ASP.NET AJAX with ASP.NET MVC 查看原文。

       是的,你能够在Asp.net MVC中使用Asp.net Ajax。最近很多人问我怎样在Asp.net MVC的View中使用Asp.net Ajax。本Blog条目中,我会解释这个问题并提供解决方案。      

问题:

       通常的,如果你要在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>标示替换。不过现在有了CDN版本,速度更快。

你可以从下面的网址中下载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中)中引用压缩版或调试版的任一一个版本。

例如在列表一中使用Microsoft Ajax库为button按钮添加一个handler


Code
<head runat="server">
    <title>Test Ajax</title>
    <script language="javascript" type="text/javascript" src="Content/MicrosoftAjax.debug.js"></script>
    <script language="javascript" type="text/javascript">
        function pageLoad() {
            $addHandler($get("btn"), "click",doSomething);
        }
        function doSomething() {
            alert("Button Click!");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
   
    <div>
        <input id="btn" type="button" value="Click Here!" />
    </div>
    </form>
</body>
 doSomething()Javascript方法向pageLoad 方法中添加Click事件。当你点击button时,警告提示就会显示。

在列表一中的页面使用的是调试版的Microsoft Ajax库。调试版的代码库包含额外的用户检查的代码,例如,你是否给方法传递了一个正确的参数。在发布产品时,你应当将用MicrosoftAjax.js文件替换MicrosoftAjax.debug.js文件。因为MicrosoftAjax.js文件大小是最小的且不包含调试代码。

为了方便的将Microsoft Ajax库的压缩版替换调试版,你最好在Master页中引用而不是在每个页面中引用。Web Service怎么引用:

在通常的Asp.net页面中使用ScriptManager控件最好的事情之一是ScriptManager控件能够容易的添加不管是WCF或者ASMX形式的Web Service。例如,如果你想要在客户端用户Javascript使用MyService的Web Service,你就可以像这样添加一个Service引用:

Code
<asp:ScriptManager ID="sm1" runat="server">
    <Services>
        <asp:ServiceReference Path="/Services/MyService.asmx" />
    </Services>
</asp:ScriptManager>

既然你在一个MVC的View中不能使用ScriptManager控件,你当然不能在View中向上一样添加一个Service。那么怎样添加一个Web Service?

列表二的view演示怎样在一个MVC的View中添加一个MyService.asmx的Web Service。

Code
<head runat="server">
    <title>Test Service</title>
    <script language="javascript" type="text/javascript" src="/Content/MicrosoftAjax.debug.js"></script>
    <script language="javascript" type="text/javascript">
        function success(results) {
            alert(results);
        }
        function fail(error) {
            alert("Error:" + error.get_message());
        }
        function pageLoad() {
            Sys.Net.WebServiceProxy.invoke
            (
                "Services/MyService.asmx",
                "HelloWorld",
                false,
                null,
                success,
                fail
            );
        }
    </script>
</head>
<body>
    <div>       
    </div>
</body>
注意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终止前的时间();

Code
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
    // [System.Web.Script.Services.ScriptService]
    public class MyService : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
        列表三的Web Service返回一个随机的语句。

注意Web Service包含的[ScriptService]的属性。如果你想要在客户端调用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调用的。        

Code
<head runat="server">
    <title>Test UpdatePanal</title>

    <script language="javascript" type="text/javascript" src="/Content/MicrosoftAjax.debug.js"></script>

    <script language="javascript" type="text/javascript">
        function updatePage(executer, e) {
            if (executer.get_responseAvailable()) {
                $get("up1").innerHTML = executer.get_responseData();
            }
            else {
                if (executer.get_timeOut())
                    alert("Timed Out");
                else if (executer.get_aborted())
                    alert("Aborted");
            }
        }
        function getContent(url) {
            var request = new Sys.Net.WebRequest();
            request.set_url(url);
            request.set_httpVerb("GET");
            request.add_completed(updatePage);
            request.invoke();
        }
        function pageLoad() {
            $addHandler($get("btn1"), "click", function() { getContent("test1.htm") });
            $addHandler($get("btn2"), "click", function() { getContent("test2.htm") });
        }
    </script>

</head>
<body>
    <div>
        <input id="btn1" type="button" value="Content 1" />
        <input id="btn2" type="button" value="Content 2" />
        <div id="up1" ></div>
    </div>
</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中使用。

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/shaily/archive/2009/01/12/3758009.aspx

posted @ 2009-10-23 10:18  火凤凰工作室  阅读(107)  评论(0编辑  收藏  举报