§ ITPOW >> 文档 >> ASP.NET >> AJAX

第一个 ASP.NET AJAX 程序:UpdatePanel

作者:vkvi 来源:ITPOW(原创) 日期:2007-8-17

安装了ASP.NET 2.0 AJAX Extensions 1.0后,我们打开Visual Web Developer 2005 Express Edition,可以在工具箱中看到 AJAX Extensions 一项,里面有几个控件(控件很少,ASP.NET AJAX 更多的控件在 ASP.NET AJAX Control Toolkit 中),这里有 ASP.NET AJAX 的核心控件 ScriptManager 以及本节要介绍的 UpdatePanel。

UpdatePanel 是一块面板,放置在该面板中的控件可以享受到 Ajax 的无闪烁刷新效果。

在新建的 ASP.NET AJAX 站点中,打开 Default.aspx 页面,切换到 Design 视图,从工具箱中拖入 UpdatePanel 到页面中,如果工具箱没有显示出来,请在“View”菜单中单击“Toolbox”。

然后从工具箱的“Standard”中拖入一个 Label 和两个 Button 到 UpdatePanel 中,ID 属性值分别为:lbIn、btnIn、btnInToOut,Text 属性值分别为:lbIn、btnIn、btnInToOut。

然后从工具箱的“Standard”中拖入一个 Label 和两个 Button 到 UpdatePanel 以外的地方,ID 属性值分别为:lbOut、btnOut、btnOutToIn,Text 属性值分别为:lbOut、btnOut、btnOutToIn。

第一个 ASP.NET AJAX 程序:UpdatePanel

然后双击四个按钮,参照如下代码分别设置四个按钮的 OnClick 事件函数。

    protected void btnIn_Click(object sender, EventArgs e)
    {
        lbIn.Text = "btnIn";
    }
    protected void btnInToOut_Click(object sender, EventArgs e)
    {
        lbOut.Text = "btnInToOut";
    }
    protected void btnOut_Click(object sender, EventArgs e)
    {
        lbOut.Text = "btnOut";
    }
    protected void btnOutToIn_Click(object sender, EventArgs e)
    {
        lbIn.Text = "btnOutToIn";
    }

保存所有文件,在浏览器中访问刚才的 .aspx 文件,单击四个按钮,我们可以看到当单击 btnIn 这个按钮时,lbIn 显示的文字得到了更新,并且并没有任何闪烁的迹象,恭喜,此时我们已经正式跨入 ASP.NET AJAX 的大门了。

通过测试这四个按钮,我们还可以得到:

事件发起的控件(本例中为 Button) 被控制的控件(本例中为 Label) 结论
位于 UpdatePanel 中 位于 UpdatePanel 中 Ajax 效果
位于 UpdatePanel 中 位于 UpdatePanel 以外 无效果
位于 UpdatePanel 以外 位于 UpdatePanel 中 普通 ASP.NET 效果
位于 UpdatePanel 以外 位于 UpdatePanel 以外 普通 ASP.NET 效果

不支持 JavaScript?

如果您的浏览器不支持 JavaScript,或者由于某种原因禁止了 JavaScript,不用担心使用 ASP.NET AJAX 的程序会变成一动不动的“死程序”,因为这些控件做得非常好,当 JavaScript 没有动作时会自动使用普通的 ASP.NET 效果。

跨浏览器平台?

是的,生成的 Ajax 代码是兼容主流浏览器平台的,请放心使用。

相关阅读

相关文章