6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ASP.NET MVCことはじめ

Posted at

MVCはじめてみよう!と思ったけど、無駄に苦戦したのでメモっておきます。

準備

プロジェクトの追加

まずはプロジェクトの新規作成を、今回は「MVCDemo」でいきます。

001.png

テンプレートの選択

テンプレートはEmptyを選択、MVCにチェックしてOKをクリックする。
002.png

ファイル構成

プロジェクトを追加した直後は以下のような構成になっています。
今回、関係するのはRouteConfig.cs、Controllersフォルダ、Viewsフォルダです。
(Modelフォルダは追々)、
003.png

ビューを表示する

ルーティングの修正

RouteConfig.csを開いてみると以下のような内容のはずです。

RouteConfig.cs
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home",
                                action = "Index",
                                id = UrlParameter.Optional }
            );
        }
    }

このままでもいいのですが意味もなく書き換えてみます。
controllerをHomeからFoo、actionをIndexからBarへ変更しました。

RouteConfig.cs
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Foo",
                                action = "Bar",
                                id = UrlParameter.Optional }
            );
        }
    }

コントローラーの追加

次にControllersフォルダを右クリックし、「追加」から「コントローラ」を選択すると、以下の画面が表示されるので「MVC5コントローラー ― 空」を選択し「追加」をクリックします。
なお、追加した時点でViewsフォルダにFooフォルダが追加されます。

004.png

ファイル名を聞かれるので「FooController」に変更し「追加」をクリックします。

005.png

コントローラーの編集

追加されたFooController.csは以下のようになっていると思いますのでIndexメソッドをBarメソッドに名称変更します。

FooController.cs(修正前)
    public class FooController : Controller
    {
        //
        // GET: /Foo/
        public ActionResult Index()
        {
            return View();
        }
    }
FooController.cs(修正後)
    public class FooController : Controller
    {
        //
        // GET: /Foo/
        public ActionResult Bar()
        {
            return View();
        }
    }

ビューの追加

ViewsフォルダのFooフォルダを右クリックし、「追加」から「ビュー」をクリックすると以下の画面が表示されます。
ビュー名を「Bar」に変更し、追加します。

006.png

ビューの修正

お尻に文言を追加します。

Bar.cshtml(修正前)
@{
    ViewBag.Title = "Bar";
}

<h2>Bar</h2>
Bar.cshtml(修正後)
@{
    ViewBag.Title = "Bar";
}

<h2>Bar</h2>

Hello MVC!!

実行

Hello MVCが表示されます。

007.png

URL

上記の表示は「/(ルート)」、「/Foo/Bar」いずれのURLでも表示できます。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?