主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ASP.NET MVC 5: 入門してみる

                
 C#でウェブアプリを作るために用意されているASP.NET。そのMVCフレームワークであり、これを書いている時点での最新版のASP.NET MVC 5。これの基本的な部分を公式のチュートリアルに沿ってまとめてみる。MVC 4以前は使ったことがないのでどんな差異があるかはわからない。ただASP.NET MVCに入門するために最新のMVC 5を選んだ。
参考:http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started

 ASP.NET MVCは.NET Framework上で動く。そのためにWindowsでしか使えないと稀に勘違いされているが、MonoがあるからLinuxでもMacでも動くだろう。最新のMVC 5をMono環境で開発をするブログ記事も見つかる(参考)。ASP.NETはクロスプラットフォームであり、そういうところではJavaと同じ土俵に立っている。


・まず最初に
 開発環境を導入する。Visual Studio Express 2013 for Webをインストール。インストールが完了したら開いて「新しいプロジェクト」→「Web(Webのツリービューから2012を選ぶのではなく、WebからASP.NET Webアプリケーションを選んで、その後のテンプレート選択でMVCを選ぶ)」と進める。これでプロジェクトが作成されて下準備が完了する。

・コントローラを追加してみる
 コントローラってどんなもの? Webアプリケーションは/member/detailや/member/editなどなどいくつかのURLにアクセスできるようにして、そこへコンテンツを返すようになっている。このURLアクセスに対して、どんなコンテンツを返すか選択するような部分。
 ソリューションエクスプローラにあるControllersディレクトリを右クリックして「追加」→「コントローラ」→「MVC 5」を選ぶ。とりあえずHelloController.csを作ってみる。そして以下のメソッドを定義する。
public string Index()
{
return "Hello, absurd world.";
}

あとはデバッグを開始してブラウザで/Hello/Indexにアクセスすればメソッドの返した文字列が表示される(URLの大文字小文字は区別されない)。こんな要領でコントローラを追加して、そこにメソッドを定義していけば、それに対応したURL(/[controller]/[method])にアクセスできるようになる。
 なんでこんなことができるかってのはAPP_STARTディレクトリにあるRouteConfig.csを見ればわかる。たぶんデフォルトで下記の記述がされている。
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

urlの項目を見ると{controller}/{action}/{id}と書かれていて、idが次の行ででオプション指定されている。これは{controller}に一致する名前のコントローラ、{action}に一致する名前のメソッドをそのコントローラから探すということである。URLアクセスをどうさばくかの定義になっているので、開発者はコントローラを追加してメソッドを定義するだけで、URLアクセスで閲覧できるページが増えていく。

・ビューを追加
 ビューってなに? URLアクセスをしてきたクライアントに返されるコンテンツ。多くの場合はHTMLドキュメント。
 まずコントローラでViewメソッドの実行を返すようにしておく。
public ActionResult Index() 
{
return View();
}

そしてビューを追加する。ソリューションエクスプローラでViewsディレクトリ内、Helloディレクトリを右クリックして
「追加」→「レイアウトを使用するMVC 5ビューページ」を選択する。名前はIndexにしておく。レイアウトページの選択は_Layout.cshtmlを選ぶ。
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Movie App</title>
</head>
<body>

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

</body>
</html>


Index.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Hello";
}


<p>Hello from our View Template!</p>

HTMLの中では@xxxと書くと、変数xxxの値をそのままHTMLに書ける。xxxは変数やメソッドの実行でもいい。@{}でカッコのなかに任意の行数のコードを書くことができる。
Index.cshtmlでViewBagというオブジェクトのプロパティTitleに文字列を入れ、_Layout.cshtmlのテンプレートで使用している。このオブジェクトViewBagはテンプレートでデータの取り回しをするときに使われる。ViewBagはdynamic型なので、自分で適当な名前を決めてViewBagオブジェクトにフィールドとして値を追加できる。


・モデルを追加
 モデルとはデータ保存の形だと考えられる。たとえばWebアプリケーションとしてブログを考えると、ブログ記事それぞれはタイトル、本文、作成日時などを一つのセットで保存している。この一つのセットがどういうデータを持っているか、セットをまとめてどういう名前にしておくかということがモデルで表される。
 これは例によってソリューションエクスプローラでModelsディレクトリを右クリックしてClassを作成、定義していく。どんなWebアプリケーションを作るかも考えていないので、とりあえずx、yのint型データを保存するモデルFooにしておく。
using System.Data.Entity;


namespace WebApplication1.Models
{
public class Foo
{
public int ID { get; set; } // keyとして後々必須
public int x { get; set; }
public int y { get; set; }
}

public class FooDBContext : DbContext
{
public DbSet Foos { get; set; }
}
}



・データベースを使う
 定義したモデルに従ってデータを保存する、データベースに。VS2013をインストールしたら付いてくるデータベースを使う。Web.configファイルのconnectionStrings要素にモデルFoo保存のための接続指示を追加する。
  <connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-WebApplication1-20140607033212.mdf;Initial Catalog=aspnet-WebApplication1-20140607033212;Integrated Security=True"
providerName="System.Data.SqlClient" />
<add name="FooDBContext" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Foos.mdf;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

ここで一度アプリケーションをビルドしておく。でないと次のコントローラ追加でエラーが出る。
 データベースでモデルFooを扱うためのコントローラを追加する。例によってソリューションエクスプローラを右クリックして「追加」→「コントローラ→「Entity Frameworkを使用した、ビューがあるMVC 5コントローラ」を選択、モデルクラスにFoo、データコンテキストクラスにFooDBContextを選んで作成。これでデータベースにモデルFooのデータを保存したり編集したりできるようになった。ViewsディレクトリにFoosディレクトリが追加されており、この中にIndex.cshtmlがあるので、右クリックしてブラウザで表示を選択すれば、追加、編集、削除などでデータをいじれる。


 MVCとデータベースまでやったので入門はここまで。
 MVCを使うには名前の付け方やファイルの配置などにルールがあり、動的言語で軽量フレームワークを使って作るときとは違って知っておくことがちょっと特殊。ある程度はIDEがそれをカバーしてくれるが。一方で、一定のフレームワークのルールに従って作ることのメリットもあるので、個人的には、ややこしくて面倒だと思わずにつっついていって使えるようにしておきたいものだ。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。