はじめに
ASP.NETの WebForm は経験があるけども、そろそろ卒業してASP.NET MVC やASP.NET Core に移ろうと思い、書籍やサイトにて情報を集めていますが、どこへ行っても応用ばかりで基本的な部分が紹介されているところというのが少ない。そして、書籍やサイトを参考にサンプルを書いてみても、基礎がわからないのでやりたいことを実現しようとしても実現できない。
そして、そのような情報を探そうとしても、グーグルの検索が難しくなっていて、なかなかヒットしない（探そうとしているキーワードを考えるのも難しい）。
ならば、自ら、１つ１つ解析しながら進むしかない！環境もあるんだし。ということで、１つ１つ確認しながら進むことにしてみました。１から無知な状態で始めると、いろいろ課題や問題点も出てくるので、それを一つ一つ片付けながらやっていこうと思います。
もくじ
- 0から始めるASP.NET Core その1:ASP.NET Core 2.1 のRazor Pages で始めるよ!
- 0から始めるASP.NET Core その2:Main関数の中身
ASP.NET Core 2.1を利用するよ
2018年10月時点最新の、.NET Core 2.1 を利用します。
なお、開発環境はとりあえずVisual Studio 2017 Community(15.8.8)で行います。
進むにつれ、バージョンはアップしていくかもしれません。
プロジェクトの作成！
0から始めるため、「ASP.NET Core Web アプリケーション」より「空」のプロジェクトで行います。なお、SSLとDockerは今回設定するとややこしいことと、目的が異なるので外しておきます。
最初は Razor Pages から
空のプロジェクトで作ると
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
だけのコードができます。実行すると、Hello World! が表示されるというのはわかったのと、context 自身は、ASP.NET のWebFormでも出てきたので、パス。Razor のページでの書きこができるよう、MVCを有効にします。
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvc();
}
これで実行すると、当然404エラーが返ってきます。
次に、ソリューションのルート階層に「Pages」フォルダーを作り、そこにメニューから「追加＞Razorページ」が選択できるので、そこから追加します。
「Razorページ名」を、とりあえず「Index」で作成、「PageModelクラスの生成」のみチェックをつけ、それ以外のチェックは外し、追加を押します。
「Pages」フォルダに以下のファイルが出来上がります
- Index.cshtml
- Index.cshtml.cs
Index.cshtmlファイルは、
@page
@model aspnet_zero.Pages.IndexModel
@{
Layout = null;
}
以下、HTML
というのができています。
Index.cshtml.cs には
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
ができています。
とりあえず、最初は cshtml.cs は無視して、cshtml で遊びます。
サーバーサイドで出力させる
Razor の書き方などはここでは説明しませんので、Microsoftのサイトや書籍などで確認して欲しいです。とりあえず、@ { ... } の中にコードが書けるということが分かったので、情報を表示させてみます。
@{
Layout = null;
string hello = "はろーわーるど";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<p>@hello</p>
</body>
</html>
「デバッグ＞デバッグの実行」より起動させると、無事に
はろーわーるど
の文字が!!やったね!!!...ってちょっとまって。
出力されたHTMLコードを見てみると、
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<p>はろーわーるど</p>
</body>
</html>
出力文字列がHTMLエンティティに変換されて出力されているのですが、これは...1
もしかして、はろーわーるどが悪いんだろうと思い、もう一つサンプルを。
@page
@model aspnet_zero.Pages.IndexModel
@{
Layout = null;
var pref = new[]
{
"北海道",
"青森",
"秋田",
"岩手",
"山形",
"宮城",
"福島",
"栃木",
"群馬",
"茨城",
"埼玉",
"東京",
"千葉",
"神奈川",
"新潟",
"富山",
"石川",
"福井",
"長野",
"山梨",
"静岡",
"岐阜",
"愛知",
"三重",
"滋賀",
"奈良",
"京都",
"和歌山",
"大阪",
"兵庫",
"鳥取",
"岡山",
"島根",
"広島",
"山口",
"香川",
"徳島",
"愛媛",
"高知",
"福岡",
"大分",
"佐賀",
"熊本",
"宮崎",
"鹿児島",
"沖縄"
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<ul>
@foreach( var s in pref)
{
<li>@s</li>
}
</ul>
</body>
</html>
結果、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<ul>
<li>北海道</li>
<li>青森</li>
<li>秋田</li>
<li>岩手</li>
<li>山形</li>
<li>宮城</li>
<li>福島</li>
<li>栃木</li>
<li>群馬</li>
<li>茨城</li>
<li>埼玉</li>
<li>東京</li>
<li>千葉</li>
<li>神奈川</li>
<li>新潟</li>
<li>富山</li>
<li>石川</li>
<li>福井</li>
<li>長野</li>
<li>山梨</li>
<li>静岡</li>
<li>岐阜</li>
<li>愛知</li>
<li>三重</li>
<li>滋賀</li>
<li>奈良</li>
<li>京都</li>
<li>和歌山</li>
<li>大阪</li>
<li>兵庫</li>
<li>鳥取</li>
<li>岡山</li>
<li>島根</li>
<li>広島</li>
<li>山口</li>
<li>香川</li>
<li>徳島</li>
<li>愛媛</li>
<li>高知</li>
<li>福岡</li>
<li>大分</li>
<li>佐賀</li>
<li>熊本</li>
<li>宮崎</li>
<li>鹿児島</li>
<li>沖縄</li>
</ul>
</body>
</html>
うん、何か気持ち悪いので、これを直す方法を次回までに、この問題の対処する方法を調査する...ということで、続きます
追記
上記、HTMLエンティティ問題は、別途記事にて回答いただき、解決しました。
public void ConfigureServices(IServiceCollection services)
{
services.Configure<WebEncoderOptions>(options => {
options.TextEncoderSettings = new TextEncoderSettings(UnicodeRanges.All);
});
services.AddMvc();
}
上記コードでHTMLエンティティ問題を解決できることを確認しています。
-
Firefox 63 での確認結果です ↩