RSS 2.0
シンプルなカスタムコントロールを作ってみます。
作るのは左と右のテキストボックスに値を入れて、Calcボタンを押すと右端の
テキストボックスに計算結果が出力されるフォームを持つコントロールです。
- 動作の確認は次のとおりです。
- OS:Windows Viest Enterprise Edition
- .NET : 3.5
- IDE: Visual Studio 2008 Professional
- 確認環境:Visual Studio 2008 組み込みサーバ
1.コンポーネントを作成する
Visual StudioのプロジェクトからASP.NET Server Controlを選択してプロジェクトを作成します。プロジェクトを右クリックして新しい項目の追加でASP.NET Server Controlを作成します。作成されたファイルを次のように編集します。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Handcraft.Web.UI.CalcControls
{
[ToolboxData("<{0}:CalcControl1 runat=server></{0}:CalcControl1>")]
public class CalcControl1 : Control
{
/// <summary>
/// カスタムコントロールでカスタマイズする場所
/// </summary>
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<div style='text-align:center;vertical-align:middle;'>");
writer.Write("<input type='text' id='leftValue' name='leftValue' style='width:100px;' />");
writer.Write("<select name='operator' id='operator' style='width:40px;'>");
writer.Write("<option value='+'>+</option>");
writer.Write("<option value='-'>-</option>");
writer.Write("<option value='*'>*</option>");
writer.Write("<option value='/'>/</option>");
writer.Write("</select>");
writer.Write("<input type='text' id='rightValue' name='rightValue' style='width:100px;' />");
writer.Write("=");
writer.Write("<input type='text' id='result' name='result' readonly='readonly' style='width:100px;background-color:Aqua;' />");
writer.Write("<br />");
writer.Write("<input type='submit' id='calcResult' name='calcResult' value='calc' />");
writer.Write("</div>");
}
}
}
同じプロジェクトのAssemblyInfo.csの最後の行に次のアトリビュートを追加しました。
TagPrefixAttributeはSystem.Web.UIネームスペースに存在します。この設定をすることでカスタムコントロールを使うページにCalcControl1コントロールをツールボックスからフォームにドラッグアンドドロップしたときにタグプレフィックスが既定のcc1ではなくhccとなるようになります。
[assembly: TagPrefix("Handcraft.Web.UI.CalcControls","hcc")]
2.カスタムコントロールを使う
同じソリューション上で、別のプロジェクトテンプレートASP.NET Web Applicationから新しいプロジェクトを作成し、参照にカスタムコントロールを作成したプロジェクトを追加します。
参照設定後、Toolboxにコントロールが追加されるので、Webフォームのソースビュー上にドラッグアンドドロップをしてカスタムコントロールを作成します。下のコードを参照してください。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestPage._Default" %> <%@ Register Assembly="CalcControl" Namespace="Handcraft.Web.UI.CalcControls" TagPrefix="hcc" %> <!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center;vertical-align:middle;">
<input type="text" id="leftValue" name="leftValue" style="width:100px;" />
<select name="operator" id="operator" style="width:40px;">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="rightValue" name="rightValue" style="width:100px;" />
=
<input type="text" id="result" name="result" readonly="readonly" style="width:100px;background-color:Aqua;" />
<br />
<input type="submit" id="calcResult" name="calcResult" value="calc" />
</div>
<hcc:CalcControl1 ID="CalcControl1" runat="server">
</hcc:CalcControl1>
</form>
</body>
</html>
3.実行結果
実行すると次の用はhtmlの内容を確認することができます。
<!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><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIxOTE1NzgzNmRkR6IVvIZ2kuJ5Qo/XKJQDDkTCt5g=" />
</div>
<div style="text-align:center;vertical-align:middle;">
<input type="text" id="leftValue" name="leftValue" style="width:100px;" />
<select name="operator" id="operator" style="width:40px;">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="rightValue" name="rightValue" style="width:100px;" />
=
<input type="text" id="result" name="result" readonly="readonly" style="width:100px;background-color:Aqua;" />
<br />
<input type="submit" id="calcResult" name="calcResult" value="calc" />
</div>
<div style='text-align:center;vertical-align:middle;'><input type='text' id='leftValue' name='leftValue' style='width:100px;' /><select name='operator' id='operator' style='width:40px;'><option value='+'>+</option><option value='-'>-</option><option value='*'>*</option><option value='/'>/</option></select><input type='text' id='rightValue' name='rightValue' style='width:100px;' />=<input type='text' id='result' name='result' readonly='readonly' style='width:100px;background-color:Aqua;' /><br /><input type='submit' id='calcResult' name='calcResult' value='calc' /></div>
</form>
</body>
</html>
4.まとめ
まだなにもできるようになっていませんが、カスタムコントロールを作成する場合は基本的にRenderメソッドをオーバーライドして、引数で渡されるHtmlTextWriterのインスタンスにWriteメソッドでテキストを出力します。HtmlTextWriter.Writeメソッドを使ってタグを出力していますが、HtmlTextWriterにはインテリセンスの支援を受けながら、ブラウザの違いを認識してタグやスタイルの出力をしてくれる便利なメソッドがたくさんあります。