ASP.NETでページからユーザーコントロールを抽出する手順

ASP.NETでページからユーザーコントロールを抽出する手順.md

まず使用しているJavaScriptを抽出します。

生で書いてあるなら

jQueryのReadyメソッドで覆ってください。htmlの最後以外で取り込まれるかもしれません。

$(function () {
 //ここに処理を書く
})

usercontrol-xxx.jsファイルを作る

Scripts配下にファイルを作って、コードをコピペする

javaScriptをファイル呼び出しに置き換える

下に置き換えます。

<script type="text/javascript" src="/Scripts/usercontrol-xxx.js"></script>

JavaScriptの取り込みにRequire.jsを使っている場合など、環境に合わせて適宜読み替えてください。 画面を開いてみて動作確認

ユーザコントロールの作成

ユーザコントロールファイルを追加します。

UserControlディレクトリ配下に追加します。 名前はXXXControlクラスにします。

ユーザーコントロールにしたい部分をコピペします

• ユーザコントロールを使っている場合はRegisterディレクティブもコピペします。
• XmlDataSourceを使っている場合はそれもコピペします。

プロパティを作ります

ロード時にセットすることがあるのでゲッターとセッターを両方作ります。

public String HogeText
{
    get { return HogeTextBox.Text;}
    set { HogeTextBox.Text = value; }
}

外からラベルを書き換えれるようにする

asp:Labelを配置

1. 外部から値を書き換えたいラベルはasp:Labelに置き換えます。
2. 名前はHogeTextLabel

プロパティを作ります

public string HogeText { private get; set; }

値はPage_Loadで設定するのでwriteonlyな自動プロパティで十分です。

初期化処理を追加

Page_Loadにラベルの初期化を追加します。

protected void Page_Load(object sender, EventArgs e)
{
    HogeTextLabel.Text = HogeText;
}

ユーザーコントロールへの置き換え

ページディレクティブを追加

<%@ Register TagPrefix="myApp" TagName="Hoge" Src="~/UserControl/Hoge.ascx" %>

ユーザーコントロールを追加

<jdipItem:Hoge runat="server" ID="Hoge1" HogeLabel="ほげ1:" />

プロパティの置き換えが必要ならやる

動作確認

上手くいったら残りも全部置き換える