VB.Net（ASP.Net） ユーザーコントロールの作成

VB.Netでのデザイン作成

前提

VB.Netのデザイン部分の記法です。
フレームワークは、VB.Net 4.7.2を利用しています。
BootStrap 5.3.3を利用。

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

ASP.Net（VB.Net）を利用してのWebアプリの開発をしています。
デザインの開発の際、個々の画面とほかの画面が、
共有の部分を利用していて、共通化ができるかもといった際に、
利用してみてください。

こんなコントロールを想定

2.デザインのコード例

例えば、以下のコントロールを別の画面でも利用する場合、

        
        <table class="cp0">
            <tr>
                <td>
                    <asp:TextBox ID="txtMsg" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width:100px">
                    <asp:TextBox ID="txtHours" Width="20px" runat="server"></asp:TextBox>
                    :
                    <asp:TextBox ID="txtMinutes" Width="20px" runat="server"></asp:TextBox>
                    <asp:Button ID="btnOk" Text="OK!" Width="50px" CssClass="btn btn-primary btn-sm" runat="server" />
                </td>
            </tr>
        </table>
        <asp:RegularExpressionValidator ID="revtxtMinutes" runat="server"
            ControlToValidate="txtMinutes"
            ValidationExpression="^\[0-6][0-9]$"
            ErrorMessage="0-60の数値のみ入力してください。"
            ForeColor="Red"
            Display="Dynamic">
        </asp:RegularExpressionValidator>
    </form>

ユーザーコントロールを作成します。
ソリューションエクスプローラー
ソリューション右クリック
追加クリック
新しい項目クリック

Webフォームのユーザーコントロールをクリック

名称をつけて、追加をクリック

デザイン側に先ほどの画面のコードを貼り付けます。

こういった形で、共通の画面コントロールが作成できます。

では、SampleWebPage1に上記のコントロールを置いてみます。

ポイント1

<%@ Register Src="~/WebUserControl.ascx" TagName="uc" TagPrefix="UserControl1" %>

ユーザーコントロールの定義を行うこと

ポイント2

<UserControl1:uc ID="Control1" runat="server" />

ユーザーコントロールの実装を行うこと

見た目上、上と下で違いが分かりづらいですが、上がユーザコントロールです。

まとめ

ユーザコントロールを作成する方法を記載しました。
同じデザインを流用する際は、デザインをユーザコントロールとして作成。
そのユーザーコントロールをページ側で実装が可能です。