AjaxPro.net 做asp.netAjax效果实例以及错误分析。

最新推荐文章于 2024-08-19 16:31:35 发布

ninja

最新推荐文章于 2024-08-19 16:31:35 发布

阅读量2.6k

点赞数

文章标签： asp.net javascript string microsoft webservice server

这两天一直研究asp.net下Ajax技术，非了半天劲，也在网上找了几个例子就是做不出来,气死我了。今天好不容做出来了，就贴出来大家分享一把，希望对大家有点帮助。此asp.net的Ajax效果的用的是AjaxPro.net框架，请大家先到网上下载AjaxPro.2.dll

下载地址：http://download.csdn.net/source/174477

添加引用：网站 - 添加引用 - 浏览 - 选中 AjaxPro.2.dll

配置Web.Config文件：

</httpHandlers>

前台代码以及注释：
<form id="form1" runat="server">
<script type="text/javascript" defer="defer">

      //JavaScript代码一定以放在Form里面否则会引起AjaxPro 未定义错误

        // loading效果
        AjaxPro.onLoading = function(b)
        {
            var a = document.getElementById("loadinfo");
            a.style.visibility = b ? "visible" : "hidden";
        }

        function GetTime()
        {
            // 调用服务端方法 AjaxPro的好处就在于可以通过Js调用后台的方法。强
            //调用方法:类名.方法名 (参数为指定一个回调函数) 这里值得是服务端的类名和方法名
            ajaxpro.GetServerTime(callback);   //callback参数是指回调函数如下
        }

        function callback(res) //回调函数,显示结果
        {
            alert(res.value);
        }
        </script>
        <div id="loadinfo" style="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;">Loading...</div>
        <input id="Button1" type="button" value="Get ServerTime" onclick ="javascript:GetTime();void(0)" />
    </form>

服务端代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;

public partial class ajaxpro : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(ajaxpro));
    }
    [AjaxPro.AjaxMethod]

//声明为Ajax方法如果丢掉此处可能引起前台 ajaxpro.GetServerTime “对象不支持此方法和属性” 的javascript的错误
    public static string GetServerTime()
    {
        System.Threading.Thread.Sleep(2000);
        return DateTime.Now.ToString();
    }
}

常见错误：

Ajaxpro 未定义：

1.没有将AjaxPro加载放在form1以内,有篇文章写得不错: 'AjaxPro'未定义错误的原因&javascript顺序执行&AjaxPro机制.

2.忘记在服务器的web.config里面添加Handler了:

在<system.web>节点下加入:

       < httpHandlers >
             < add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
         </ httpHandlers >

3.ajaxpro.GetServerTime “对象不支持此方法和属性”

GetServerTime 前没有声明为Ajax方法添加： [AjaxPro.AjaxMethod]

初学者自己学习的一些例子。

web.config

1.
2.<compilation debug="true">
3.            <assemblies>
4.                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
5.            </assemblies>
6.        </compilation>
7.        <httpHandlers>
8.            <remove verb="*" path="*.asmx"/>
9.            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
10.            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
11.            <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
12.            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
13.        </httpHandlers>
14.        <httpModules>
15.            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
16.        </httpModules>
一。PageMethods

1.PageMethodDemo.aspx

1.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageMethodDemo.aspx.cs" Inherits="PageMethodDemo" %>
2.
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5.<html xmlns="http://www.w3.org/1999/xhtml" >
6.<head runat="server">
7.    <title>无标题页</title>
8.    <script type="text/javascript" language="JavaScript">
9.function PageMethodCall()
10.{
11.    var testString = "PageMethodCall";
12.    PageMethods.Test($get('txtName').value, OnSucceeded);
13.}
14.// 页面方法调用完成的回调函数.
15.function OnSucceeded(result)
16.{
17.    // 显示调用结果
18.    var RsltElem = document.getElementById("Results");
19.    RsltElem.innerHTML = result;
20.}
21.</script>
22.
23.</head>
24.<body>
25.    <form id="form1" runat="server">
26.<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
27.</asp:ScriptManager>
28.<div>
29.    <h2>Page Method</h2>
30.    <input id="txtName" type="text" />
31.    <button id="Button1"
32.        οnclick="PageMethodCall();">调用Page Method</button>
33.</div>
34.<hr/>
35.<div>
36.    <span id="Results"></span>
37.</div>
38.</form>
39.
40.</body>
41.</html>
   2 PageMethodDemo.aspx.cs

1.using System;
2.using System.Data;
3.using System.Configuration;
4.using System.Collections;
5.using System.Web;
6.using System.Web.Security;
7.using System.Web.UI;
8.using System.Web.UI.WebControls;
9.using System.Web.UI.WebControls.WebParts;
10.using System.Web.UI.HtmlControls;
11.
12.public partial class PageMethodDemo : System.Web.UI.Page
13.{
14.    protected void Page_Load(object sender, EventArgs e)
15.    {
16.
17.    }
18.    [System.Web.Services.WebMethod]
19.    public static string Test(string name)
20.    {
21.        return "Hello " + name + "!";
22.    }
23.
24.}
25.
二。使用WebService

1。ServiceMethodDemo.aspx

1.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServiceMethodDemo.aspx.cs" Inherits="ServiceMethodDemo" %>
2.
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5.<html xmlns="http://www.w3.org/1999/xhtml" >
6.<head runat="server">
7.    <title>无标题页</title>
8.    <script>
9.    function EchoUserInput()
10.    {
11.        var echoElem = document.getElementById("EnteredValue");
12.        SimpleWebService.SayHello(echoElem.value,
13.            OnSucceeded);
14.    }
15.    // 调用成功后的回调函数
16.    function OnSucceeded(result)
17.    {
18.        var RsltElem = document.getElementById("Results");
19.        RsltElem.innerHTML = result;
20.    }
21.    </script>
22.
23.</head>
24.<body>
25.    <form id="form1" runat="server">
26.    <div>
27.        <asp:ScriptManager ID="ScriptManager1" runat="server">
28.            <Services>
29.                <asp:ServiceReference Path="~/SimpleWebService.asmx" />
30.            </Services>
31.        </asp:ScriptManager>
32.    <div>
33.          <h2>Web Service脚本调用示例</h2>
34.            <p>请在下面文本框内输入名字，然后点击按钮.</p>
35.            <input id="EnteredValue" type="text" />
36.            <input id="EchoButton" type="button"
37.                value="Echo" οnclick="EchoUserInput()" />
38.      </div>
39.
40.    </div>
41.    </form>
42.    <hr/><span id="Results"></span>
43.</body>
44.</html>
45.
2.SimpleWebService.cs (SimpleWebService.asmx)

1.using System;
2.using System.Web;
3.using System.Collections;
4.using System.Web.Services;
5.using System.Web.Services.Protocols;
6.
7.[System.Web.Script.Services.ScriptService]
8.[WebService(Namespace = "http://tempuri.org/")]
9.[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10.public class SimpleWebService : System.Web.Services.WebService
11.{
12.    public SimpleWebService()
13.    {
14.    }
15.    [WebMethod]
16.    public string SayHello(string s)
17.    {
18.        return "Hello " + s;
19.    }
20.}
21.
三。AjaxPro

1.AjaxProDemo.aspx

1.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxProDemo.aspx.cs" Inherits="AjaxProDemo" %>
2.
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5.<html xmlns="http://www.w3.org/1999/xhtml" >
6.<head runat="server">
7.    <title>无标题页</title>
8.    <script>
9.    function AjaxMethodCall()
10.    {
11.       myTest.AjaxTest(document.getElementById("txtName").value,ReturnFunction);
12.
13.    }
14.    function ReturnFunction(result)
15.    {
16.      document.getElementById("Results").innerHTML = result.value;
17.    }
18.    </script>
19.</head>
20.<body>
21.    <form id="form1" runat="server">
22.<div>
23.    <h2>Ajax.NET Method</h2>
24.    <input id="txtName" type="text" />
25.    <button id="Button1"
26.        οnclick="AjaxMethodCall();">调用AjaxMethod</button>
27.</div>
28.<hr/>
29.<div>
30.    <span id="Results"></span>
31.</div>
32.</form>
33.
34.</body>
35.</html>
2AjaxProDemo.aspx.cs

1.using System;
2.using System.Data;
3.using System.Configuration;
4.using System.Collections;
5.using System.Web;
6.using System.Web.Security;
7.using System.Web.UI;
8.using System.Web.UI.WebControls;
9.using System.Web.UI.WebControls.WebParts;
10.using System.Web.UI.HtmlControls;
11.[AjaxPro.AjaxNamespace("myTest")]
12.
13.public partial class AjaxProDemo : System.Web.UI.Page
14.{
15.    protected void Page_Load(object sender, EventArgs e)
16.    {
17.        AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxProDemo));
18.    }
19.    [AjaxPro.AjaxMethod]
20.    public string AjaxTest(string s)
21.    {
22.        return "Hello" + s;
23.    }
24.}
25.
下面转载：

1.AjaxPro.2.dll在VS2005使用中的基本使用

http://www.cnblogs.com/wcp066/archive/2007/11/04/948921.html

2.使用PageMethods老是出现"PageMethods未定义"或"对象不支持此属性或方法"的解决方法

http://www.cnblogs.com/yeagen/archive/2008/11/21/1338310.html

3.---------------------------------------------------------------------------------------------------------------

Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法
编者按：从Atlas到Microsoft ASP.NET AJAX 1.0 RC发生了很大的变化，鉴于目前网上Microsoft ASP.NET AJAX 1.0 RC中文资料的匮乏，本文针对Atlas中PageMethods的变化编写了客户端调用服务器端方法的新的教程。以前处于Microsoft.Web.Preview组件中的Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js现在已经更改，需要使用新的方式实现，详细请参考本文。
关键字：PageMethods ScriptLibrary ASP.NET AJAX 1.0 RC

Microsoft ASP.NET AJAX可以很方便的让我们在客户端使用脚本调用ASP.NET Web Services(.asmx),要启用这一特性，像前面提到的一样，必须要配置Web.Config，可以参照Microsoft ASP.NET AJAX安装目录下的Web.Config，如果是通过ASP.NET AJAX-enabled Web site模版建立的站点，则不需要再进行设置了。配置节点如下：
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory"/>
</httpHandlers>
<system.web>

以上配置节为Web应用程序添加了一个HTTP handler：ScriptHandlerFactory，它的作用是处理脚本调用Web Service的请求，如果是非脚步对.asmx的调用请求，则转给默认的处理器。
使用脚本调用服务器方法有两种方式，一种是调用常规的ASP.NET Web Service，另一种直接调用页面代码页上的方法。两种方式都非常简单，对于前者，我们只需在现有的Web Service上增加一个属性：

[System.Web.Script.Services.ScriptService]
而对于页面上的方法，只需给现有方法增加如下特性,并改为静态方法：

[System.Web.Services.WebMethod]

下面我们分别对其进行详细讨论。
Web Service方式
首先为项目添加一个文件夹WebServices，来存放所有要用到的Web Servcie页面，然后在Web Services文件夹下面添加一个 Web Service命名为SimpleWebService.asmx，在后台增加一个SayHello方法，并指定WebMethod特性。完整的代码如下：
SimpleWebService.cs

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SimpleWebService : System.Web.Services.WebService
{
    public SimpleWebService()
    {
    }
    [WebMethod]
    public string SayHello(string s)
    {
        return "Hello " + s;
    }
}

然后添加一个Web Form,这里取名ServiceMethodDemo.aspx,添加一些JavaScript函数调用Web Service,完整代码如下：

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ServiceMethodDemo.aspx.cs" Inherits="Demo6_ServiceMethodDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Web Service脚本调用示例</title>
    <script type="text/javascript">
    // 调用Web Service的JavaScript函数
    function EchoUserInput()
    {
        var echoElem = document.getElementById("EnteredValue");
        SimpleWebService.SayHello(echoElem.value,
            OnSucceeded);
    }
    // 调用成功后的回调函数
    function OnSucceeded(result)
    {
        var RsltElem = document.getElementById("Results");
        RsltElem.innerHTML = result;
    }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager">
      <Services>
        <asp:ServiceReference path="~/WebServices/SimpleWebService.asmx" />
      </Services>
      </asp:ScriptManager>
      <div>
          <h2>Web Service脚本调用示例</h2>
            <p>请在下面文本框内输入名字，然后点击按钮.</p>
            <input id="EnteredValue" type="text" />
            <input id="EchoButton" type="button"
                value="Echo" οnclick="EchoUserInput()" />
      </div>
    </form>
    <hr/><span id="Results"></span>
</body>
</html>

最后在浏览器中查看，可以看到我们期望的效果，在页面的文本框中输入你的名字，点击按钮，页面显示出
Hello xxx!

Page Method 方式
如果不想独立创建Web Service，而只是希望能够调用页面上的一些方法，那么可以采用Page Method的的方法。同样的我们添加一个页面PageMethodDemo.aspx，增加一些JavaScript和一个后台方法，注意这个方法必须是静态方法，代码如下：

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <h2>Page Method</h2>
    <input ID="txtName" type="text" />
    <button id="Button1"
        οnclick="PageMethodCall();">调用Page Method</button>
</div>
<hr/>
<div>
    <span id="Results"></span>
</div>
</form>

代码页PageMethodDemo.aspx.cs

[System.Web.Services.WebMethod]
public static string Test(string name)
{
return "Hello " + name + "!";
}

4.----------------------------------------------------------------------------------

AjaxPro使用方法
2007-08-07 10:02

2007-08-05 15:13
1 在web.config中的<system.web>节点中添加：

    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
    </httpHandlers>
2 后台代码(本来想直接写在页面上，后来想，还是保持住良好的习惯吧，我忍了)

        private void Page_Load(object sender, System.EventArgs e)
        {
                AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));
            }

            [AjaxPro.AjaxMethod()]
        public string TestMehtod(string name)
        {
            return this.BuildMessage(name);
            }

        protected string BuildMessage(string name)
        {
            return string.Format("Hello {0}!Welcome to AjaxPro's world.",name);
            }
3 前台代码

<%@ Page language="c#" Codebehind="SampleBase.aspx.cs" AutoEventWireup="false" Inherits="AjaxProSample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
<head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    <script language = "javascript" type = "text/javascript">

            function TestFunction()
        {
                var serverMessage = AjaxProSample.WebForm1.TestMehtod('jxh');
            return serverMessage.value;
            }

    </script>
</head>
<body>
    <form id="Form1" method="post" runat="server"></form>

    <script language = "javascript">
            document.write(TestFunction());
    </script>

</body>
</html>基本功能实现，下一步当然是更进一步的实践了。接着做的例子是个简单的登录操作，并将用户名和密码用Session记录下来。代码和上面的类似，就不贴了，占地方，呵呵。
但有2点需要注意
1 关于Session，如果想在AjaxMethod中使用Session的话，那么AjaxMethod标签必须带AjaxPro.HttpSessionStateRequirement.ReadWrite参数

[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string CheckPassword()
{}2 关于属性，我们注册了一个属性，运行之后，在客户端JS中的确就可以访问了

            [AjaxPro.AjaxProperty()]
        public string UserName
        {
            set
            {
                    Session["UserName"] = value;
                }

            get
            {
                return Session["UserName"].ToString();
                }
            }AjaxProSample.SampleSession.UserName = document.getElementById("txtUserName").value;

alert(AjaxProSample.SampleSession.UserName);但此时如果在服务器端代码中企图使用的话，就会出现空引用异常，如果非要在客户段和服务器端同时使用这个属性的话，请增加一个设置值的方法。例如：

            [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
        public void SetValue(string value)
        {
                UserName = value;
            }                AjaxProSample.SampleSession.UserName = document.getElementById("TextBox1").value;
                AjaxProSample.SampleSession.SetValue(AjaxProSample.SampleSession.UserName);
这样就能在js和cs中同时使用UserName这个属性了，当然修改也要提供2套方案。原因请看推荐的那篇文章，我就不啰嗦了。

最近做的网页用的Ajaxpro，测试执行时总是显示”对象不支持此属性或方法”的错误。查了半天原来解决方法很简单：

把服务器端：[AjaxPro.AjaxMethod]下面定义的方法定义成“public”即可。

另外我说一下Firefox 的 Fire Bug 插件调试脚本真是好用呀！