NBearV3教程——Web篇-技术开发专区

NBearV3教程——Web篇

作者：teddyma 编辑：振宇 2007-06-07 14:52

    AjaxHelper

    AjaxHelper源自Teddy以前的一个同名Ajax框架。原来的实现基于对prototype这个开源Ajax实现的封装，实现了ASP.NET下基于UserControl实现各种Ajax效果的功能。自动ASP.NET 2.0发布以后，Teddy已经将AjaxHelper完美集成到NBear中的扩展页面基类中，并且使用ASP.NET 2.0内置的Callback机制代替原来的prototype依赖。

    集成到NBear使得基于这个集成本版的AjaxHelper的使用更简单优雅。

    示例代码中的AjaxDemo.aspx和AjaxDemo2.aspx这两个页面演示了集成到Page基类的Ajax功能的使用。

    NBear中目前这个AjaxHelper支持两中使用模式。

    模式一，不支持浏览器刷新模式。

    所谓不支持浏览器刷新指的是，在打开页面，并以该模式执行了某些Ajax效果后，如果点击浏览器的刷新按钮，或者按F5，页面状态会回复到初始载入状态。

    AjaxDemo.aspx页面演示了该模式的Ajax回调的使用。

    首先，只要使用AjaxHelper效果的页面，必须重载EnableAjaxCallback属性，并返回true，否则，页面生成的代码不会带有用于Ajax回调的支持脚本，所有的Ajax效果都不会生效。可以在code behind中，象下面这样重载EnableAjaxCallback属性：

public partial class AjaxDemo : NBear.Web.UI.Page
{
protected override bool EnableAjaxCallback
{
get
{
return true;
}
}
}

再来看AjaxDemo.aspx页面的内容：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="AjaxDemo" %>
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
function customFunc(data)
{
alert(data);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Test Callback" onclick="<%= Ajax.Callback("AjaxTemplates/Simple", null, "customFunc") %>" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Test Update" onclick="<%= Ajax.Update("AjaxTemplates/DataBinding", "outputElementId", "num=5", "customFunc") %>" />
<br />
<br />
<div id="outputElementId"></div>
</div>
</form>
</body>
</html>

注意，页面中定义了两个按钮，它们的onclick事件处理包含了Ajax调用代码。

Ajax.Callback(string ajaxTemplate, string parms, string onComplete)

- 该方法将会执行一个对指定的ajaxTemplate的回调，可以通过parms传递形如"paramName1=1&paramName2=2"这样的类似QueryString的参数，第三个参数onComplete是一个用于对回调返回的内容进行处理的客户端脚本函数的名称。

Ajax.Update(string ajaxTemplate, string outputElementId, string parms, string onComplete)

- 该方法和Ajax.Callback的区别是，它多了一个参数outputElementId，可以指定一个包含innerHTML属性的标签（如div，span等）的Id，回调成功的内容在交给onComlpete前，会被自动替换到outputElementId指定的标签的innerHTML属性内容。当然，也可以不指定onComplete参数，传递一个null就行。

    页面中Ajax.Callback和Ajax.Update分别调用了两个AjaxTemplate：Simple和DataBinding。这两个AjaxTemplate实际上是两个特殊的UserControl，它们定于AjaxTemplates目录中。

    所有的用作AjaxTemplate的User Control必须从NBear.Web.UI.AjaxTemplate类继承。并且，如果要对页面面内容进行code behind的处理，如进行数据绑定，不能在Page_Load中进行处理，而必须重载OnAjaxTemplatePreRender()方法进行处理。Page_Load中的代码永远不会被执行。

    下面简单列举Simple和DataBinding的代码。

    注意Simple只在包含ascx页面包含了一个简单文本，不包含任何有效code behind代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Simple.ascx.cs" Inherits="AjaxTemplates_Simple" %>
Hello Simple!

DataBinding在ascx页面包含了一个空的GridView控件如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DataBinding.ascx.cs" Inherits="AjaxTemplates_DataBinding" %>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

同时DataBinding.ascx.cs这个code behind文件中，对GridView1绑定了一些数据，注意，我们重载了OnAjaxTemplatePreRender函数来执行绑定。另外，你可以看到，我们从OnAjaxTemplatePreRender的callbackParams参数中获得了从AjaxDemo.aspx页面的Button2传递过来的num参数。

public partial class AjaxTemplates_DataBinding : NBear.Web.UI.AjaxTemplate
{
private SampleEntity[] objs = null;
private void LoadSampleEntities(int num)
{
objs = new SampleEntity[num];
for (int i = 0; i < num; i++)
{
objs[i] = EntityFactory<SampleEntity>.CreateObject();
objs[i].ID = i + 1;
objs[i].Name = Guid.NewGuid().ToString();
}
}
public override void OnAjaxTemplatePreRender(System.Collections.Generic.Dictionary<string, string> callbackParams)
{
LoadSampleEntities(int.Parse(callbackParams["num"]));
GridView1.DataSource = objs;
GridView1.DataBind();
}
}

第1页：Helper Methods 第2页：LoadResources()/GetString() 第3页：AjaxHelper模式一第4页：AjaxHelper模式二

关注我们