65.9K
CodeProject 正在变化。 阅读更多。
Home

nxAjax - 一个 AJAX 库

Fernando Escolar
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (12投票s)

2008年8月7日

MPL

8分钟阅读

viewsIcon

63317

downloadIcon

918

nxAjax 是一个基于 .NET 的易于使用的 AJAX 框架。

目录

引言

nxAjax 是一个易于使用的 ASP.NET jQuery AJAX 库。其功能包括：

  • jQuery JavaScript 核心
  • AJAX WebControl 回发模式：异步或同步
    • 同步回发使用的 AjaxQueue (由 Pat Nakajima 提供)
    • 同步回发中自动显示“加载消息”(在 MainPage div -> id="loading")
    • 异步回发中自动加载图像 (每个控件：LoadingImg 或 LoadingImgId 属性)
  • MainPage 包含加载 ContainedPage 的容器。
  • 多语言系统
  • 基于模板的 Web 渲染
  • 低带宽使用：仅回发当前控件的值
    • 仅当点击 ISubmit 控件时回发表单内容
  • DOCTYPE XHTML 1.1 W3C 兼容

[索引]

nxAjax 入门

要使用 nxAjax，请添加对“nxAjax.dll”程序集的引用。

为了更方便地在工具箱中使用控件，您可以右键单击并选择“选择项目...”。在新表单中，浏览“nxAjax.dll”程序集并标记其所有组件。

现在，我们的工具栏将如下所示：

[索引]

快速示例

在 Visual Studio 2008 中创建一个新的 Web 项目，并添加对 nxAjax 二进制文件的引用。将其添加到 Web.Config 文件中

<system.web />
...
   <pages />
      <controls />
         ...
         <add assembly="nxAjax" 
           namespace="Framework.Ajax.UI.Controls" 
           tagprefix="ajax" />
      </controls />
   </pages />
   <httphandlers />
       ....
      <add validate="false" 
         type="Framework.Ajax.HttpHandlers.ScriptResourceHandler, nxAjax" 
         path="AjaxScriptResource.axd" verb="GET,HEAD" />
      <add validate="false" 
         type="Framework.Ajax.HttpHandlers.FileUploadHandler, nxAjax" 
         path="AjaxUploadFile.axd" verb="*" />
   </httphandlers />
...
</system.web />

[索引]

使用 MainPage 和 ContainedPage

将 default.aspx 编辑如下

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>My nxAjax Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajax:Container ID="container" 
            runat="server"></ajax:Container>
    </div>
    </form>
</body>
</html>

编辑 default.aspx.cs

using System;
using System.Collections.Generic;
using Framework.Ajax.UI;
using Framework.Ajax.UI.Controls;

public partial class _Default : Framework.Ajax.UI.MainPage 
{
    protected void Page_Load(object sender, EventArgs e)
    {
         if (!IsPostBack)
            container.ContainedPage = "Contained1.aspx";
    }
}

创建一个名为“Contained1.aspx”的新 WebForm

<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server">
<div>
    <ajax:FileUpload ID="btnFile" runat="server" 
            UploadingMessage="Uploading..." 
            ExtensionNotAllowedMessage="Only image files!" 
            Text="Upload image" 
            LoadingImg="ajax-loader.gif" 
            OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
    <ajax:CheckBox ID="chkTest" Checked="true" 
            runat="server"></ajax:CheckBox>
    <ajax:Submit ID="btnSubmit" Value="Send" 
            runat="server" 
            OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</div>
</form>

编辑 Contained1.aspx.cs

using System;
using System.Collections.Generic;
using Framework.Ajax.UI;
using Framework.Ajax.UI.Controls;

public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            btnFile.AllowedExtensions.Add("jpg");
            btnFile.AllowedExtensions.Add("gif");
            btnFile.AllowedExtensions.Add("png");
            btnFile.AllowedExtensions.Add("bmp");

            btnSubmit.Disabled = true;
        }
    }
    protected void btnSubmit_ServerClick(AjaxControl sender, string value)
    {
        System.Web.HttpPostedFile file = btnFile.File;
        if (!chkTest.Checked)
            return;

        if (file == null)
            DocumentAlert("not file uploaded");
        else
        {
            DocumentAlert(file.FileName + " saved!");
        }
    }
    protected void btnFile_ServerComplete(AjaxControl sender, string value)
    {
        DocumentAlert(value + "  uploaded, you can " + 
                      "click on 'send' button...");
        btnSubmit.Disabled = false;
    }
}

启动并测试它；)

[索引]

使用 ajax:Form

在 Quick Example 中，添加一个名为 Default2.aspx 的新 WebForm

<system.web>
<%@ Page Language="C#"  EnableEventValidation="False" 
   AutoEventWireup="true" CodeFile="Default2.aspx.cs" 
   Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>Don't use it, it does not works... :(</title>
</head>
<body>
    <ajax:Form runat="server" ID="formu">
        <div>
            <ajax:Button ID="btnOne" Value="One" 
                runat="server" 
                OnServerClick="btnOne_ServerClick"></ajax:Button>
            <ajax:Button ID="btnTwo" Value="Two" 
                runat="server" 
                OnServerClick="btnTwo_ServerClick"></ajax:Button>
            <ajax:TextBox ID="txtOne" runat="server" 
                Value="One"></ajax:TextBox>
            <ajax:Submit ID="submitOne" runat="server" 
                OnServerClick="submitOne_ServerClick"></ajax:Submit>
        </div>
    </ajax:Form>
   <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnAsp" Text="Asp" 
                runat="server" OnClick="btnAsp_Click" />
            <asp:TextBox ID="txtAsp" Text="" 
                AutoPostBack="True" runat="server" 
                OnTextChanged="btnAsp_Click" />
        </div>
    </form>
</body>
</html>
</system.web>

为了使其正常工作，您应该修改 WebForm 属性

EnableViewState = true;
EnableEventValidation = false;
ViewStateEncryptionMode = System.Web.UI.ViewStateEncryptionMode.Never;
EnableViewStateMac = false;

并且，在代码隐藏文件中添加事件代码管理。最终结果应类似于

using System;
using System.Collections.Generic;
using System.Linq;

using Framework.Ajax.UI;
using Framework.Ajax.UI.Controls;

public partial class Default2 : System.Web.UI.Page
{
    public Default2() : base()
    {
        this.EnableViewState = true;
        this.EnableEventValidation = false;
        this.ViewStateEncryptionMode = 
             System.Web.UI.ViewStateEncryptionMode.Never;
        this.EnableViewStateMac = false;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            
        }
    }
    protected void btnOne_ServerClick(AjaxControl sender, string value)
    {
        btnOne.AjaxController.DocumentAlert("Hi!! " + value);
        txtOne.Value = "Three";
    }
    protected void submitOne_ServerClick(AjaxControl sender, string value)
    {
        txtOne.Value = "One";
    }
    protected void btnTwo_ServerClick(AjaxControl sender, string value)
    {
        btnOne.AjaxController.DocumentAlert("Hi!! " + value);
        txtOne.Value = "Two";
    }
    protected void btnAsp_Click(object sender, EventArgs e)
    {
        txtOne.AjaxController.DocumentAlert("Hi! " + btnAsp.Text);
        txtOne.Value = "Three";
    }
}

[索引]

工作原理

客户端事件存储 JavaScript，这些 JavaScript 在触发时，始终在客户端进行评估。服务器事件由在 Web 服务器上运行的 ASP.NET 处理并返回修改。

Container 控件是用于管理和操作的特殊控件。它的功能是作为 ContainedPage 的容器。这些是 nxAjax 网页（如 MainPage），显示为单个表单中的一段代码和一种实体类型。

通过这种方式，我们可以在不同的网页之间导航，而无需重新加载所有 AJAX 库，或重新创建 Web 格式主容器。它类似于 UserControl，但它是动态加载的，而无需在主容器中实例化。

[索引]

MainPage

目前，MainPage 是 nxAjax 库正常工作的必要条件。MainPage 继承自 AjaxPage（它继承自 .NET 框架的 System.Web.UI.Page）。并且它重写了其大部分功能。它清除 Microsoft 代码中的所有 JavaScript，转换表单格式，添加 JavaScript 库（jQuery、内部库等）并以库可理解的方式处理请求。

视图状态存储在会话变量中，因此不再在提供的页面上。MainPage 移除了 doPostBack 函数和 __VIEWSTATE 隐藏输入。此外，它还提供了新的模板和多语言系统。

[索引]

ContainedPage

ContainedPage 仅加载到容器控件 (Framework.Ajax.UI.Controls.Container) 中。并在 MainPage 中再次加载。它继承自 AjaxPage（它继承自 .NET 框架的 System.Web.UI.Page）。但与它的“姐姐” MainPage 不同，它不加载任何脚本。因此它是依赖的。ContainedPage 是我们用于在网站上动态加载 AJAX 内容的工具。

AjaxUserControl

AjaxUserControl 的工作方式与 System.Web.UI.UserControl 相同。但如果您想动态加载内容，最好使用 ContainedPage。

[索引]

AjaxControl

AjaxControl 服务器控件是整个 nxAjax 库的基础。所有控件都继承自它。

为了渲染 AjaxControl，我们使用两种方法：RenderHTML 和 RenderJS。前者写入我们在 Web 上看到的 HTML 代码。后者渲染用于初始化和状态更改的 JavaScript。

为了避免过载，HTML 渲染对控件的每个实例都使用内部缓存。并且只在页面第一次加载时写入一次。

然后，JavaScript 渲染开始发挥作用。它在第一次启动，然后每次回发更改其状态时启动。

要强制状态更改或执行其他操作，请使用 AjaxUpdate 和 AjaxNotUpdate 函数。

每个 AjaxControl 回发都有两种方法：同步和异步。默认是同步。

在同步调用上下文中，使用 AJAX 队列。它将请求添加到队列中，按顺序加载。如果您想在服务器处理期间显示加载屏幕，请在 MainPage 中添加一个 id="loading" 的 div 对象。

异步调用在请求时针对每个控件进行。PostBackMode 属性指定它。如果要在处理请求时添加加载图像，可以设置以下属性：LoadingImg (图像源) 或 LoadingImgID (图像控件 ID)。

AjaxControl 回发只回发当前控件的值。如果要回发表单的所有内容，应使用 ISubmit 控件（如 Submit 或 LinkSubmit）。

最后，AjaxPage 属性获取容器页面：ContainedPage 或 MainPage。

[索引]

为何选择 DOCTYPE XHTML 1.1？

使用 nxAjax 模板系统涉及将所有 HTML 代码转换为 XML 文件。因此，为了符合标准，我们选择了在 XHTML 1.1 上下文中符合 W3C 的选项。

[索引]

使用多语言系统

打开 Quick Example 项目。创建一个名为“english.language”的新文件。您可以在此处添加所有应用程序字符串

#
# This is a coment, you can write what you want here...
#
# 
# English Language File
#
# Information section:
[INFO]
name=English
id=ENG
#
#Dictionary section:
[DICTIONARY]
# Format:
# [MyKey]=[Literal]
Test.ErrorMessage01=not file uploaded
Test.SavedMessage=%s saved!
Test.UploadedMessage=%s uploaded, you can click on 'send' button...

现在，转到菜单 -> 网站 -> 添加新文件，并选择“全局应用程序类”。打开 Global.asax 文件并添加以下内容

...
void Application_Start(object sender, EventArgs e) 
{
    // Code that runs on application startup
    Application["Language"] = 
      new Framework.Ajax.Language(Server.MapPath("english.language"));
}
...

或者这样

...
void Session_Start(object sender, EventArgs e) 
{
    // Code that runs when a new session is started
    Session["Language"] = new Framework.Ajax.Language(
        Server.MapPath("english.language"));
}
...

编辑 Contained1.aspx.cs

public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
    ...
    protected void btnSubmit_ServerClick(AjaxControl sender, string value)
    {
        System.Web.HttpPostedFile file = btnFile.File;
        if (!chkTest.Checked)
            return;

        if (file == null)
            DocumentAlert(lang["Test.ErrorMessage01"]);
        else
        {
            DocumentAlert(lang["Test.SavedMessage"].Replace(
                          "%s", file.FileName));
        }
    }
    protected void btnFile_ServerComplete(AjaxControl sender, string value)
    {
        DocumentAlert(lang["Test.UploadedMessage"].Replace("%s", value));
        btnSubmit.Disabled = false;
    }
}

[索引]

基于模板的渲染

MainPage 中的模板

使用 Quick Example 项目，我们将使用 nxAjax 模板。打开 default.aspx 并删除所有 HTML 标签

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<form id="form1" runat="server"></form>
<ajax:Container ID="container" 
   runat="server"></ajax:Container>

ASP.NET 需要一个带有 runat="server" 属性的 form 才能使其工作... 创建一个新的“main.template”空文本文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>My nxAjax Test</title>
</head>
<body>
    <div>
        <ajax:Container ID="container" runat="server"></ajax:Container>
    </div>
</body>
</html>

用“<$ControlID$>”这样的标签替换 AJAX 控件的 ASPX 代码。并且，您必须在 MainPage 中添加两个特殊标签：<$PreScript$> 和 <$PostScript$>。第一个在头部部分，第二个在文档 body 的末尾

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>My nxAjax Test</title>
    <$PreScript$>
</head>
<body>
    <div>
        <$container$>
    </div>
    <$PostScript$>
</body>
</html>

编辑 default.aspx.cs

public partial class _Default : Framework.Ajax.UI.MainPage 
{
    protected void Page_Load(object sender, EventArgs e)
    {
         this.TemplateFile = "main.template";
         if (!IsPostBack)
            container.ContainedPage = "Contained1.aspx";
    }
}

在 MainPage 模板内部，您可以使用两个可选的特殊标签：<$InitForm$> 和 <$EndForm$>，以便提交主表单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>My nxAjax Test</title>
    <$PreScript$>
</head>
<body>
    <$InitForm$>
    <div>
        <$container$>
    </div>
    <$EndForm$>
    <$PostScript$>
</body>
</html>

[索引]

ContainedPage 中的模板

打开“Contained1.aspx”并删除所有 HTML 标签（除了服务器表单）

<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<ajax:FileUpload ID="btnFile" runat="server" 
            UploadingMessage="Uploading..." 
            ExtensionNotAllowedMessage="Only image files!" 
            Text="Upload image" 
            LoadingImg="ajax-loader.gif" 
            OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" 
            OnServerClick="btnSubmit_ServerClick"></ajax:Submit>

创建一个名为“container1.template”的空文本文件，其中包含您希望显示每个控件的 <$ControlID$> 标签

<div>
    <$btnFile$>
    <$chkTest$>
    <$btnSubmit$>
</div>

您可以可选地添加一个 <$PostBack$> 标签，如果您想将回发控件放置在文档中的指定位置。

将此行添加到 Contained1.aspx.cs

...
public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.TemplateFile = "container1.template";
        if (!IsPostBack)
        {
...

在 ContainedPage 模板内部，您无需声明 HTML 表单。这是因为 ContainedPage 是一个表单，并且渲染器将写入表单的开始和结束标签。

[索引]

带有 XML 源的模板

您可以选择创建自己的 XML ASP 结构。这与之前的方法不兼容。打开“container1.template”文件并将其修改为类似以下内容：

<div>
    <$File$>
    <$Submit$>
</div>

要填充此模板，我们需要修改“Contained1.aspx”

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<file>
     <ajax:FileUpload ID="btnFile" runat="server" 
            UploadingMessage="Uploading..." 
            ExtensionNotAllowedMessage="Only image files!" 
            Text="Upload image" 
            LoadingImg="ajax-loader.gif" 
            OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</file>
<submit>
     <ajax:CheckBox ID="chkTest" Checked="true" 
        runat="server"></ajax:CheckBox>
     <ajax:Submit ID="btnSubmit" Value="Send" 
        runat="server" 
        OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</submit>

请注意，您可以在一个 XML 元素中嵌套两个或多个 AJAX 控件。如果您运行该项目，结果将与前面的示例相同。当模板系统处理 ASPX 文档时，它会检查文档，从“.”开始。

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<?xml version="1.0" encoding="utf-8"?>
<page>
     <form id="form1" runat="server"></form>
     <file>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </file>
     <submit>
          <ajax:CheckBox ID="chkTest" Checked="true" 
              runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" 
             runat="server" 
             OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </submit>
</page>

它也有效。

[索引]

模板区域

深入研究建模模板，我们发现了一系列用于创建模板部分的特殊命令。这些模板部分被称为“区域”。在定义区域时，您必须使用两个特殊标签：<!$Begin AreaName> 和 <!$End AreaName>。

<!$Begin divArea>
  <div>
    <$object$>
  </div>
<!$End divArea>
<$divs$>

或者

<!$Begin divArea>
  <div>
    <$file$>
    <$submit$>
  </div>
<!$End divArea>
<$divs$>

在 ASPX XML 代码中，您必须定义一个带有属性的区域标签

  • Id：区域名称。
  • Place：区域将渲染到的模板标签。
  • Method：Add 或 Allocate。可选。默认情况下为 Add。
    • Add 用于同一位置的多个区域。
    • Allocate 用于此位置的单个区域。

要填充此新模板，我们需要修改“Contained1.aspx”

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs" method="allocate">
     <object>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
          <ajax:CheckBox ID="chkTest" Checked="true" 
             runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" 
             runat="server" 
             OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </object>
</area>

还有

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
     <file>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </file>
     <submit>
          <ajax:CheckBox ID="chkTest" Checked="true" 
            runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" 
            runat="server" 
            OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </submit>
</area>

而且，如果我们想创建两个 div 块而不是一个（使用第一个示例）

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
     <object>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </object>
</area>
<area id="divArea" place="divs">
     <object>
          <ajax:CheckBox ID="chkTest" Checked="true" 
             runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" 
             runat="server" 
             OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </object>
</area>

[索引]

模板包含

另一个特殊命令是“<!$Include TemplatePartFileName>”。它将被引用的模板文件替换。模板文件名是当前文档到要包含的文档的相对路径。

创建一个名为“divpart.template”的新空文本文件

<!$Begin divArea>
  <div>
    <$object$>
  </div>
<!$End divArea>

并且，修改“container1.template”文件

<!$Include divpart.template>
<$divs$>

它和其他的一样工作。

[索引]

带语言的模板

基于模板的渲染系统可以使用语言文件自动替换字符串。您必须编写另一个带有语言键的特殊标签：<&LanguageKey&>

如果您必须创建一个语言文件，您可以尝试将页面标题添加到“english.language”中

...
[DICTIONARY]
...
Title=My nxAjax Test

并在“main.template”文件中，将页面标题替换为语言标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
--- <title><&Title&></title>
    <$PreScript$>
</head>
<body>
    <div>
        <$container$>
    </div>
    <$PostScript$>
</body>
</html>

[索引]

GridView 中的模板

nxAjax 的 GridView 控件包含 ContentTemplateFileName 属性。它允许设置模板文件名，并且网格将根据此模板文件进行渲染。

<ajax:GridView ID="gridImages" runat="server" 
               ContentTemplateFileName="grid.template">
  <ajax:GridImageColumn DataColumn="img" />
  <ajax:GridLabelColumn DataColumn="name" />
</ajax:GridView>

模板文件必须有三个区域：“header”、“content”、“footer”。

  • header：您要渲染的第一个（不重复）代码。
  • content：重复的代码；对于每一行，它将通过替换每个 <$Column{N}$> 来渲染一个内容区域。
  • footer：您要渲染的最后一个（不重复）代码。
<!$Begin header>
<div class="imageListDiv">
<!$End header>

<!$Begin content>
   <div class="imageDiv">
      <$Column{0}$><br />
      <span><$Column{1}$></span>
   </div>
<!$End content>

<!$Begin footer>
</div>
<!$End footer>

[索引]

更多信息

您可以在此处阅读更多信息：nxAjax CodePlex 页面。

© . All rights reserved.