rinevo.com – ページ 11

ASP.NET AJAX Control Toolkitを利用する

投稿者: rinevo | 2011年11月7日

■元ネタ
http://www.atmarkit.co.jp/fdotnet/dotnettips/580aspajaxmodalpopup/aspajaxmodalpopup.html

■Control Toolkitを利用するための準備

Control Toolkitを、以下のサイトからダウンロードする。

AJAX: The Official Microsoft ASP.NET Site
http://www.asp.net/ajax
AJAX Control Toolkit→CodePlex→Downloads→AjaxControlToolkit.Binary.NET4.zip
の順でリンクを辿ればダウンロードできる。

ダウンロードしたzipファイルを解凍する。

展開されたフォルダから
・「ja」「fr」など、すべてのサブフォルダ
・AjaxControlToolkit.dll
を、アプリケーション・ルート配下のBinフォルダにコピーする。

Control Toolkitで提供されるコントロールを利用するための設定をWeb.configに記述する。

<system.web>
……中略……
<pages>
<controls>
<add tagPrefix=”ajaxToolkit” namespace=”AjaxControlToolkit” assembly=”AjaxControlToolkit”/>
</controls>
</pages>
</system.web>

以上で、「<ajaxToolkit:～」のタグが使えるようになる。

■ツールボックスにコントロールを追加する

ツールボックス上で右クリックし、表示されたコンテキスト・メニューから［アイテムの選択］を選択して［ツールボックスアイテムの選択］ダイアログを表示させる。

［参照］ボタンをクリックし、先ほどアプリケーションに配置したAjaxControlToolkit.dllを選択する。
コントロールが追加され、かつ、チェックが入っていることが確認できたら、そのまま［OK］ボタンをクリックする。

以上で、ツールボックスにコントロールが追加される。

■ビルドできるようにする

上の設定までだと、ビルドすると「・・・が定義されていません。」のエラーが出てしまうので、参照設定を追加する。

ソリューションエクスプローラーの参照設定を右クリックして、参照の追加を選択。
参照の追加画面からAjaxControlToolkit.dllを選択して、[OK］ボタンをクリックする。

以上で、AjaxControlToolkitのコントロールを使ったソースコードをビルドできるようになる。

GridViewのタイトル行を固定して、スクロールを可能にする

投稿者: rinevo | 2011年11月6日

0件のコメント

GridViewのタイトル行を固定して、スクロールを可能にする方法は色々ありますが、IE限定の方法だったり、実装が面倒だったり、ググるとニーズは多く、皆さん苦労しているようです。

しかし、jQueryプラグイン「Lightweight Scrollable Tables」を使うと簡単にできそうです。

■表示例

■使い方
１．プラグインをダウンロード（http://plugins.jquery.com/project/scrollableTable）
２．jsファイルを自分のプロジェクトに追加（Scriptフォルダ等にコピー）
３．下のようにjQuery をページにインポートしてスクリプトを記述する

GridViewが縦250pxを超えたらスクロールバーを表示する例

<div>
<asp:gridview ID=”datagrid” runat=”server”>
</asp:gridview>
</div>
<script src=”Scripts/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/scrollbarTable-0.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
(function ($) {
$(‘table’).scrollbarTable(250);
})(jQuery);
</script>

■元ネタ
http://phpspot.org/blog/archives/2011/05/jquerylightweig.html

jQuery を利用する方法

投稿者: rinevo | 2011年11月6日

0件のコメント

Visual Studio 2010 は標準でjQueryをサポートしているため、「空のWebアプリケーション」以外で、新しいプロジェクトを作成すれば自動的に必要なファイルが追加されます。

他のプロジェクトで利用したい場合は、Scriptフォルダをコピーすれば使えます。

あとは、jQuery をページにインポートしてスクリプトを記述するだけ。

■参考
http://msdn.microsoft.com/ja-jp/asp.net/gg638968

TreeViewコントロールの使い方

投稿者: rinevo | 2011年11月5日

0件のコメント

表示例

TreeViewコントロール（線の表示有り）

<asp:TreeView ID=”tree” runat=”server”
EnableClientScript=”False” ExpandDepth=”0″
LineImagesFolder=”~/TreeLineImages” ShowLines=”True”>

ノードを追加する

Dim node As New TreeNode()
node.Value = reader.GetString(0) ‘ ノード値
node.Text = reader.GetString(1) ‘ ノード・テキスト
・
・
・
tree.Nodes.Add(node)

ノードごとにアイコンを設定する

Select Case parent
Case “-”
node.ImageUrl = “~/image/cloudservice.ico”
Case “http://jp.msn.com/”
node.ImageUrl = “~/image/folder.ico”
Case Else
node.ImageUrl = “~/image/icon.ico”
End Select

動的に子ノードを取得

ソースコードなどをブログに掲載するときに細い線の枠で囲む

投稿者: rinevo | 2011年11月4日

0件のコメント

<table>タグ１つでborder設定だと、線が太くなって、なんとなくカッコ悪いため、細い線で枠を表示するためには、<table>タグを重ねる。

■元ネタ
http://www.tohoho-web.com/html/table.htm

■例

<table bgcolor=”#000000″ border=”0″ cellpadding=”0″ cellspacing=”0″><tbody><tr><td>
<table border=”0″ cellpadding=”3″ cellspacing=”1″><tbody><tr bgcolor=”#FFFFFF”><td>
ここに記事を記入
</td></tr></tbody></table>
</td></tr></tbody></table>

＜追記 2012.09.23＞
スタイルシートを使えばもっと簡単。

<div style=”border: solid 1px #cccccc;”>
ここに記事を記入
</div>