Home > プログラミング > ASP.NET AJAX Archive

ASP.NET AJAX Archive

.NET Framework 3.5にも完全対応、AJAX Control Toolkitリリース

.NET Framework 3.5にも完全対応、AJAX Control Toolkit最新版リリース

 AJAX Control Toolkitの最新版、Version 3.0.20229が2月29日にリリースされた。CodePlexよりダウンロードできる。

 AJAX Control Toolkitは、ASP.NETで動作するAJAXライブラリ。新バージョンでは「隠し状態でのタブ機能」「1つ目がブランクから始まるタブ」「サーバーサイドバリデーションにおけるValidatorCallout」などがサポートされたほか、「Safari上でのカレンダー機能」が改善されている。その他、多くのパッチ提供を受けバグが修正されている。

 AJAX Control Toolkitは、.NET Framework 3.5/Visual Studio 2008用の「Version 3.0.20229」と、.NET Framework 2.0/Visual Studio 2005用の「Version 1.0.20229」の2バージョンが用意されている。

今回のバージョンで、3.5に完全対応ということらしいけど、今まで対応してなかったとは知りませんでした。
基本的には、不具合箇所のFIXということらしいです。

ASP.NET AJAX Control Toolkit Version 1.0.10920.0 公開

ASP.NET AJAX Control Toolkit

9/20に公開されていたようです。
バグもいくつか直っているようなので、CalendarExtender、CollapsiblePanelExtenderの不具合も直っているかなあ?と期待してたんですが。

試してみたら、全く直っていませんでした。orz

CalendarExtender+MaskedEditExtenderの実装サンプル

CalendarExtenderネタが続いたので、実装のテンプレートを公開しておきます。
[***]の部分を、日付入力用TextBoxのIDに一括置換してください。
あと、カレンダーのアイコンはご自身で用意してください。


<asp:ImageButton runat="Server" ID="***Image" ImageUrl="~/images/カレンダーのアイコン.jpg" AlternateText="カレンダーを表示します" CausesValidation="False" OnClientClick="return false;" />
<ajaxToolkit:MaskedEditValidator ID="***Validator" runat="server" Display="Dynamic"
ControlExtender="***Mask" ControlToValidate="***" InvalidValueBlurredMessage="日付の入力が正しくありません" ValidationGroup="Main" />

<ajaxToolkit:CalendarExtender ID="***Extender" runat="server" CssClass="ajax__calendar" TargetControlID="***" PopupButtonID="***Image" />
<ajaxToolkit:MaskedEditExtender ID="***Mask" runat="server" TargetControlID="***"
Mask="9999/99/99" CultureName="ja-JP" MaskType="Date"
OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" AcceptNegative="Left" />


CalendarExtenderでカレンダーがDropDownの下に表示される

またもや、DropDownなんですが...
CalendarExtenderで表示したカレンダーにDropDownが被っていると、DropDownの方が上に表示されてしまいます。
その他のコントロールの場合は大丈夫そうなので、相変わらずDropDownとの相性のようです。
今回の問題は結構有名なのか、すぐに解決方法が見つかりました。

How do I get the CalendarExtender to show over a dropdown?

要約すると、スタイルシートに以下を追加します。


/* CalendarExtender */
.ajax__calendar
{
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible; display: block;
}
.ajax__calendar iframe
{
left: 0px !important;
top: 0px !important;
}

CalendarExtenderのCssClassでajax__calendarを指定します。
こんな感じ


<ajaxToolkit:CalendarExtender ID="***Extender" runat="server" CssClass="ajax__calendar" TargetControlID="***" PopupButtonID="***Image" />

IE以外のブラウザできちんと動作するかは確認してないので分かりませんが...

CalendarExtenderでカレンダーを閉じるときにPostBackしてしまう

ImageButtonにCalendarExtenderを割り当てたところ、カレンダーは表示されるのですが、カレンダーが表示されているときに再度押下すると、PostBackが発生しました。
PostBackするということは、Submitしているのだろうということで、ImageButtonのOnClientClick属性に OnClientClick="return false;" を設定したところ、PostBackしなくなりました。

そんだけなんですが、忘れないようにメモってことで。

CollapsiblePanelExtender使用時に画面がちらつく

CollapsiblePanelExtenderを使用しているとき、画面表示後に一瞬消えてもう一度描画処理が行われます。
再現する画面と再現しない画面があるので試行錯誤していたら、DropDownListを表示している画面だけに発生していることが分かりました。

恐らくバグだろうと思い、ぐぐってみると、それらしき情報が見つかりました。
どうやら、DropDownListというより、Selectタグとの相性みたいですね。
CollapsiblePanelExtender Flicker Solution

以下、大体の説明です。

1.DropDownListコントロールのstyleで非表示にしておきます。

style="visibility:hidden;"


2.以下のJavaScriptを追加します。このスクリプトにより、pageLoad時にstyleの非表示が解除されます。



<script language="javascript" type="text/javascript">
function pageLoad()
{
var dropdowns = document.getElementsByTagName("select");
if (dropdowns)
{
for (i=0; i < dropdowns.length; i++)
{
dropdowns[i].style.visibility = "visible";
}
}
}
</script>

CalendarExtenderでカレンダーを日本語表記にする

ScriptManagerのEnableScriptGlobalization、EnableScriptLocalization属性を共にtrueにすればいいようです。
CalendarExtenderは特に何かしなくても、勝手に日本語になりました。
便利だけど、ちょっと分かりにくいかも。

大量のAjax関連リンク集

大量のAjax関連リンク集

「あるSEのつぶやき」さんで紹介されていたのですが、本当に大量のAjax関連リンク集でした。
英語のページなんですが、きちんと分類されているので、目的の情報を探しやすいんじゃないかと思います。
Ajaxだけでなく、Javascriptだけのページも分類されているようです。

ASP.NET AJAX のソースコード公開

ASP.NET Ajax Server/Client Source Codeが公開になる!?
ASP.NET 2.0 AJAX Extensions 1.0 Source Code

正直、あまりコードには興味がなかったのですが、新たにコントロールを作らなきゃいけない状況になるかもしれないので、参考になるかもしれません。
気が向いたら、ダウンロードしてみようと思います。

MicroSoftがこの手のコードを公開したのは、ちょっと記憶に無いのですが...あったかな?
どっちかというと、そっちの方が驚きだったり。

Microsoft AJAX LibraryをPHPから使用するライブラリが公開されています

Microsoft AJAX LibraryをPHPから使用するライブラリが公開されています

私はPHPを使っていないので、よく分からないのですが。
ASP.NET AJAX 1.0と同様の機能を持ったライブラリ、PHP for Microsoft AJAX Libraryが公開されているようです。
内容は、先日紹介したASP.NET AJAX 1.0と一緒にリリースされた、Microsoft AJAX LibraryをPHPでも使用できるようにしたものなんだとか。

Microsoft AJAX LibraryはASP.NET AJAX 1.0で使用されているJavascriptライブラリなので、ASP.NETでなくても使用することができるのですが、PHP用にラップすることで、ASP.NET AJAX 1.0みたいに使うことができるようです。

まだアルファ版とのことなので、今後の展開を見守りたいと思います。

ASP.NET AJAX 1.0 正式版

AJAX : The Official Microsoft ASP.NET AJAX Site
「ASP.NET AJAX 1.0 正式版」、ついにリリース!

いよいよ出ました!
というか、先週のVSUGアカデミースペシャルでは「いつとは言えない」と弱気な発言だったので、正直今月末ギリギリかと思ってたんですが...

正式版だけがダウンロードできるだけでなく、デモンストレーションのビデオなんかも見れるので、初めて名前を聞いた人にも理解しやすいかも。
ただ、英語版だけのリリースです。
日本語版は次期VisualStudioの発売に向けてやっていくとのことなので、しばらくは英語と格闘になります。
あるいは、誰かが翻訳してくれるのを待つしかないようです。

Atrasとコードネームが着いていた頃より、数段使いやすくなっている感じがするので、使ってみた感想をまた書いてみようと思います。

VSUGアカデミースペシャル 「ASP.NET AJAX 1.0 登場」

VSUGアカデミースペシャル 「ASP.NET AJAX 1.0 登場」

職場の仲間と一緒に参加してみました。
「ASP.NET AJAX」については、「Atlas」とコードネームで呼ばれていた頃から注目していて、実際に業務に使ったりしていたわけで、使い方なんかは大体理解していたつもりだったんですが...

「ASP.NET AJAX」は、今後のASP.NET開発を変えるであろうことは予想していたものの、コードを書く量が本当に必要最小限に抑えられている点が素晴らしいと思う。
AJAXというより、面倒くさかったJavaScriptを使った開発がより楽になるなあと実感できました。

実際にマイクロソフトの方がサンプルコードを作成していくデモンストレーションは、なかなか見ごたえがありました。こんな使い方もできるのかあと。
あとは、入力スピードがさすがに速いなあと思いました。インテリセンスを上手に使っているからなんですが、こういうのも生産性に絡んでくるんだなあ、などと考えてみたり。

ASP.NET "Atlas" ドキュメント日本語版ダウンロード

ASP.NET "Atlas" ドキュメント日本語版ダウンロード

ASP.NET "Atlas" の日本語版ドキュメントがダウンロードできるようです。
これで、英語地獄から解放される...

【Atlas】Atlasを使った未入力チェックのサンプル

Atlasを使って、簡単なサンプルを作ってみました。
サーバサイドで一括チェックを行う際、チェック処理をAtlasを使うことでポストバックなしで実行します。
ポイントとなる点も特に無く、UpdatePanelで囲ってあげるだけで簡単に実現できます。
これなら、従来のコードに少し足してあげるだけですね。

aspxのコードは


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Atlasを使った未入力チェック</title>
</head>

<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="<BR>未入力エラー" ControlToValidate="TextBox1" EnableClientScript="False"></asp:RequiredFieldValidator>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="<BR>未入力エラー" ControlToValidate="TextBox2" EnableClientScript="False"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</atlas:UpdatePanel>
</form>
</body>
</html>

csのコードは


public partial class Default2 : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Validate();
}
}

【Atlas】Atlasの使い方ビデオ

Atlasは大変素晴らしい技術だと思うけど、英語のページばかりでよく分からん。
という人は多いと思います(私も英語が苦手なので...)が、ビデオで見ると分かりやすかったりします。
Atlasだけでなく、プログラムの組み方なんかも、「へえ~」と思えるところがいっぱいでした。
(私は本当に英語が苦手なので、音声を切って見ていたりします。英語が苦手な人はこの作戦でどうぞ!)

8月25日のScottGu's Blogでリンク集が紹介されています。
[ScottGu's Blog]Great New Atlas Videos Published (All Free)

これは、7月27日のScottGu's Blogで紹介されている
[ScottGu's Blog]Atlas “How Do I?” Video Series Begins
の内容も含まれているようです。

結構な本数があるので全部見るのは時間がかかりますが、普通に勉強するよりも理解しやすいと思います。

【Atlas】LiveControls

  • Posted by:
  • 2006年9月 6日 12:31

Atlasの情報ばかり追いかけていたら、いつの間にやらGrapeCityもAjax製品を出していたようです。
全くのノーマークでした。

LiveControls
LiveControls 1.0J オンラインデモ
[aspxの日記(ASP++ブログ) by Moo]Grapecity,Ajax機能を搭載したWebアプリケーション用のコントロールセット「LiveControls 1.0J」を発売

こちらもなかなか良さそうですが、値段がなかなか...
個人的にはatlasを待ちます。

【ASP.NET】Atlasタグがcc1とかになってしまうこと

Atlasをいろいろ試していたところ、動作は全く問題ないのですがひとつだけ気になるところが...
サンプルコードを見ると、
<Atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />
のように書かれているコードですが、私の環境でコントロールを貼り付けると、
<cc1:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />
のように、タグ名が変わってしまっていました。

調べてみたところ、どうやらこのタグはページ内で統一していれば、なんでもいいようです。
定義するところは、
<%@ Register Assembly="Microsoft.Web.Atlas" Namespace="Microsoft.Web.UI" TagPrefix="cc1" %>
のTagPrefixの部分を変えてやればいいようです。つまり、
<%@ Register Assembly="Microsoft.Web.Atlas" Namespace="Microsoft.Web.UI" TagPrefix="Atlas" %>
とするだけで、サンプルのような書き方ができるようになります。

参考
TagPrefixInfo.TagPrefix プロパティ

Continue reading

【ASP.NET Atlas】Atlasで変わるアプリケーション開発

Atlas(コードネーム)とは、次期VisualStudioに含まれると予想されるAjaxのフレームワークを意味します。

[ASP.NET "Atlas" 概要]を読んでいただければ思想は理解できるのではないかと思います。
要するにAjaxを楽に開発しちゃおうということなんですが、実際にサンプルを見てみるまではまゆつばものでした。

あれこれ考える前に、こちらのサンプルをご覧ください。
Microsoft "Atlas" Control Toolkit

Ajaxが登場したとき、開発者でない人もその操作性に驚いたものですが、WEB開発を生業としている人は、「ああ、またJavaScriptかあ」と思った人も多いんじゃないでしょうか。
JavaScriptは情報の受信専門だった、WEBの世界にクライアント側の操作という概念を生んだということでは大きな存在なのですが、一方で開発の面倒くささ(デバッグ等)のために忌み嫌われてきた部分があります。実際、私も仕事ではやむを得ず使いますが、大嫌いです。
そのため、Ajaxが出たときも、「すごいけど、面倒だなあ」と考えていました。

しかし、このサンプル、ソースを見ると考えが一変します。
もう例える言葉が「すごい」しか出てきませんでした。
動きがWEBアプリケーションと差が無くなってきているのに、通常のコントロールと同様のコーディング量なのです。
本日の段階で21個のコントロールも、これからどんどん増えていくようです。
これほどの衝撃を受けたのは、はじめてインターネットを見たとき以降かもしれません。

当ブログも、これからAtlasを追っていこうと思います。

Index of all entries

Home > プログラミング > ASP.NET AJAX Archive

Search
Feeds
Tag Cloud
Recommend

SQLパズル 第2版 プログラミングが変わる書き方/考え方
SQLパズル 第2版 プログラミングが変わる書き方/考え方

ソフトウェアアーキテクチャ―ソフトウェア開発のためのパターン体系
ソフトウェアアーキテクチャ―ソフトウェア開発のためのパターン体系

ITアーキテクト vol.1
ITアーキテクト vol.1

オブジェクト指向における再利用のためのデザインパターン
オブジェクト指向における再利用のためのデザインパターン

増補改訂版 Java言語で学ぶデザインパターン入門
増補改訂版 Java言語で学ぶデザインパターン入門

増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編
増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編

J2EEデザインパターン
J2EEデザインパターン

アンチパターン―ソフトウェア危篤患者の救出
アンチパターン―ソフトウェア危篤患者の救出

世界でいちばん簡単なネットワークのe本―ネットワークとTCP/IPの基本と考え方がわかる本
世界でいちばん簡単なネットワークのe本―ネットワークとTCP/IPの基本と考え方がわかる本

Return to page top