手順 1：ビューの設定

この手順では、マークアップを追加し、コンテンツをコンボボックスに追加します。以下を実行します。

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

次のマークアップをページの <body> タグ内に追加します。このマークアップはボタンのコンテンツをページに追加します。

ソースビュー	コードのコピー
<div> <label> HTML 入力要素</label> <input id="tagsinput" /> </div> <div> <label> HTML 選択要素</label> <select id="tags"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> <option value="coldfusion">coldfusion</option> <option value="javascript">javascript</option> <option value="asp">asp</option> <option value="ruby">ruby</option> <option value="python">python</option> <option value="c">c</option> <option value="scala">scala</option> <option value="groovy">groovy</option> <option value="haskell">haskell</option> <option value="perl">perl</option> </select> </div> <!-- デモマークアップの終了 --> <div class="demo-options"> <!-- オプションマークアップの開始 --> <button value="" id="show"> 元の選択要素の表示</button> <!-- オプションマークアップの終了 --> </div> </div>

ソースビュー

コードのコピー

<div>
        <label>
            HTML 入力要素</label>
        <input id="tagsinput" />
      </div>
    <div>
        <label>
            HTML 選択要素</label>
        <select id="tags">
            <option value="c++">c++</option>
            <option value="java">java</option>
            <option value="php">php</option>
            <option value="coldfusion">coldfusion</option>
            <option value="javascript">javascript</option>
            <option value="asp">asp</option>
            <option value="ruby">ruby</option>
            <option value="python">python</option>
            <option value="c">c</option>
            <option value="scala">scala</option>
            <option value="groovy">groovy</option>
            <option value="haskell">haskell</option>
            <option value="perl">perl</option>
        </select>
    </div>
    <!-- デモマークアップの終了 -->
    <div class="demo-options">
        <!-- オプションマークアップの開始 -->
        <button value="" id="show">
            元の選択要素の表示</button>
        <!-- オプションマークアップの終了 -->
    </div>
</div>