ホーム > ASP.NET, プログラミング, メモ, Javascript > ASP.NETでjQueryをExtenderとして利用するライブラリJUICE

ASP.NETでjQueryをExtenderとして利用するライブラリJUICE


Juice UI: Open source ASP.NET Web Forms components for jQuery UI widgetsより

ASP.NET Web FormでjQuery UIを簡単に組み込むためのライブラリJUICENugetで公開されています。ライセンスはGPL2とMITのデュアルライセンスなようです。

jQuery UIのプラグインはjQueryのwidgetとして公開されているので、たとえばASP.NET WebFormなんかでTextBoxにjQuery UIのDatepickerプラグインを関連付ける場合、初期化イベント時にこんなJavascriptを書きます。

<div>
    <asp:TextBox runat="server" ID="txtCalendar"></asp:TextBox>
    <script type="text/javascript">
    $(function () {
        $("#<%= txtCalendar.ClientID %>").datepicker();
     });
    </script>
</div>

まぁ、問題ないんですけれど、JUICEを導入するとこんな感じになります。

<asp:ScriptManager runat="server"></asp:ScriptManager>
<div>
    <asp:TextBox runat="server" ID="txtCalendar"></asp:TextBox>
    <juice:Datepicker runat="server" TargetControlID="txtCalendar"/>
</div>

TargetControlIDプロパティーに拡張したいコントロールのIDを指定します。

ASP.NET AJAX ControlToolkitのエクステンダーみたいですね。というかDatepickerが継承しているJuiceExtenderExtenderControlを継承しているのでエクステンダーそのものなんですけれどね。

インストールはNuGetで、いろいろ入ります。

PM> Install-Package JuiceUI
Attempting to resolve dependency 'jQuery (= 1.7.1)'.
Attempting to resolve dependency 'jQuery.UI.Combined (= 1.8.17)'.
Attempting to resolve dependency 'json2'.
Attempting to resolve dependency 'AmplifyJS'.
Successfully installed 'jQuery 1.7.1'.
Successfully installed 'jQuery.UI.Combined 1.8.17'.
Successfully installed 'json2 1.0.2'.
Successfully installed 'AmplifyJS 1.0.0'.
Successfully installed 'JuiceUI 0.9'.
Successfully added 'jQuery 1.7.1' to WebApplication2.
Successfully added 'jQuery.UI.Combined 1.8.17' to WebApplication2.
Successfully added 'json2 1.0.2' to WebApplication2.
Successfully added 'AmplifyJS 1.0.0' to WebApplication2.
Successfully added 'JuiceUI 0.9' to WebApplication2.

インストールが終了すると、Web.ConfigにJuiceライブラリのタグライブラリが登録されるので、あとはASPXのエディターで<juice:と打てばインテリセンスが出てきます。

image

現在用意されているエクステンダーは次の14個です。

まぁ、Javascriptをじかに利用したほうが自由に書けるので、使うシーンは限定されそうだけれどこういうものもあるということで。

広告
  1. まだコメントはありません。
  1. 2012年3月1日 10:33 AM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。