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

服务器控件编写 JavaScript

David Donovan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (5投票s)

2006年6月12日

7分钟阅读

viewsIcon

39334

downloadIcon

379

这是一个关于抽象编程的短篇系列文章。这部分内容着眼于 C# 在设计时创作 JavaScript 文件。

引言

这是一个关于抽象编程的短篇系列文章。本系列分为三部分。第一部分概述了抽象编程，以及一个程序如何以及何时创作另一个程序。第二部分着眼于 C# 代码在设计时创作 JavaScript 文件。第三部分详细介绍了抽象编程如何在运行时用于创建 JavaScript，该 JavaScript 将充当 .NET DataSet，但仅存在于客户端。通过使用抽象编程，您可以消除不必要的 postback，并实现应用程序程序脱机运行的可能性。

本系列中使用的方法旨在创建可在所有浏览器中运行的解决方案。这些示例在 Internet Explorer 和 Netscape 中都经过测试，但所有开发都是使用 Internet Explorer 完成的。示例和练习是使用 .NET 2.0 Framework、Visual Studio 2005 和 SQL Server 2005 开发的，但抽象编程的概念独立于任何特定技术。这个三部分的短篇系列是使用本系列中描述的技术创建的。

概述

传统上，JavaScript 是由人类作者在设计时创建的。这位作者将 JavaScript 代码放入一个.js文件中，然后发布他的 JavaScript 供 Web 应用程序使用。现在，我们准备好采用另一种方法来提供更丰富的开发人员和用户体验。这可以通过了解 JavaScript 如何自动创作来实现。这部分详细介绍了如何在设计时使用服务器控件创建将创作 DScript（JavaScript 文件）的解决方案。下一部分，即第三部分，将详细介绍服务器如何在运行时创建 DScript 文件，以将数据表示为数据表。

ClientScriptManager

.NET 2.0 Framework 为我们提供了几种从 ASP.NET WebForm 调用 JavaScript 的方法。RegisterStartupScript 和 RegisterClientScriptBlock 都允许您在运行时（页面加载时）将 JavaScript 放入 WebForm。这是最优秀的抽象编程，只有一个小问题。它与任何与 HTML 内联的 JavaScript 存在相同的问题，那就是：每次加载页面时都会下载它。那么……有没有另一种方法可以在不产生内联解决方案的情况下抽象程序呢？是的，那就是在设计时创建一个 DScript 文件，它有效地做着同样的事情，只是在客户端。下面是一种完全不同的方法，它将 JavaScript 代码创建过程抽象为一个用 C# 编写的例程，该例程从 ASP.NET 服务器控件执行。

CClock（一个真实世界的示例）

在本练习中，我们将创建一个简单的网页，带有一个模拟时钟。本练习使用服务器控件创作 DScript（一个 JavaScript 文件），该文件将提供如何显示时钟的详细信息。这些详细信息包括时钟的位置和时钟的大小。

练习中使用的组件

  • CClock1.js - 这是服务器控件在设计时生成的 DScript。它保存在名为“DScripts”的文件夹中。文件的实际名称会略有不同，以允许在不同页面上使用该组件。因此，实际名称可能是“ProMatrix.TestControls.CClock.Default.CClock1.js”之类的名称，以表示使用此 DScript 的页面的实际路径。
  • CClock.js - 这是一个人工创作的 JavaScript 文件，它知道创建时钟控件所需的一切，除了实际将时钟放在 WebForm 上的位置以及时钟控件的大小。这些值将作为参数传递给其渲染方法。此 JavaScript 还在客户端创建整个控件，因此，如果您在网页上执行“查看/源代码”，您将看不到时钟控件 HTML 标记的任何痕迹。
  • CClock.cs - 这是 C# 代码，它通过写入一个 DScript 文件来响应时钟控件在 WebForm 上的移动，该文件详细说明了控件的绝对位置以及其大小和形状（通过宽度和高度）。

分步指南

开发人员将控件从设计器工具箱拖放到他的 .NET WebForm 上。然后，他开始将控件移动到 .NET WebForm 上的适当位置。当他移动控件时，DScript（一个 JavaScript 文件）正在被创作以在运行时使用。这是通过将 DScript 写入磁盘来实现的，该 DScript 包含控件的位置和绝对位置。这被认为是抽象编程，因为我们通过 Visual Studio 环境创作 JavaScript 来抽象了生成客户端代码 (DScript) 的过程。更准确地说，JavaScript 是由 ASP.NET 服务器控件创作的，其 C# 代码在设计时执行。

无需经验

在您使用此模型实现了服务器控件之后，您可以将其发布给开发人员使用，而无需了解其工作原理的详细信息。这是因为 DScript 是由服务器控件自动创建的。然后，在运行时，服务器控件将引用网页中的 DScript。创建 JavaScript 的详细信息完全从开发过程中抽象出来。

好的，深入研究时间

现在，让我们看看项目并深入研究它……首先，根据源代码 Zip 文件中提供的readme.txt文件中的说明，下载并将项目安装到适当的位置。readme文件将详细说明要求并为您提供一些快速安装说明。安装后，打开解决方案“Unplugged”，并将“TestControls”设为启动项目。接下来，在CClock文件夹中，将“default.aspx”设为默认启动页，然后按 F5 键以调试模式运行该页。您应该会看到一个时钟正在走动并显示当前本地时间。

现在，停止调试会话。让我们更改 WebForm 上时钟的位置。位置信息存储在哪里？作为服务器控件属性的一部分？不……表示大小和位置信息的资源数据存储在DScript文件夹中的 DScript (JavaScript) 文件中。让我们看看那个文件。请通过拖放文件“ProMatrix.TestControls.CClock.Default.CClock1.js”从DScript文件夹中，在 Visual Studio Designer 中打开 DScript 文件。

在 DScript 文件“ProMatrix.TestControls.CClock.Default.CClock1.js”仍在 Visual Studio Designer 中时，返回 WebForm Default.aspx 上的时钟，并在 WebForm Designer 中移动它。您应该会看到此对话框。对此对话框选择“是”，然后再次查看 DScript 文件“ProMatrix.TestControls.CClock.Default.CClock1.js”。您应该会看到由于在 WebForm 上移动时钟而进行的更改。

它看起来像这样……

Clk_pos_width = 50;
Clk_pos_height = 50;
Clk_pos_L = 130;
Clk_pos_T = 120;
Clk_image_T = 70;
Clk_image_L = 80;
Clk_zIndex = 0;
Clk_image = '/ProMatrix.TestControls/CClock/Images/CClock.gif';
Clk_image_L_offset = -20;
Clk_image_T_offset = -20;
Clk_image_W_offset = 40;
Clk_image_H_offset = 40;

实际发生了什么

当您在 WebForm 上移动时钟时，它正在执行代码，该代码将新版本“ProMatrix.TestControls.CClock.Default.CClock1.js”写入磁盘，其中包含新的尺寸和位置信息。下面是负责创建或更新 DScript 的 C# 服务器控件代码。

void SaveJSfile()
{
    // remember to add security right

    // on jscript folder (DScript in this case)

    // on XP pro, network sharing and security: both check marks

    if (!designMode) return;
    // exit if runtime

 
    StreamWriter sw = new StreamWriter(dScriptsPath + 
                          getDScriptName() + ".js");
    double clk_half_width = _width.Value / 2;
    double clk_half_height = _height.Value / 2;
    double clk_pos_left = pxToVal2(getStyleAttribute("left")) + 
                          clk_half_width;
    double clk_pos_top = pxToVal2(getStyleAttribute("top")) + 
                         clk_half_height;
    string zIndex = getStyleAttribute("z-index");
    if (zIndex == "") zIndex = "0";
 
    sw.WriteLine("Clk_pos_width = " + clk_half_width + ";");
    sw.WriteLine("Clk_pos_height = " + clk_half_height + ";");
    sw.WriteLine("Clk_pos_L = " + clk_pos_left.ToString() + ";");
    sw.WriteLine("Clk_pos_T = " + clk_pos_top.ToString() + ";");
    sw.WriteLine("Clk_image_T = " + 
                 pxToVal(getStyleAttribute("top")) + ";");
    sw.WriteLine("Clk_image_L = " + 
                 pxToVal(getStyleAttribute("left")) + ";");
    sw.WriteLine("Clk_zIndex = " + zIndex + ";");
    sw.WriteLine("Clk_image = '" + _image + "';");
 
    sw.WriteLine("Clk_image_L_offset = " + _image_offset_L.Value + ";");
    sw.WriteLine("Clk_image_T_offset = " + _image_offset_T.Value + ";");
    sw.WriteLine("Clk_image_W_offset = " + _image_offset_W.Value + ";");
    sw.WriteLine("Clk_image_H_offset = " + _image_offset_H.Value + ";");
 
    sw.Close();
}

服务器控件写入 DScript 文件的这些信息包含您在更改时钟位置和形状时 Visual Studio Designer 传入的值。这种抽象编程的重要部分是服务器控件在设计时抽象了 DScript 的生成。然后，在运行时，服务器控件只需引用它先前创建的 DScript。

摘要

DScript 是在设计时或运行时动态创作的 JavaScript。这种抽象编程模型使用 ASP.NET 服务器控件在设计时创作 DScript。在服务器控件（CClock.cs）中，包含在设计时（当您将控件定位在 WebForm 上时）执行的代码。在设计时执行的代码实际上会创作一个包含定位信息的 DScript 文件。然后，在运行时，这个 DScript 文件由加载并执行它的服务器控件引用，并且在浏览器看来就像任何其他普通 JavaScript 一样。所有这一切都是自动发生的，无需任何人工干预。

使用源代码

下载 Zip 文件，然后根据Install.Readme.txt中的说明将文件解压到您的C:\Inetpub\wwwroot中。按照说明设置和使用源代码以及设置浏览器。

© . All rights reserved.