SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ASP.NET MVCフレームワーク 正式版 入門

ASP.NET MVCで簡単なアプリケーションを構築しよう

ASP.NET MVCフレームワーク 正式版 入門(2)


  • X ポスト
  • このエントリーをはてなブックマークに追加

 Visual Studio 2010から標準搭載され、ASP.NETユーザーの選択肢であると同時に、Azureプラットフォームや動的言語ユーザーに対するアプローチも行えるASP.NET MVC。本稿では、前回学習したASP.NET MVCの基本機能を利用して、実際にASP.NET MVCアプリケーションを構築します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 前回はASP.NET MVCの基本として、「URLルーティング」や「MVCの明確な分離」、「認証機能」などを紹介しました。今回は残りの基本部分を解説しつつ、スキャフォールディング機能を利用してデータの一覧、詳細、編集、作成ができるアプリケーションを作成してみます。

必要な環境

 次の環境が必要です。

  • Visual Studio 2008
  • Visual Studio 2008 SP1
  • ASP.NET MVC 1 RTW版(MVC 2以降では正しく動作しません。)

 Visual Studio 2008(以下、VS2008)のインストールは、『Visual Studio 2008入門 第1回』を参考に行ってください。

 VS2008 SP1のインストールは『簡単なデータ編集はお任せ! ASP.NET Dynamic Dataアプリケーション』を参考に行ってください。

 ASP.NET MVC RTW(Release To Web)は、マイクロソフトダウンロードセンターからダウンロードできます。インストールはウィザードに従って進めるだけです。

今回触れる部分

 今回触れるのは、以下の部分です。ASP.NET MVCの基本的な知識については、第1回の内容も併せて参照してください。

  • ViewからControllerへのデータ渡し
  • スキャフォールディング機能を利用したサンプルアプリケーション作成
  • ASP.NET MVCのリクエストフロー

ViewからControllerへのデータ渡し

 ASP.NET MVCではポストバックを利用しないので、ControllerからViewへの値渡しはViewDataもしくはModelのデータを直接扱うことを前回解説しました。それでは逆にView側からController側に値を渡すにはどうすればいいのでしょうか? こちらも場合によって、いくつかパターンがあるのでそれぞれ解説します。

値を入力しポストされた時のデータ渡し(Modelを使用していない時)

 例えば、テキストボックスに値を入力してもらい、それをButton(Submit)クリック時にController側へ値をポストしたいケースは多いかと思いますが、ASP.NET MVCではHtml.BeginFormメソッド、Html.Textメソッドを利用すると簡単に実装できます(図1~2)。

図1 サンプルの実行結果
図1 サンプルの実行結果
図2 サンプルの実行結果
図2 サンプルの実行結果

 実装の流れは以下の通りです。

  1. ViewPage内にHtml.BeginFormメソッドを記述
  2. 同一ViewPage内にHtml.TextBoxメソッドを記述
  3. Controller側で処理を記述し、ViewPageに結果を返す(同一・別ページどちらでもOK)

 詳細を見ていきます。

ViewPage内にHtml.BeginFormメソッドを記述

 BeginFormメソッドはFormタグの生成を行います。しかし、</Form>も同時には記述できないので、usingステートメントを使い、通常の構文同様、{}内にポストするHtml.TextBoxメソッドを記述するか、明示的にHTML.EndFormメソッドを呼び出してFormタグを閉じる必要があります。どちらも記述が違うだけで中身は同じなので利用しやすい方を利用してください。

Publisher.aspx の一部
<%--usingステートメント使用例--%>
<% using (Html.BeginForm())
   {%>
        <%= Html.TextBox("name") %>

        <input type="submit" value="Hello" />    
        <h2><%= Html.Encode(ViewData["name"])%></h2>
<% } %>

<%--EndFormメソッド使用例--%>
<% Html.BeginForm();%>
        <%= Html.TextBox("name") %>
        <input type="submit" value="Hello" />    
        <h2><%= Html.Encode(ViewData["name"])%></h2>

<%  Html.EndForm();%>

 なお、Html.BeginFormメソッドは、以下のように自動的に出力タグを生成します。

<form action="/Pubs/Details/BU1032" method="post">

 タグをご覧いただくと分かるかもしれませんが、展開中のactionをそのまま反映してくれるので、ポストの動作部分の仕組みはこれでOKです。

同一ViewPage内にHtml.TextBoxメソッドを記述

 続いて、肝心のポストデータですが、Html.TextBoxメソッドを利用し、id/name名を一括登録します。

Publisher.aspx の一部
<%= Html.TextBox("name") %>

 実際の出力は以下のようになります。もちろん直接以下のタグを記述しても問題ありません。

<input id="name" name="name" type="text" value="" />

Controller側で処理を記述しViewPageに結果を返す(同一・別ページどちらでもOK)

 最後に、Controller側で値を受け取る処理を記述します。

PubsController.cs の一部
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Hello(string name)
{
    // ViewDataにキーと値を格納
    ViewData["name"] = "Hello, " + name;

    // Publisher.aspxページを呼び出す
    return View("Publisher");
}

 AcceptVerbs属性はHTTPリクエストに応じて処理を分けたい際に活用できる属性クラスです。上のメソッドはHelloメソッドにPostによるアクセスがあった時のみ呼び出されます。パラメタを、View側で設定したHtml.TextBoxクラスのid/name名と同一に設定することで、値の受け渡しができます。属性クラスについては次回詳しく解説する予定です。

 実際に構築して動作した画面は図1~2の通りです。

次のページ
値を入力されポストされた時のデータ渡し(Modelを使用している時)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET MVCフレームワーク 正式版 入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4046 2010/08/29 06:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング