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

几分钟内为 ASP.NET 编写 jQuery 插件 WebControl！

Ray_Liang
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (26投票s)

2009年5月16日

GPL3

3分钟阅读

viewsIcon

222891

downloadIcon

2656

几分钟内为 ASP.NET 编写 jQuery 插件 WebControl！

DJ_Src

更新

2009/6/8 DJ v1.1.15 已发布。点击此处获取新下载。

引言

jQuery 是一个轻量级的开源 JavaScript 库（仅 15kb 大小），在相对较短的时间内已成为网络上最受欢迎的库之一。“写得少，做得多”对于我们的 Web 开发人员来说是一个非常好的理念。但是当我们在 ASP.NET 中使用它时，发生了一些事情……

背景

我们面临着在 ASP.NET 中使用 jQuery 的挑战。

  1. 即使 jQuery 非常简单，我们也必须了解它。
  2. 在使用 jquery UI 小部件、jquery 插件、效果、动画等时，我们必须更多地了解“选项”。我记不住所有选项，所以每次使用它们时都必须查阅文档，因为 VS.NET 无法支持所有 jquery 插件或 UI 智能感知，这对我很糟糕，我觉得这浪费了我的时间！例如，当我使用 datepicker 时，我必须了解 39 个以上的选项！这是一个噩梦！这样我就可以为我的应用程序使用更少的代码了。
    $(function() {
   $("#datepicker").datepicker(
                               buttonText:'Close',
	                      changeMonth:true,
	                      changeYear:true,
	                      gotoCurrent:true,
	                      showOn:'click',
                               onselect:function(){
                               ///.....
                               });
                               });

    我再也记不住超过 5 个选项了……

  3. 当我在不同的页面中使用一些小部件时，我必须复制粘贴 HTML 代码或手动重写！Tabs 和 accordion 经常使用。它们的 HTML 代码太多了！在服务器页面中使用这些代码没有意义！
    <div id="accordion">
<h3>
    <a href="#">Section 1</a></h3>
<div>
    Section 1 content here
</div>
<h3>
    <a href="#">Section 2</a></h3>
<div>
    Section 2 content here
</div>
<h3>
    <a href="#">Section 3</a></h3>
<div>
    Section 3 content here
</div>
</div>
  4. 我必须在每个页面中添加脚本引用（jquery 的库文件太多了。如果合并到一个文件中，它将变得非常大！)
  5. 当 UI 与服务器交互时，我只能通过向服务器发布一个值来使用 Callback 或 WebService 事件！

那么我该如何“写得少，做得多”？！我编写了大量代码来使用 jQuery！

在服务器端“写得少，做得多”！

在此背景下，我为 ASP.NET 中的 jQuery 构建了一个名为“DJ”的轻量级框架。

设计目标

  • 使用服务器控件来渲染使用 jQuery 的 HTML 元素。
  • 我不想再记“选项”了！VS.NET 可以识别 WebControl 的所有属性，并且具有“智能感知”，因此这个框架必须能够将选项转换为控件属性。
  • 该控件可以嵌入 jQuery 脚本资源并自行引用。
  • 这种类型的控件必须以非常简单的方式编写，以便能够“写得少，做得多”。
  • 在处理服务器事件时，该控件可以实现 INamingContainer、IPostbackEventHandler、IPostbackDataHandler。
  • 我可以直接在控件属性中编写客户端事件脚本。

所以服务器控件的代码看起来就像这样

using System;
using System.Web.UI;
using DNA.UI; //step1:Import the DNA.UI library

//step2: add the JQuery Attribute to your control class header
[JQuery(Assembly="jQuery",Name="lightbox",ScriptResources=new string[]
	{"plugin.lightbox.js"})]
public class LightBox:Control
{
    //step3: add the JQueryOption Attribute to the property header
    [JQueryOption(Name = "fixedNavigation")]
    public bool FixedNavigation { get; set; }

    protected override void OnPreRender(EventArgs e)
    {
       //step4: Register the jQuery Control
        DNA.UI.ClientScriptManager.RegisterJQueryControl(this);
        base.OnPreRender(e);
    }
}

太棒了！只需四个步骤，我就编写了 lightbox 服务器控件！因此，我在“DJ”中编写了所有 jquery.ui 的小部件，这样您就可以使用它们来快速构建您的 ASP.NET 应用程序，或者您可以使用这个框架来编写您自己的 jquery 服务器控件！

看看使用纯粹的 jquery 客户端脚本和 DJ WebControl 之间的区别：

如果您想查看“DJ”的更多实时演示，您可以访问我的网站，并将最新版本的源代码放在CodePlex上。

资源

© . All rights reserved.