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

.NET jQuery (DNJ): 0.4.0 版本中的新功能

Alaa-eddine KADDOURI
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (13投票s)

2010年1月13日

CPOL

7分钟阅读

viewsIcon

70160

downloadIcon

536

本文描述了 0.4.0 版本中新实现的功能：客户端事件、第三方扩展和资源管理。

logo.pngDNJ-040-toolbox.jpg

引言

在之前的一篇文章中，我介绍了 DNJ (.NET jQuery)，一个旨在将 jQuery 完全集成到 .NET 和 Visual Studio 中的 .NET 框架。

有了 DNJ，您无需 JavaScript 或 jQuery 知识即可创建高级 Web 2.0 应用程序。这并不意味着 DNJ 是为 jQuery 初学者设计的框架。高级程序员可以使用 DNJ 功能并通过自定义 jQuery 代码对其进行增强。DNJ 将 Visual Studio 设计器/编辑器的强大功能与 jQuery 功能和简易 AJAX 编码相结合。

本文将介绍新公开测试版中实现的新功能：客户端事件支持和第三方插件集成。

如果您想了解有关 DNJ 框架的更多信息，或者需要有关如何安装的说明，请参阅我之前的文章 (DNJ: 适用于 jQuery 和 jQueryUI 的 .NET 框架)。

DNJ 命名空间

DNJ 的旧版本有两个程序集：Org.Eurekaa.DNJ.dll 和 Org.Eurekaa.DNJ.UI.dll；新版本包含第三个程序集：Org.Eurekaa.DNJ.Ext.dll。DNJ 命名空间是核心 DNJ 模块，它包含基础 jquery.js 库并允许使用通用 AJAX 功能。DNJ.UI 命名空间将 jQueryUI 组件和小部件实现为 ASP.NET Web 控件，并且可以使用 Visual Studio 代码编辑器或设计器 (WYSIWYG) 进行编辑。

DNJ.Ext 命名空间包含所有 jQuery 第三方插件的实现。这将以类似于 jQuery 项目的逻辑分离 DNJ 程序集：jQuery、jQueryUI、其他 jQuery 插件。这也是使 DNJ 和 DNJ.UI 与最新的 jQuery 和 jQueryUI 稳定版本保持同步的一种方式。

jQuery 脚本加载改进

在旧的 DNJ 版本中，您必须手动加载所需的 JavaScript 文件，方法是在 HTML 的 head 部分添加类似以下内容的一行：

<script type="text/javascript" src="DNJResources.axd?load=jquery,ui[all],fx[all]"></script>

现在不再需要这样的行。每个 DNJ Web 控件都会告诉资源加载器它需要哪些 .js 文件。资源加载器将等待所有 Web 控件注册，然后加载所需的资源。如果相同的资源注册了两次（在两个 Web 控件中），则该资源将只加载一次。在什么情况下您仍然需要 DNJResources.axd？如果您需要为自定义脚本构建 jQuery 压缩的 JavaScript 而不使用 DNJ Web 控件。如果您使用 DNJ RPC 功能，在这种情况下，您将使用 DNJResources.axd?conf=/path/to/dnjrpc_config.js（详细信息请参阅我的第一篇文章）。

注意：此功能（自动资源加载）仍处于实验阶段，可能不稳定，未来版本中可能会发生重大更改。如果出现问题，您仍然可以使用 DNJResources.axd 强制加载 .js 资源。

客户端事件支持

在之前的版本中，您可以从属性框编辑 DNJ.UI Web 控件设置。每个 ASP.NET 设置都对应于一个等效的 jQueryUI 设置。但当涉及 jQuery 事件处理时，没有办法编辑或重载它们。

新版本允许您从 Visual Studio 设计器自定义客户端事件。

有两种方法可以添加事件

  1. 通过提供回调名称。在这种情况下，此回调函数需要在 Web 控件外部的经典 <script> 标签中实现。如果您提供未定义的回调，当此回调被调用时，DNJ 将通过 JavaScript 弹出窗口警告您。
  2. 通过直接键入回调脚本。在这种情况下，有一个带有语法高亮（非常基础）的嵌入式 JavaScript 编辑器可以帮助您键入代码。请注意，此选项适用于您有少量代码来处理事件的情况。对于复杂的事件处理，最佳实践是使用外部回调，它使代码更具可读性。

以下截图显示了如何按名称设置回调

此截图显示了如何使用嵌入式脚本编辑器添加内联脚本

注意 1：如果同时指定回调名称和内联脚本，则内联脚本将被忽略，将使用回调。

注意 2：内联脚本表示相应 jQueryUI 事件的主体，因此所有 jQuery 事件上下文都是可访问的。例如，($this) 将访问我们示例中的滑块对象，ui 将访问 jQueryUI UI 参数，event 将访问事件参数（有关详细信息，请参阅 jQueryUI 文档）。

在旧的 DNJ 版本中，生成的标记代码始终保持尽可能简洁

<dnj:DNJSlider ID="DNJSlider1" 
           runat="server" Width="440px">
    <ClientEvents>
        <!--this Event is a callback-->
        <Start Name="mySliderStartCB">
        </Start>
        
        <!--and this one is a inline script-->
        <Stop>

            <script>
                var _id = '';
                //get the client ID of the slider
                _id = ($this).attr('id');

                //Then display it in the console
                console.log(id);

                //And finaly show an alert
                alert('My client Id is : ' + id);
            </script>

        </Stop>
    </ClientEvents>
    <Settings Values-Min="0" 
       Values-Max="100"></Settings>
</dnj:DNJSlider>

对于由 Name 属性调用的事件，您需要编写回调方法。

对于我们的示例，我们可以这样定义我们的回调

<script>
    function mySliderStartCB(event, ui) {
        console.log('started... event object = ', event);
    }
</script>

event 和 ui 参数由 jQueryUI 使用。

第三方插件集成 (DNJ.Ext)

如前所述，此版本引入了一个新命名空间：DNJ.Ext。

每个 DNJ.Ext 插件实现都将提供一个新的 ASP.NET Web 控件，其功能与 DNJ.UI Web 控件相同。其思想是利用 DNJ 和 DNJ.UI 的功能，将最流行的可视化 jQuery 插件转换为 ASP.NET Web 控件。

目前，DNJ.Exit 包含两个插件实现：著名的 jQuery Cycle 插件和一个鲜为人知的插件：jPlayer。

  • Cycle 插件允许您创建简单且可自定义的图像幻灯片，具有许多原始过渡效果。（Cycle 插件主页）。
  • jPlayer 插件允许您在网页中播放 MP3 文件或播放列表。此插件的独创之处在于它使用一个不可见的 Flash 模块来播放 MP3，并提供一个完全可自定义的 HTML/CSS 播放器界面（jPlayer 演示页面）。

这些插件作为 演示 随此版本的 DNJ 提供，展示了 DNJ.Ext 在不久的将来会提供什么。它们 不稳定，并且可能会发生重大更改。

在接下来的 DNJ 版本中，将包含更多 jQuery 插件。顺便说一句，如果您希望看到您的插件或您经常使用的插件被包含，请给我留言，我会在下一次发布中添加它。

源代码在哪里？

如果您正在寻找 DNJ 源代码，可以从 Codeplex 项目页面 获取。

源代码包括 DNJ 源代码 和 Windows 安装程序代码/脚本。

如果您不想使用 Windows 安装程序，项目页面的下载部分提供了替代二进制文件。

结论

在 DNJ 的两个公共测试版中，我致力于将大多数 jQuery 功能集成到 Visual Studio 设计器/代码编辑器中。而且，我认为 DNJ 代码结构现在几乎稳定（一些更改可能仍然会发生......）。

从 0.4.0 到 0.9.0 的后续版本都将是公共测试版。我现在将致力于性能优化、跨浏览器 JavaScript 兼容性和第三方插件实现。

1.0.0 将是第一个稳定版本。这可能需要一些时间，因为我没有太多空闲时间用于个人项目，但 1.0.0 会 发布 :)

顺便说一句，如果您对这个项目感兴趣并想加入或贡献，您可以从 DNJ 项目页面联系我，或者在这篇文章后留言。

历史

DNJ 项目已移至 CodePlex。项目页面是 http://dnj.codeplex.com

修订 1

我收到报告说安装程序有一个小错误，我已修复并上传了新的安装程序。该错误影响了演示站点中的 DNJPanel Web 控件（可能也影响了其他 Web 控件）。安装程序没有复制 DNJ.Ext DLL，这导致资源加载器失败。

在下一次发布中，我将让资源加载器在尝试加载程序集之前检查程序集是否存在。

目前，您必须在项目中包含三个 DNJ 程序集，以确保所有功能按预期工作。

© . All rights reserved.