手順 1：ビューの設定

この手順では、最初にビューを設定します。コンテンツをデータソースに追加します。

注意：: この手順では、MVC Classicバープロジェクトを作成済みであることを前提にしています。詳細については、「MVC Classic プロジェクトの作成」トピックを参照してください。

以下の手順を実行します。

ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div class="ui-widget"> <input style="width: 400px" id="testinput" type="textbox" class="ui-widget-content ui-corner-all" /><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" /> <div id="list" style="height: 300px; width: 400px;"></div> </div>

ソースビュー

コードのコピー

<div class="ui-widget">
    <input style="width: 400px" id="testinput" type="textbox" class="ui-widget-content ui-corner-all" /><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" />
    <div id="list" style="height: 300px; width: 400px;"></div>
      </div>

このマークアップはテキストボックス、ボタン、およびリストを追加します。ボタンがクリックされると、リモートデータソースからのデータがリストに表示されます。

この手順では、ビューを作成しました。次の手順　「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウィジェットを初期化します。