UI とナビゲーション
作成者 : Erik Reitan
Wingtip Toys サンプル プロジェクトのダウンロード (C#) または 電子書籍のダウンロード (PDF)
このチュートリアル シリーズでは、ASP.NET 4.5 と Microsoft Visual Studio Express 2013 for Web を使用して ASP.NET Web Forms アプリケーションを構築する基本について説明します。 C# ソース コードを含むVisual Studio 2013 プロジェクトは、このチュートリアル シリーズに付属しています。
このチュートリアルでは、Wingtip Toys ストア フロント アプリケーションの機能をサポートするように、既定の Web アプリケーションの UI を変更します。 また、シンプルでデータバインドされたナビゲーションを追加します。 このチュートリアルは、前のチュートリアル 「データ アクセス層の作成」に基づいており、Wingtip Toys チュートリアル シリーズの一部です。
ここでは、次の内容について学習します。
- Wingtip Toys ストア フロント アプリケーションの機能をサポートするように UI を変更する方法。
- ページ ナビゲーションを含むように HTML5 要素を構成する方法。
- 特定の製品データに移動するデータ ドリブン コントロールを作成する方法。
- Entity Framework Code First を使用して作成されたデータベースのデータを表示する方法。
ASP.NET Web Forms Web アプリケーションの動的コンテンツを作成できます。 各 ASP.NET Web ページは、静的 HTML Web ページ (サーバーベースの処理を含まないページ) と同様の方法で作成されますが、ASP.NET Web ページには、ページの実行時に HTML を生成 ASP.NET 認識して処理する追加の要素が含まれています。
静的 HTML ページ (.htm または .html ファイル) を使用すると、サーバーはファイルを読み取り、そのままブラウザーに送信することで要求を満たします Web 。 これに対し、他のユーザーが ASP.NET Web ページ (.aspx ファイル) を要求すると、ページは Web サーバー上でプログラムとして実行されます。 ページの実行中に、Web サイトで必要なタスク (値の計算、データベース情報の読み取りまたは書き込み、その他のプログラムの呼び出しなど) を実行できます。 その出力として、ページはマークアップ (HTML の要素など) を動的に生成し、この動的出力をブラウザーに送信します。
UI の変更
Default.aspx ページを変更して、このチュートリアル シリーズを続けます。 アプリケーションの作成に使用される既定のテンプレートによって既に確立されている UI を変更します。 Web Forms アプリケーションを作成する場合は、通常、変更の種類を指定します。 これを行うには、タイトルを変更し、一部のコンテンツを置き換え、不要な既定のコンテンツを削除します。
Default.aspx ページを開くか、切り替えます。
ページが デザイン ビューに表示される場合は、[ ソース ] ビューに切り替えます。
ディレクティブのページの上部で
@Page、次の黄色で強調表示されているように、 属性を "Welcome" に変更Titleします。<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>また、 Default.aspx ページで、タグに含まれるすべての既定のコンテンツを
<asp:Content>置き換えて、マークアップが次のように表示されるようにします。<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <h1><%: Title %>.</h1> <h2>Wingtip Toys can help you find the perfect gift.</h2> <p class="lead">We're all about transportation toys. You can order any of our toys today. Each toy listing has detailed information to help you choose the right toy.</p> </asp:Content>[ファイル] メニューの [Save Default.aspx]\(既定値.aspx の保存\) を選択して、Default.aspx ページを保存します。
結果の Default.aspx ページは次のように表示されます。
<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h1><%: Title %>.</h1>
<h2>Wingtip Toys can help you find the perfect gift.</h2>
<p class="lead">We're all about transportation toys. You can order
any of our toys today. Each toy listing has detailed
information to help you choose the right toy.</p>
</asp:Content>
この例では、 ディレクティブの 属性をTitle@Page設定しています。 HTML がブラウザーに表示されると、サーバー コード <%: Page.Title %> は 属性に含まれるコンテンツに Title 解決されます。
ページ例には、ASP.NET Web ページを構成する基本的な要素が含まれています。 ページには、HTML ページに含まれる可能性がある静的テキストと、ASP.NET に固有の要素が含まれます。 Default.aspx ページに含まれるコンテンツは、マスター ページのコンテンツと統合されます。これについては、このチュートリアルの後半で説明します。
@Page ディレクティブ
通常、ASP.NET Web Formsには、ページのプロパティと構成情報を指定できるディレクティブが含まれています。 ディレクティブは、ページを処理する手順として ASP.NET によって使用されますが、ブラウザーに送信されるマークアップの一部としてレンダリングされません。
最も一般的に使用されるディレクティブは @Page ディレクティブです。これにより、次のようなページの多くの構成オプションを指定できます。
- ページ内のコードのサーバー プログラミング言語 (C# など)。
- ページがサーバー コードを含むページで、単一ファイル ページと呼ばれるページであるか、分離コード ページと呼ばれる別のクラス ファイル内のコードを含むページであるか。
- ページにマスター ページが関連付けられているかどうか。したがって、コンテンツ ページとして扱う必要があります。
- デバッグとトレースのオプション。
ページに ディレクティブを @Page 含めなかった場合、または ディレクティブに特定の設定が含まれていない場合、設定は Web.config 構成ファイルまたは Machine.config 構成ファイルから継承されます。 Machine.config ファイルは、マシン上で実行されているすべてのアプリケーションに追加の構成設定を提供します。
Note
Machine.configには、使用可能なすべての構成設定に関する詳細も表示されます。
Web サーバー コントロール
ほとんどの ASP.NET Web Forms アプリケーションでは、ボタン、テキスト ボックス、リストなど、ユーザーがページを操作できるようにするコントロールを追加します。 これらの Web サーバー コントロールは、HTML ボタンと入力要素に似ています。 ただし、サーバー上で処理されるため、サーバー コードを使用してプロパティを設定できます。 これらのコントロールでは、サーバー コードで処理できるイベントも発生します。
サーバー コントロールは、ページの実行時 ASP.NET 認識する特別な構文を使用します。 ASP.NET サーバー コントロールのタグ名はプレフィックスで asp: 始まります。 これにより、ASP.NET はこれらのサーバー コントロールを認識して処理できます。 コントロールが.NET Frameworkの一部でない場合は、プレフィックスが異なる場合があります。 プレフィックスにasp:加えて、ASP.NET サーバー コントロールには、 属性とID、 を使用してサーバー コード内のコントロールを参照できる も含まれますrunat="server"。
ページが実行されると、ASP.NET はサーバー コントロールを識別し、それらのコントロールに関連付けられているコードを実行します。 多くのコントロールは、ブラウザーに表示されるときに、HTML またはその他のマークアップをページにレンダリングします。
サーバー コード
ほとんどの ASP.NET Web Forms アプリケーションには、ページの処理時にサーバー上で実行されるコードが含まれます。 前述のように、サーバー コードを使用して、ListView コントロールへのデータの追加など、さまざまな処理を実行できます。 ASP.NET では、C#、Visual Basic、J#など、サーバー上で実行する多くの言語がサポートされています。
ASP.NET では、Web ページのサーバー コードを記述するための 2 つのモデルがサポートされています。 単一ファイル モデルでは、ページのコードはスクリプト要素内にあり、開始タグには 属性が runat="server" 含まれています。 または、分離コード モデルと呼ばれる別のクラス ファイルでページのコードを作成することもできます。 この場合、通常、ASP.NET Web Forms ページにはサーバー コードが含まれています。 代わりに、 ディレクティブには、@Page.aspx ページとそれに関連付けられている分離コード ファイルをリンクする情報が含まれています。
ディレクティブに@Page含まれる属性はCodeBehind個別のクラス ファイルの名前を指定しInherits、 属性はページに対応する分離コード ファイル内のクラスの名前を指定します。
マスター ページの更新
ASP.NET Web Formsでは、マスター ページを使用すると、アプリケーション内のページに対して一貫したレイアウトを作成できます。 1 つのマスター ページは、アプリケーション内のすべてのページ (またはページのグループ) に必要な外観と標準動作を定義します。 その後、上記で説明したように、表示するコンテンツを含む個々のコンテンツ ページを作成できます。 ユーザーがコンテンツ ページを要求すると、ASP.NET はマスター ページとマージして、マスター ページのレイアウトとコンテンツ ページのコンテンツを組み合わせた出力を生成します。
新しいサイトでは、すべてのページに 1 つのロゴを表示する必要があります。 このロゴを追加するには、マスター ページで HTML を変更します。
ソリューション エクスプローラーで Site.Master ページを見つけて開きます。
ページが デザイン ビューにある場合は、 ソース ビューに切り替えます。
黄色で強調表示されたマークアップ を変更または追加 して、マスター ページを更新します。
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%: Page.Title %> - Wingtip Toys</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> </asp:PlaceHolder> <webopt:bundlereference runat="server" path="~/Content/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body> <form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%> <%--Framework Scripts--%> <asp:ScriptReference Name="MsAjaxBundle" /> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="bootstrap" /> <asp:ScriptReference Name="respond" /> <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> <asp:ScriptReference Name="WebFormsBundle" /> <%--Site Scripts--%> </Scripts> </asp:ScriptManager> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a runat="server" href="~/">Home</a></li> <li><a runat="server" href="~/About">About</a></li> <li><a runat="server" href="~/Contact">Contact</a></li> </ul> <asp:LoginView runat="server" ViewStateMode="Disabled"> <AnonymousTemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/Account/Register">Register</a></li> <li><a runat="server" href="~/Account/Login">Log in</a></li> </ul> </AnonymousTemplate> <LoggedInTemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li> <li> <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" /> </li> </ul> </LoggedInTemplate> </asp:LoginView> </div> </div> </div> <div id="TitleContent" style="text-align: center"> <a runat="server" href="~/"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" /> </a> <br /> </div> <div class="container body-content"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> <hr /> <footer> <p>© <%: DateTime.Now.Year %> - Wingtip Toys</p> </footer> </div> </form> </body> </html>
この HTML には、後で追加する Web アプリケーションの Images フォルダーから logo.jpg という名前の 画像 が表示されます。 マスター ページを使用するページがブラウザーに表示されると、ロゴが表示されます。 ユーザーがロゴをクリックすると、ユーザーは Default.aspx ページに戻ります。 HTML アンカー タグ <a> は、イメージ サーバー コントロールをラップし、イメージをリンクの一部として含めできるようにします。 アンカー タグの属性は href 、Web サイトのルート "~/" をリンクの場所として指定します。 既定では、ユーザーが Web サイトのルートに移動すると、 Default.aspx ページが表示されます。 Image<asp:Image> サーバー コントロールには、 などのBorderStyle追加プロパティが含まれています。このプロパティは、ブラウザーに表示されるときに HTML としてレンダリングされます。
マスター ページ
マスター ページは、拡張子が .master ( Site.Master など) の ASP.NET ファイルで、静的テキスト、HTML 要素、サーバー コントロールを含めることができる定義済みのレイアウトが含まれます。 マスター ページは、通常の .aspx ページに使用される ディレクティブを@Page置き換える特殊な@Masterディレクティブによって識別されます。
ディレクティブに@Master加えて、マスター ページには、ページの最上位の HTML 要素 (、headform、、 などhtml) もすべて含まれます。 たとえば、上記で追加したマスター ページでは、レイアウトに HTML table 、会社のロゴの要素、 img 静的テキスト、およびサーバー コントロールを使用して、サイトの共通メンバーシップを処理します。 マスター ページの一部として、任意の HTML と任意の ASP.NET 要素を使用できます。
マスター ページには、すべてのページに表示される静的テキストとコントロールに加えて、1 つ以上の ContentPlaceHolder コントロールも含まれます。 これらのプレースホルダー コントロールは、置き換え可能なコンテンツが表示される領域を定義します。 さらに、置き換え可能なコンテンツは、コンテンツ サーバー コントロールを使用して、 Default.aspx などの コンテンツ ページで定義されます。
イメージ ファイルの追加
上記で参照されているすべての製品イメージと共に参照されるロゴ イメージは、プロジェクトがブラウザーに表示されたときに表示されるように Web アプリケーションに追加する必要があります。
MSDN サンプル サイトからダウンロードする:
ASP.NET 4.5 Web Forms と Visual Studio 2013 を使用したはじめに - Wingtip Toys (C#)
ダウンロードには、サンプル アプリケーションの作成に使用される WingtipToys-Assets フォルダー内のリソースが含まれています。
まだ行っていない場合は、MSDN サンプル サイトから上記のリンクを使用して、圧縮されたサンプル ファイルをダウンロードします。
ダウンロードしたら、.zip ファイルを開き、その内容をコンピューター上のローカル フォルダーにコピーします。
WingtipToys-Assets フォルダーを見つけて開きます。
ドラッグ アンド ドロップして、ローカル フォルダーから Visual Studio のソリューション エクスプローラーの Web アプリケーション プロジェクトのルートに Catalog フォルダーをコピーします。
次に、ソリューション エクスプローラーで WingtipToys プロジェクトを右クリックし、[追加] ->[新しいフォルダー] を選択して、Images という名前の新しいフォルダーを作成します。
logo.jpgファイルを エクスプローラー の WingtipToys-Assets フォルダーから、Visual Studio ソリューション エクスプローラーの Web アプリケーション プロジェクトのImages フォルダーにコピーします。
新しいファイルが表示されない場合は、ソリューション エクスプローラーの上部にある [すべてのファイルを表示] オプションをクリックしてファイルの一覧を更新します。
ソリューション エクスプローラー更新されたプロジェクト ファイルが表示されます。
ページの追加
Web アプリケーションへのナビゲーションを追加する前に、最初に移動する 2 つの新しいページを追加します。 このチュートリアル シリーズの後半では、これらの新しいページに製品と製品の詳細を表示します。
ソリューション エクスプローラーで WingtipToys を右クリックし、[追加] をクリックし、[新しい項目] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。左側の [Visual C# ->Web テンプレート] グループを選択します。 次に、中央のリストから [ Web フォームとマスター ページ ] を選択し、 ProductList.aspx という名前を付けます。
![UI とナビゲーション - [新しい項目の追加] ダイアログ](ui_and_navigation/_static/image3.png)
[ Site.Master] を選択して、新しく作成した .aspx ページにマスター ページをアタッチします。
同じ手順に従って 、ProductDetails.aspx という名前のページを追加します。
ブートストラップの更新
Visual Studio 2013 プロジェクト テンプレートでは、Twitter によって作成されたブートストラップ、レイアウト、テーマフレームワークが使用されます。 ブートストラップは CSS3 を使用して応答性の高いデザインを提供します。つまり、レイアウトはさまざまなブラウザー ウィンドウ サイズに動的に適応できます。 また、Bootstrap のテーマ設定機能を使用して、アプリケーションの外観の変更に簡単に影響を及ぼすこともできます。 既定では、Visual Studio 2013 の ASP.NET Web アプリケーション テンプレートには、NuGet パッケージとして Bootstrap が含まれています。
このチュートリアルでは、ブートストラップ CSS ファイルを置き換えることで、Wingtip Toys アプリケーションの外観を変更します。
ソリューション エクスプローラーで、Content フォルダーを開きます。
bootstrap.css ファイルを右クリックし、bootstrap-original.css に名前を変更します。
bootstrap.min.css の名前を bootstrap-original.min.css に変更します。
ソリューション エクスプローラーで、[コンテンツ] フォルダーを右クリックし、[エクスプローラーでフォルダーを開く] を選択します。
エクスプローラーが表示されます。 ダウンロードしたブートストラップ CSS ファイルをこの場所に保存します。ブラウザーで https://bootswatch.com/3/ に移動します。
Cerulean テーマが表示されるまでブラウザー ウィンドウをスクロールします。
bootstrap.css ファイルと bootstrap.min.css ファイルの両方を Content フォルダーにダウンロードします。 前に開いたエクスプローラー ウィンドウに表示されるコンテンツ フォルダーへのパスを使用します。
ソリューション エクスプローラーの上部にある Visual Studio で、[すべてのファイルを表示] オプションを選択して、[コンテンツ] フォルダーに新しいファイルを表示します。
Content フォルダーに 2 つの新しい CSS ファイルが表示されますが、各ファイル名の横にあるアイコンが淡色表示されていることがわかります。これは、ファイルがまだプロジェクトに追加されていないことを意味します。
bootstrap.css ファイルと bootstrap.min.css ファイルを右クリックし、[プロジェクトに含める] を選択します。
このチュートリアルの後半で Wingtip Toys アプリケーションを実行すると、新しい UI が表示されます。
Note
ASP.NET Web アプリケーション テンプレートは、プロジェクトのルートにある Bundle.config ファイルを使用して、ブートストラップ CSS ファイルのパスを格納します。
既定のナビゲーションの変更
アプリケーション内のすべてのページの既定のナビゲーションは、 Site.Master ページにある順序付けられていないナビゲーション リスト要素を変更することで変更できます。
ソリューション エクスプローラーで、Site.Master ページを見つけて開きます。
黄色で強調表示されたナビゲーション リンクを、次に示す順序なしリストに追加します。
<ul class="nav navbar-nav"> <li><a runat="server" href="~/">Home</a></li> <li><a runat="server" href="~/About">About</a></li> <li><a runat="server" href="~/Contact">Contact</a></li> <li><a runat="server" href="~/ProductList">Products</a></li> </ul>
上記の HTML でわかるように、リンクhref属性を持つアンカー タグ<a>を含む各行項目<li>を変更しました。 各 href は、Web アプリケーション内のページを指します。 ブラウザーで、ユーザーがこれらのリンク ( Products など) のいずれかをクリックすると、 に含まれる href ページ ( ProductList.aspx など) に移動します。 このチュートリアルの最後にアプリケーションを実行します。
Note
チルダ (~) 文字は、パスがプロジェクトの href ルートから開始されることを指定するために使用されます。
ナビゲーション データを表示するためのデータ コントロールの追加
次に、データベースのすべてのカテゴリを表示するコントロールを追加します。 各カテゴリは、 ProductList.aspx ページへのリンクとして機能します。 ユーザーがブラウザーのカテゴリ リンクをクリックすると、製品ページに移動し、選択したカテゴリに関連付けられている製品のみが表示されます。
ListView コントロールを使用して、データベースに含まれるすべてのカテゴリを表示します。 ListView コントロールをマスター ページに追加するには:
[Site.Master] ページで、前に追加した を含む
id="TitleContent"要素の<div>後に、次の強調表示された<div>要素を追加します。<div id="TitleContent" style="text-align: center"> <a runat="server" href="~/"> <asp:Image ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" /> </a> <br /> </div> <div id="CategoryMenu" style="text-align: center"> <asp:ListView ID="categoryList" ItemType="WingtipToys.Models.Category" runat="server" SelectMethod="GetCategories" > <ItemTemplate> <b style="font-size: large; font-style: normal"> <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>"> <%#: Item.CategoryName %> </a> </b> </ItemTemplate> <ItemSeparatorTemplate> | </ItemSeparatorTemplate> </asp:ListView> </div>
このコードでは、データベースのすべてのカテゴリが表示されます。 ListView コントロールは、各カテゴリ名をリンク テキストとして表示し、カテゴリの を含むクエリ文字列値を含む ProductList.aspx ページへのリンクを含IDみます。 ListView コントロールで プロパティを設定ItemTypeすると、ノード内でデータ バインディング式ItemをItemTemplate使用でき、コントロールが厳密に型指定されます。 IntelliSense を使用してオブジェクトの Item 詳細を選択できます 。たとえば、 を CategoryName指定します。 このコードは、データ バインディング式をマークするコンテナー <%#: %> 内に含まれています。 (:)をプレフィックスの末尾に <%# 移動すると、データ バインディング式の結果は HTML エンコードされます。 結果が HTML エンコードされると、クロスサイト スクリプト インジェクション (XSS) 攻撃や HTML インジェクション攻撃からアプリケーションをより適切に保護できます。
Note
ヒント
開発中に入力してコードを追加すると、厳密に型指定されたデータ コントロールに IntelliSense に基づいて使用可能なメンバーが表示されるため、オブジェクトの有効なメンバーが見つかったことを確認できます。 IntelliSense では、プロパティ、メソッド、オブジェクトなどのコードを入力するときに、コンテキストに適したコードの選択肢が提供されます。
次の手順では、 メソッドを GetCategories 実装してデータを取得します。
データ コントロールをデータベースにリンクする
データ コントロールにデータを表示する前に、データ コントロールをデータベースにリンクする必要があります。 リンクを作成するには、 Site.Master.cs ファイルの背後にあるコードを変更します。
ソリューション エクスプローラーで、[Site.Master] ページを右クリックし、[コードの表示] をクリックします。 Site.Master.cs ファイルがエディターで開きます。
Site.Master.cs ファイルの先頭付近に、含まれるすべての名前空間が次のように表示されるように、2 つの名前空間を追加します。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Linq; using WingtipToys.Models;イベント ハンドラーの後に、強調表示された
GetCategoriesメソッドをPage_Load次のように追加します。protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Category> GetCategories() { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Category> query = _db.Categories; return query; }
上記のコードは、マスター ページを使用するページがブラウザーに読み込まれるときに実行されます。 ListViewこのチュートリアルで前に追加したコントロール ("categoryList") は、モデル バインドを使用してデータを選択します。 コントロールのマークアップで、 ListView コントロールの プロパティを上記の SelectMethod メソッドに GetCategories 設定します。 コントロールは ListView 、ページライフ サイクルの適切なタイミングで メソッドを呼び出 GetCategories し、返されたデータを自動的にバインドします。 データのバインドの詳細については、次のチュートリアルを参照してください。
アプリケーションの実行とデータベースの作成
このチュートリアル シリーズの前半では、初期化子クラス ("ProductDatabaseInitializer" という名前) を作成し、 global.asax.cs ファイルでこのクラスを指定しました。 Entity Framework は、global.asax.cs ファイルに含まれるメソッドが初期化子クラスを呼び出すのApplication_Startで、アプリケーションの初回実行時にデータベースを生成します。 初期化子クラスでは、このチュートリアル シリーズで前に追加したモデル クラス (Category と Product) を使用してデータベースを作成します。
- ソリューション エクスプローラーで、Default.aspx ページを右クリックし、[スタート ページとして設定] を選択します。
- Visual Studio で F5 キーを押します。
この最初の実行中にすべてを設定するには、少し時間がかかります。
アプリケーションを実行すると、アプリケーションがコンパイルされ、 wingtiptoys.mdf という名前のデータベースが App_Data フォルダーに作成されます。 ブラウザーにカテゴリ ナビゲーション メニューが表示されます。 このメニューは、データベースからカテゴリを取得することによって生成されました。 次のチュートリアルでは、ナビゲーションを実装します。 - ブラウザーを閉じて、実行中のアプリケーションを停止します。
データベースの確認
Web.config ファイルを開き、接続文字列セクションを確認します。 接続文字列の値が AttachDbFilename Web アプリケーション プロジェクトの を指している DataDirectory ことがわかります。 値 |DataDirectory| は、プロジェクト内の App_Data フォルダーを表す予約済み値です。 このフォルダーは、エンティティ クラスから作成されたデータベースが配置されている場所です。
<connectionStrings>
<add name="DefaultConnection"
connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
providerName="System.Data.SqlClient" />
<add name="WingtipToys"
connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
providerName="System.Data.SqlClient " />
</connectionStrings>
Note
App_Data フォルダーが表示されない場合、またはフォルダーが空の場合は、[更新] アイコンを選択し、ソリューション エクスプローラー ウィンドウの上部にある [すべてのファイルを表示] アイコンを選択します。 使用可能なすべてのアイコンを表示するには、ソリューション エクスプローラーウィンドウの幅を広げる必要がある場合があります。
これで、サーバー エクスプローラー ウィンドウを使用して、wingtiptoys.mdf データベース ファイルに含まれるデータを調べることができます。
App_Data フォルダーを展開します。 App_Data フォルダーが表示されない場合は、上記のメモを参照してください。
wingtiptoys.mdf データベース ファイルが表示されない場合は、[更新] アイコンを選択し、ソリューション エクスプローラー ウィンドウの上部にある [すべてのファイルを表示] アイコンを選択します。
wingtiptoys.mdf データベース ファイルを右クリックし、[開く] を選択します。
サーバー エクスプローラーが表示されます。
[テーブル] フォルダーを展開します。
Productsテーブルを右クリックし、[テーブル データの表示] を選択します。
Products テーブルが表示されます。
このビューでは、 Products テーブルのデータを手動で表示および変更できます。
[製品] テーブル ウィンドウを閉じます。
サーバー エクスプローラーで、Products テーブルをもう一度右クリックし、[テーブル定義を開く] を選択します。
Products テーブルのデータデザインが表示されます。
[T-SQL] タブには、テーブルの作成に使用された SQL DDL ステートメントが表示されます。 [ デザイン ] タブの UI を使用してスキーマを変更することもできます。
サーバー エクスプローラーで、WingtipToys データベースを右クリックし、 [接続を閉じる] を選択します。
Visual Studio からデータベースをデタッチすることで、このチュートリアル シリーズの後半でデータベース スキーマを変更できるようになります。ソリューション エクスプローラーに戻り、[サーバー エクスプローラー] ウィンドウの下部にある [ソリューション エクスプローラー] タブを選択します。
まとめ
シリーズのこのチュートリアルでは、いくつかの基本的な UI、グラフィックス、ページ、ナビゲーションを追加しました。 さらに、前のチュートリアルで追加したデータ クラスからデータベースを作成した Web アプリケーションを実行しました。 また、データベースを直接表示して、データベースの Products テーブルの内容を表示しました。 次のチュートリアルでは、データベースのデータ項目と詳細を表示します。
その他のリソース
プログラミング ASP.NET Web ページの概要
ASP.NET Web サーバー コントロールの概要
CSS チュートリアル
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示