DNJ: jQuery 和 JQueryUI 的 .NET 框架
4.84/5 (15投票s)
用于简化在 ASP.NET 应用程序中使用 jQuery 的开源框架。
引言
本文是对 DNJ 框架 的一些功能进行的快速指南。DNJ 是一个开源框架，可以帮助在 ASP.NET 应用程序中使用 jQuery。它提供了辅助函数、AJAX 扩展器、透明 RPC，以及作为 ASP.NET Web 控件的 jQuery UI 组件的实现。
背景
开发此框架的念头在我开始在 ASP.NET 项目中使用 jQuery 时就产生了。我开始使用代码片段来创建用于选项卡、手风琴、滑块等的 HTML 代码...然后我编写了一些辅助程序来自动加载所需的 jQuery 脚本...
我注意到在新项目中我重复了相同的步骤，而且我不认为我是唯一这样做的开发者。
一个重要的方面是 Visual Studio 设计器渲染。当你使用 jQuery 时，你必须运行你的 Web 应用程序才能看到应用的效果，这在开发复杂的 UI 时是一个大问题...我认为为 jQuery 控件提供设计时所见即所得 (WYSIWYG) 会非常有帮助！
在接下来的文章中，我将介绍当前 DNJ 版本 (v0.3.5-beta) 中实现的特性以及如何在你的项目中应用它们。
请注意，此时 DNJ 仍处于 beta 阶段，需要你的帮助来测试、识别 bug 和提出改进建议。所以，如果你觉得这个想法很有趣，请下载该框架并报告任何 bug 或建议。
准备环境
在开始之前，你必须在此处 下载 DNJ 框架。我建议使用 Windows 安装程序包；它包含 DNJ 运行时 DLL、一个 VS 模板项目、一个 VS 演示站点、工具箱安装程序以及可与 DNJ 一起使用的 jQuery UI 主题！如果你不想使用 Windows 安装程序，可以单独下载每个组件（运行时 DLL / 项目模板 / 演示站点）。如果你正在创建一个新项目，请使用 DNJ 模板来创建它。如果你想为新项目启用 DNJ，你必须添加对 DNJ 运行时库 (Org.Eurekaa.DNJ.dll 和 Org.Eurekaa.DNJ.UI.dll) 的引用。然后，编辑你的 web.config 并在 system.web 部分添加以下内容：
<httpModules>
<add name="DNJHttpModule"
type="Org.Eurekaa.DNJ.Http.DNJHttpModule,Org.Eurekaa.DNJ" />
</httpModules>
<httpHandlers>
<add path="DNJResources.axd" verb="*"
type="Org.Eurekaa.DNJ.http.DNJHttpHandler, Org.Eurekaa.DNJ" />
</httpHandlers>
请注意，如果你不添加上面的代码，当你第一次使用 DNJ Web 控件时，DNJ 会要求你自动添加它。
DNJ 脚本加载器
DNJ 中一个重要的模块是脚本加载器；这个模块允许你即时构建一个最小化的 jQuery+jQuery 包。
你可以轻松决定加载哪些 jQuery 插件和哪些 jQuery UI 组件。脚本加载器是一个 HTTP 处理程序，你可以在 <script> 标签中调用它。
下面的语法将加载所有 jQuery + jQuery 脚本
<script type="text/javascript" src="DNJResources.axd?load=jquery,ui[all],fx[all]">
</script>
如果你只需要加载 jQuery UI 的一部分，例如，你可以使用这个语法
<script type="text/javascript"
src="DNJResources.axd?load=jquery,ui[tabs,datepicker],fx[all]"></script>
为了更精细地控制，你可以使用这个语法（所有可能的值都已列出）
<script type="text/javascript"
src="DNJResources.axd?load=jquery,ui[accordion,core,datepicker,dialog,draggable,
droppable,position,progressbar,resizable,selectable,slider,
sortable,stackfix,tabs], fx[blind,bounce,clip,core,drop,explode,
fold,highlight,pulsate,scale,shake,slide,transfer]"></script>
脚本加载器也用于生成 DNJ RPC 模块的 JavaScript 存根（请参阅下一节）。语法是：
<script type="text/javascript" src="DNJResources.axd?conf=path/to/dnjrpc.conf.js">
</script>
DNJ RPC 模块
DNJ RPC 允许你从 JavaScript 调用你的服务器方法。
假设你有一个 C# 类，其中声明了一些函数：
namespace MyNameSpace
{
public class ServerProcesses
{
public static string SayHello()
{
return "Hello World from : " +
Assembly.GetExecutingAssembly().FullName;
}
public string Say(string something)
{
return something;
}
public int Add(int a, int b)
{
return a + b;
}
public double Add(double a, double b)
{
return a + b;
}
}
}
DNJ RPC 将允许你使用以下 JavaScript 代码从 JavaScript 调用它们：
<script>
$(document).ready(function(){
$('#Button1').bind('click', function(){
$.DNJRPC('#SomeTargetSelector').MyNameSpace.ServerProcesses.SayHello();
});
$('#Button2').bind('click', function(){
$.DNJRPC('#target').MyNameSpace.ServerProcesses.Say('Some string here');
});
$('#Button3').bind('click', function(){
var a = GetSomeValueForA();
var b = GetSomeValueForB();
$.DNJRPC('#result').MyNameSpace.ServerProcesses.Add(a , b);
});
});
</script>
请注意，命名空间得到了保留！
为了实现这一点，你必须在一个 JSON 配置文件（例如，dnj/config/dnjrpc.conf.js）中声明允许的方法：
{
"Functions": [
{
"Name": "SayHello",
"Assembly": "MyNameSpace",
"Type":"MyNameSpace.ServerProcesses"
},
{
"Name": "Say",
"Assembly": "MyNameSpace",
"Type":"MyNameSpace.ServerProcesses"
},
{
"Name": "Add",
"Assembly": "MyNameSpace",
"Type":"MyNameSpace.ServerProcesses"
}
]
}
注意，对于 C# 的 Add 方法，我们只声明了一个条目！参数类型将自动检测。
然后，你使用 DNJ 脚本加载器来生成 JavaScript 存根和命名空间。
<script type="text/javascript" src="DNJResources.axd?conf=dnj/config/dnjrpc.conf.js">
</script>
点击此处查看实时示例。（查看页面源代码了解详情。）
使用 DNJ Panel AJAX 化 .NET Web 控件
此模块是一个 AJAX 扩展器，其工作方式类似于 ASP.NET AJAX Panel。DNJ Panel 不需要脚本管理器，并且具有一些可以重载的回调函数，用于自定义面板的某些行为。该模块要求使用 DNJ 脚本加载器加载 jQuery。
要 AJAX 化一个标准的 .NET Web 控件，你所要做的就是将其放入 DNJ Panel 中。这将防止控件在执行回发时重新加载当前页面...在此处查看实时演示：具有默认设置的 DNJPanel。
这将与 Microsoft ASP.NET AJAX Panel 完全相同。现在，让我们看看如何为 DNJPanel 添加有趣的功能。
在 .aspx 文件中，我们将添加以下代码：
<style type="text/css">
.dnj-indicator
{
border:0px;
background: #a00;
color:#fff;
position:absolute;
top:0px;
right:0px;
width:150px;
font:700 11px verdana;
padding:2px 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//Creating a custom ajax indicator (à la GMail "loading" indicator)
var indicator = $('<div>Loading</div>').addClass('dnj-indicator').hide();
$('body').append(indicator);
$(window).scroll(function() {
indicator.css('top', $(this).scrollTop() + "px");
});
// Custom DNJ ajaxifier initialisation
// Note that we can activate DNJ by simple $.DNJ() call
// The example bellow shows how we can add
// some visual effects for loading, waiting, errors ...etc
//
$.DNJ.settings.beforeCallBack = function(sender)
{
indicator.show();
sender.fadeTo("fast", 0.50);
};
$.DNJ.settings.afterCallBack = function(sender)
{
indicator.hide();
};
$.DNJ.settings.errorCallBack = function(msg) {
$.nyroModalManual({
//note that nyromodal plugin must be loaded
//first in a <script ...> section
bgColor: '#ffaaaa',
title: 'An error has occured',
content: msg
});
};
});
</script>
我们要求 DNJ Panel 重载其 before/after/error 回调。before 和 after 回调将显示/隐藏一个指示器，类似于 GMail 使用的指示器。
error 回调将使用第三方 jQuery 插件 (nyromodal) 在发生错误时显示异常屏幕。
所有这些都在以下页面中进行了演示：DNJPanel 高级演示。
DNJ Web 控件
如果你使用 Windows 安装程序来设置 DNJ，你将获得以下添加到 Visual Studio 的工具箱（你可以在此处获取 Windows 安装程序）：
如果安装过程失败，你可以下载 DNJ 运行时库并手动添加它们。控件都是所见即所得的，但仍存在一些与 VS2005 不兼容的问题，将在下一个版本中修复。Web 控件设计器旨在同时保持 jQuery 和 ASP.NET 的逻辑。在下面的截图中，你可以在 VS 设计器中看到 DNJTabs 控件。
所有 DNJ UI 控件都有一个名为“Settings”的公共属性，它封装了将传递给 JQueryUI 控件的所有设置。
请注意，你可以通过设计器添加/修改/删除选项卡页面，你可以从属性框修改控件属性，并且你可以实时看到将传递给 jQuery 插件的内容（JSON 字符串）。
DNJ DatePicker 设计
这是一个 DNJTab 组件的 ASPX 代码示例：
<dnj:DNJTabs ID="DNJTabs1"
runat="server" Height="325px" Width="400px">
<Settings cache="True"></Settings>
<BoxList>
<dnj:DNJBox runat="server" Title="Page_0" ID="Page_0">
<Content>
This is a DNJ Tabs demo<br />
you can Add/Remove/Edit tabs' titles
from the source code or from the designer
<br />
<br />
<br />
</Content>
</dnj:DNJBox>
<dnj:DNJBox ID="Page_1" runat="server" Title="Page_1">
<Content>
It works :)
</Content>
</dnj:DNJBox>
<dnj:DNJBox ID="Page_3" runat="server"
Ajax="True"
ContentUrl="~/Demos/UIDemos/AjaxBackend.ashx"
Title="AjaxTab">
<Content>
This content will be replaced with the result of an ajax Call
</Content>
</dnj:DNJBox>
</BoxList>
</dnj:DNJTabs>
以及 DNJ DatePicker 的源代码
<dnj:DNJDatePicker ID="DNJDatePicker1" runat="server">
<Settings AppendText="" ButtonImage=""
ChangeMonth="True" ChangeYear="True" InlineMode="True" />
</dnj:DNJDatePicker>
正如你所见，代码很简洁；）
结论
在本文中，我试图让你了解 DNJ 是什么以及你可以用它做什么。该项目仍处于开发阶段，需要大量的改进，因此欢迎反馈。我正在努力为当前版本编写完整的文档，该文档将在 DNJ 官方网站发布。如果你对该项目感兴趣，或者有希望在未来的 DNJ 版本中看到的想法，请随时在此文章下评论，或使用 Google Code 项目问题跟踪器提交。