分享

ASP.NET使用Ajax的5个步骤

 悟静 2010-10-14
2007-05-08

ASP.NET使用Ajax主要分为5个步骤(粗略描述一下):

第一步 引用Ajax.dll 或AjaxPro.dll

第二步 在Web.Config的<system.web>和</system.web>中添加
<httpHandlers>
<!-- Register the ajax handler -->
<add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
第三步    在腰使用ajax的页面中注册,在load事件中注册 如下:

       private void Page_Load(object sender, System.EventArgs e)
       {
          // 在此处放置用户代码以初始化页面
          Ajax.Utility.RegisterTypeForAjax(typeof(这个页面的类名字));
       }

第四步标记要在前台用ajax调用的后台函数如下:

         [AjaxPro.AjaxMethod()]加这个标记
         public string ServerSideAdd()
         {
                //this.TextBox1.Text = "Hello Server";
                return "Hello Server";
         }

第五步 前台调用后台函数 如下:
         <script language="javascript">
         function GetValue_CallBack()
         {
            var c = Test_Ajax.WebForm1.ServerSideAdd();
            document.getElementById("TextBox1").value = c.value ;
          }
           </script>
注意:引用后台方法的时候得顺序是 项目名称.页名称.方法名称。(不要项目名称也可以反而我要了不行)

代码如下:
页面代码:
<%@ Page Language="C#" AutoEventWireup="true"    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">

function GetValue_CallBack()
{
    //var c=_Default.ServerSideAdd(cl);
     _Default.ServerSideAdd(cl);//cl为处理返回结果的函数,如果需要给后台传递参数写为 _Default.ServerSideAdd("val",cl);
    document.getElementById("TextBox1").value = "正在处理,请等待" ;
    document.getElementById("div1").innerHTML = "正在处理,请等待" ;
    //alert("两个alert的区别\r\n程序会弹出后继续执行到完");
    //alert(c);//这条语句是错的,这时还没有执行完成,所以还没有c变量
}

function cl(result)
{
    //alert("两个alert的区别\r\n程序停到这里等确认后,才能执行下面两句");
    document.getElementById("TextBox1").value = result.value ;
    document.getElementById("div1").innerHTML = result.value ;
  
    //alert(result.value);//此语句可以正常执行。这时后台已经处理完毕
}

</script>
</head>
<body>
      <form id="form1" runat="server">
      <div>
          <asp:TextBox ID="TextBox1" runat="server"    onChange="GetValue_CallBack()"></asp:TextBox>
          <asp:Button ID="Button1" runat="server" Text="Button" /></div>
          用户名: <input type="text" name="u_name" id="u_name" onChange="GetValue_CallBack();" />
          <div id="div1">base</div><div id="count1">1</div>
      </form>
</body>
</html>

上面的javascript也可以写成这样的格式
***************************************
<script language="javascript">

function GetValue_CallBack()
{
    //var c=_Default.ServerSideAdd(cl);
     _Default.ServerSideAdd(
                             function cl(result)
                          {
                            //alert("两个alert的区别\r\n程序停到这里等确认后,才能执行下面两句");
                            document.getElementById("TextBox1").value = result.value ;
                            document.getElementById("div1").innerHTML = result.value ;
                          
                            //alert(result.value);//此语句可以正常执行。这时后台已经处理完毕
                          }
     );//cl为处理返回结果的函数
    document.getElementById("TextBox1").value = "正在处理,请等待" ;
    document.getElementById("div1").innerHTML = "正在处理,请等待" ;
    //alert("两个alert的区别\r\n程序会弹出后继续执行到完");
    //alert(c);//这条语句是错的,这时还没有执行完成,所以还没有c变量
}

 

</script>
***************************************

后台代码:

using System;
using System.Data;
using System.Configuration;
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;

public partial class _Default : System.Web.UI.Page
{

      protected void Page_Load(object sender, EventArgs e)
      {
          Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
      }

      [Ajax.AjaxMethod()]
      public string ServerSideAdd()
      {
          //this.TextBox1.Text = "Hello Server";
          return "<a href='#'>aa</a><br>this is ok";
      }
}

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多