手順 1：MVC Classic Web アプリケーションの作成

まず、ASP.NET MVC 4 Wijmo アプリケーションを作成します。 Microsoft が提供するデフォルトプロジェクトテンプレートに基づく組み込みビューによって自動的にスタイルが設定されます。以下の手順を実行します。

Microsoft Visual Studio の［ファイル］メニューから、[新しいプロジェクト］を選択します。［新しいプロジェクト］ダイアログボックスが開きます。
テンプレートの［Visual Basic］または［Visual C#］より［Web］を選択します。
右ペインから［ASP.NET MVC 4 Wijmo アプリケーション］を選択します。
［名前］、［場所］、［ソリューション名］フィールドを設定して、〈OK〉をクリックします。
新しい ASP.NET MVC Wijmo 4 アプリケーションが作成されます。Models、Views、および Controllers フォルダが含まれていることがわかります。これらのフォルダは Wijmo for MVC のチュートリアルで使用します。

ソリューションエクスプローラで、［Views］→［Shared］ノードを展開し、_Layout.cshtml を開きます。メニュー、ボタン、チェックボックス、ラジオボタン、および簡単な入力ボックスを Wijmo ウィジェットに変える、いくつかの JavaScript がすでにページに追加されていることに注意してください。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); $(".button").button(); $(":input[type='submit']").button(); $(":input[type='checkbox']").wijcheckbox(); $(":input[type='radio']").wijradio(); $(":input[type='text'],:input[type='password'], textarea").not(":wijmo-wijinputnumber"). not(":wijmo-wijinputmask").not(":wijmo-wijinputdate"). wijtextbox(); $("select").not(":wijmo-wijcombobox"). wijdropdown();}); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
        $(document).ready(function () {
   $("#menu").wijmenu();
   $(".button").button();
  $(":input[type='submit']").button();
  $(":input[type='checkbox']").wijcheckbox();
  $(":input[type='radio']").wijradio();
  $(":input[type='text'],:input[type='password'],
   textarea").not(":wijmo-wijinputnumber").
   not(":wijmo-wijinputmask").not(":wijmo-wijinputdate").
   wijtextbox(); $("select").not(":wijmo-wijcombobox").
       wijdropdown();});
    </script>

<ul id="menu"> 要素を探し、マークアップでの現在の <li> リスト項目を置き換えてページをセットアップします:

ソースビュー	コードのコピー
<li>@Html.ActionLink("ホーム", "Index", "Home") </li> <li>@Html.ActionLink("リスト", "Index", "TahDoList") <ul> <li>@Html.ActionLink("リストの追加", "Create", "TahDoList") </li> </ul> </li> <li>@Html.ActionLink("項目", "Index", "TahDoItem") <ul> <li>@Html.ActionLink("項目の追加", "Create", "TahDoItem") </li> </ul> </li> <li>@Html.ActionLink("バージョン情報", "About", "Home") </li>

ソースビュー

コードのコピー

<li>@Html.ActionLink("ホーム", "Index", "Home")

</li>
<li>@Html.ActionLink("リスト", "Index", "TahDoList")
<ul>
<li>@Html.ActionLink("リストの追加", "Create", "TahDoList")

</li>
  </ul>
</li>
<li>@Html.ActionLink("項目", "Index", "TahDoItem")
<ul>
<li>@Html.ActionLink("項目の追加", "Create", "TahDoItem")

</li>
</ul>
</li>
<li>@Html.ActionLink("バージョン情報", "About", "Home")

</li>

このマークアップは、後で追加するコントローラーにリンクする［リスト］および［項目］メニュー項目を追加します。次の手順では、プロジェクトにモデルを追加します。