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?