zoukankan      html  css  js  c++  java
  • 基于.NET三种Ajax技术的运用——原生js、ASP.NET Ajax和.NET回调技术

      在进行ASP.NET开发时,我们需要用越来越多的Ajax技术,以丰富用户交互界面,不断提高用户体验。

      第一种方式是我们亲自手动编写Javascript代码实现,关于这个方式我前面有一篇博文 《跟我一起创建一个简单的javascript ajax对象》介绍过了。具体实现在此不再赘述。那么使用这样的方式的一大好处是使用灵活,便于我们自己把握整个异步通信的过程,但是要求开发人员具备较好的Javascript基础,另外一点就是要创建编写新的Handler.ashx文件或者一个ASPX文件。

      微软向来都是喜欢降低开发入门门槛,因而在.NET2.0之后就发布了他们的ASP.NET AJAX框架,该框架使得我们可以像开发webform一样简单的拖放一些控件就能实现AJAX,下面引出一个例子说明。ASPX页面代码如下

    View Code
        <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <p>
    <asp:Label ID="lblNonAjax" runat="server" Text="No Ajax"></asp:Label>
    </p>
    <hr />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Label ID="lblText" runat="server"></asp:Label>
    <p>
    <asp:Button ID="btnAjax" runat="server" Text="Ajax Event"
    onclick
    ="btnAjax_Click"/>
    <asp:Button ID="btnNonAjax" runat="server" Text="Post Black Event"
    onclick
    ="btnNonAjax_Click"/>
    </p>
    </ContentTemplate>
    <Triggers>
    <asp:PostBackTrigger ControlID="btnNonAjax"/>
    </Triggers>
    </asp:UpdatePanel>
    </div>
    </form>

    虽然我们对ScriptManager控件未做任何改动,该控件也不显示任何信息,但是我们要使用ajax框架就必须将该控件拖放到其他ajax控件之前。然后我们用得最多的莫过于UpdatePanel控件了,该控件也确实非常令人振奋。我们可以在该控件里面指定那些事件需要局部刷新与整页刷新,默认是异步的局部刷新。如果要想实现整页刷新提交,像平时不用ajax控件的效果,只需要在<Triggers>标签里面指定<asp:PostBackTrigger ControlID="btnNonAjax" />,ControlID就是不需要异步提交的控件,如此指定后该控件的任何事件都是整页刷新提交。

    接下来看cs代码如下

    View Code
    public partial class _Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (IsPostBack)
    {
    //因为以下控件不在Update内,所以触发Ajax事件时无法对其进行更新
    lblNonAjax.Text = "触发了回发事件!";
    }
    }

    protected void btnAjax_Click(object sender, EventArgs e)
    {
    this.lblText.Text = "这是一个Ajax事件的触发";

    //Response.Write("<script>alert('这是一个Ajax事件的触发')</script>");
    //触发AJAX事件,不能使用该方式或其他方式向页面输出,除非使用下面的方式

    //触发的是UpdatePanel里的控件的事件,输出脚本必须使用以下方式
    ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ajaxScript", "alert('这是一个Ajax事件的触发');", true);
    }

    protected void btnNonAjax_Click(object sender, EventArgs e)
    {
    this.lblText.Text = "这是一个页面回发刷新事件的触发";
    Response.Write("<script>alert('这是一个页面回发刷新事件的触发')</script>");
    }
    }

      使用这个第二种Ajax技术开发效率较高,而且几乎不需要任何Javascript基础就可以实现。但是不好之处就是生成HTML代码量较大,而且我们不好掌握细节的实现,灵活性也不高,发布的时候可能会有些莫名其妙的错误。

      最后呢我们来看下回调技术实现Ajax。先贴代码,ASPX页面代码如下  

    View Code
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    function setCallback(value,dom){
    dom.style.color
    ="red";
    dom.innerHTML
    ="正在请求...........";
    var aa ="123";
    <%= ClientScript.GetCallbackEventReference(this,"aa", "successCallback","dom") %>
    }
    function successCallback(result,dom){
    dom.style.color
    ="red";
    dom.innerHTML
    = result;
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <input type="text" id="txt1" onblur="setCallback(this.value,document.getElementById('lblMsg'));"/>
    <label id="lblMsg"></label>
    </div>
    </form>
    </body>
    </html>

    cs代码为

    View Code
    public partial class CallbackDemo : System.Web.UI.Page, ICallbackEventHandler
    {
    private string callbackResult = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    #region ICallbackEventHandler 成员

    public string GetCallbackResult()
    {
    return this.callbackResult;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
    this.callbackResult = "The Callback Value Is \"" + eventArgument + "\"";
    }

    #endregion
    }

      在脚本中一个关键的代码是<%= ClientScript.GetCallbackEventReference(this,"aa", "successCallback","dom") %>,ClientScript.GetCallbackEventReference方法有三个重载,我使用的这个重载在MSDN的解释为

    View Code
    // 摘要:
    // 获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本和上下文。
    //
    // 参数:
    // argument:
    // 从客户端脚本传递给服务器端的一个参数 System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)
    // 方法。
    //
    // context:
    // 启动回调之前在客户端计算的客户端脚本。脚本的结果传回客户端事件处理程序。
    //
    // control:
    // 处理客户端回调的服务器 System.Web.UI.Control。该控件必须实现 System.Web.UI.ICallbackEventHandler
    // 接口并提供 System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)
    // 方法。
    //
    // clientCallback:
    // 一个客户端事件处理程序的名称,该处理程序接收成功的服务器端事件的结果。
    //
    // 返回结果:
    // 调用客户端回调的客户端函数的名称。
    //
    // 异常:
    // System.ArgumentNullException:
    // 指定的 System.Web.UI.Control 为 null。
    //
    // System.InvalidOperationException:
    // 指定的 System.Web.UI.Control 未实现 System.Web.UI.ICallbackEventHandler 接口。

      这种方式的代码量比较少,但是实现的功能比较有限,它要求开发人员要有Javascript基础。

      以上就是在ASP.NET中三种主要ajax技术的实现。

      

  • 相关阅读:
    linux 运维必备150个命令
    CentOS 6.5 安装nginx 1.6.3
    centos 6.5 zabbix3.0.4 监控apache
    iOS更改ShareSDK默认的分享功能界面
    使用AFNetworking时, 控制器点击返回销毁了, 但还是会执行请求成功或失败的block, 导致野指针异常
    iOS性能优化
    'Invalid update: invalid number of rows in section xx. The number of rows contained in an existing section after the update (xxx)...
    iOS 改变UITextField中光标颜色
    使用ShareSDK完成Facebook第三方登录和Facebook分享时没办法跳转到Facebook应用
    [!] Unable to satisfy the following requirements:
  • 原文地址:https://www.cnblogs.com/FreeDong/p/2196314.html
Copyright © 2011-2022 走看看