最も簡単な可能なASPを作成する.POSTメソッドを使用したNETコアフォーム

最近、誰かがHTMLフォームを提出する簡単なページを作る必要がありました.Azure Applicationの残りの部分はAzure serverless functions , Logic apps and Cognitive services , しかし、その最後の部分のために、私はユーザーがリンクをクリックすることができる何かを望みました、ウェブブラウザ(おそらくモバイル装置の上のページ)を開けて、フォームでパスフレーズを入力して、SSL暗号化されたページにポストを通して提出してください.私は小さなXamarinアプリを書いて、Azure機能にポストを通して提出すると思いました.別のオプションは、静的HTMLページを使用して、そのAzure関数に投稿をフォームに送信するJavaScriptを使用することです.私は将来これらの2つの選択肢を除外しない.
しかし、その間、私は単純な実験をしたかったですRazor page (CSHTML) これはユーザにHTMLフォームを提示し、HTTPSの上でポストと共にこのフォームを自身に提出するでしょう.

The source code for this example is here.

モデル付きかみそりページは本当にクールです

スーパーシンプルASP.NET Core MVCのないサイト誤解するな.MVC テスト容易性と保守性が原始的であるエンタープライズWebアプリケーションでは素晴らしいです.しかし、彼らも多くのオーバーヘッドで来ます.あなたが先に行くと“空”のASPを作成する場合.以下の赤いCircledテンプレートによるNET Core MVCウェブサイトは、多くのファイル(CSHTMLページ、コントローラ、セットアップ・クラス、JavaScript、CSSなど)で終わります.空のASPでも.NETコアMVCウェブサイトには38ファイル(!)が入っています.

ASP .NETコアレイザーとASP .Visual StudioのNETコアMVCテンプレート
別のオプションは、ASPを作成することです.かみそりページのみのNETコアWebアプリケーション.そのようなアプリでは、コントローラを排除し、あなたはPageModel CSHTMLかみそりページに付けられるインスタンス.これは間違いなく複雑でありません、そして、実際、私の個人的なウェブサイトはこのようにインプリメントされます.しかし、たとえあなたが上記のオレンジ色の丸いテンプレートを使ってこのように「空の」ウェブアプリケーションをつくっても、あなたはまだ多くのファイルで終わります、そして、それらの大部分を削除する必要があります.それは迷惑です、そして、私は上記のイメージで青で選ばれるもののような「本当に空の」テンプレートから始めるのを好みます.

Even though I use Visual Studio in this example, you can create the ASP.NET Core apps using a command line with the dotnet new syntax shown here.

ゼロから始まる

ゼロから始めましょうEmpty 上記のWebアプリのテンプレート.これを行うには、Visual Studio 2017で、ファイル、新しい、プロジェクトを選択して起動します.

Before you start, you must make sure to have installed the .NET Core workload in the Visual Studio installer. You can always run the Visual Studio Installer from your Start menu, and check that the following workload is checked.

. NETコアワークロード
次の手順では、次のように空のWebアプリケーションを選択する必要があります.通常は良いアイデアですhttpsをデフォルトで有効にすることができます.我々の例では認証を使用しないので、このオプションをNo Authentication . その後、「了解」をクリックします.

かみそりページの設定

次の手順として、アプリケーションをRazorページに提供するよう設定します.これを行うには、ここで完全なMVC機能を使用しないとしても、MVCサービスを使用するようにアプリケーションに要求する必要があります.

オープンStartup.cs Visual Studioで.

変更するConfigureServices 次に示す方法

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}

変更するConfigure 以下の方法

public void Configure(
    IApplicationBuilder app, 
    IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseMvc();
}

カミソリページの作成

この設定を使用すると、アプリケーションはPages そして、ルート(URL)に対応するページにリクエストを指示します.この例では、できるだけ簡単にしたいので、デフォルトのルートを使用し、名前を付けたページを作成しますIndex.cshtml .

プロジェクトを右クリックし、選択Add それからNew Folder コンテキストメニューから.

新しいフォルダPages .

右クリックPages フォルダと選択Add それからRazor Page コンテキストメニューから.

にAdd scaffold プレス・オン・ダイアログAdd .

にAdd Razor Page ダイアログの名前を入力Index そして、Generate PageModel class を選択する.

解雇するUse a layout page それからプレスAdd .

This step can take a moment because a few Nuget packages need to be installed in order for the ASP.NET Core application, the routing and the Razor pages to work.

GETメソッドのテスト

デフォルトでは、ページはgetリクエストを受け取るように構成されています.これをテストします.

インデックスを開きます.CSHTMLページ(ページフォルダ内).

注意@model ディレクティブ.これはASPを指示します.使用するネットIndexModel クラスのIndex.cshtml.cs ) 呼び出しを処理する.

You can also add code directly inside the Index.cshtml page, inline with the HTML markup. This is super convenient but it can also lead to some "spaghetti" code which is very hard to test. It is not recommended to do so, except for layout code (for example for loops to create lists, etc...).

開けるIndex.cshtml.cs ファイル.このファイルはインデックス内で入れ子になっています.ソリューションエクスプローラーのCSHTMLページ.

ongetメソッド内にブレークポイントを配置します.

デバッグモードでアプリケーションを実行します.これはIIS Expressを開始し、localhost お気に入りのWebブラウザのURL、例えばhttps://localhost:44367/ .

ブレークポイントがヒットしていることに注意してください.

メソッド内では、すべての通常のASPにアクセスできます.NETオブジェクトHttpRequest インスタンスのRequest プロパティ等)

ポスト機能の設定

我々が扱えるようにGET 呼び出しはOnGet メソッド、ハンドルPOST 呼び出しはOnPost メソッド.しかし、これは我々が表示されるように少し追加の設定が必要です.まず、1つのテキストフィールドをIndexModelクラスに投稿するHTMLフォームを準備しましょう.

インthe IndexModel class , 型のプロパティを追加するstring 名前Message .

public string Message
{
    get;
    set;
}

変更するOnGet 次に示す方法

public void OnGet()
{
    Message = "Enter your message here";
}

IndexModelクラスでは、メソッド名を追加しますOnPost :

public void OnPost()
{
    Message = Request.Form[nameof(Message)];
}

内部にブレークポイントを置くOnPost メソッド.

オープンIndex.cshtml エディタで.

エディットbody 次のようになります.

<body>
    <form method="post">
        <input asp-for="Message" />
        <br />
        <input type="submit" />
    </form>
</body>

デバッグモードでアプリケーションを再度実行します.The OnGet メソッドは以前と同様に呼び出され、空の入力フィールドを持つHTMLフォームが表示されます.

この時点で、私のように入力フィールドを初期化することを期待していた場合、あなたは驚くかもしれないMessage 特性the asp-for attribute ). しかし、別の問題を見るためにさらにテストしましょう.

フィールド内の任意のテキストを入力し、送信ボタンを押します.

この時点で、ブラウザでHTTP Error 400を取得します.

不良リクエストエラー400の修正

迅速なオンライン検索では、問題はantiforgery tokens , ASPによるセキュリティ対策です.クロスサイトのリクエストforgery(CSRF)攻撃を避けるために.本質的に、トークンが何をするかは、フォームが生成したサイトからリクエストが来ることを証明します.
では、どうやってトークンを手に入れるのですか?ここは便利な名前空間ですcalled Microsoft.AspNetCore.Mvc.TagHelpers comes to play . これをCSHTMLページに追加すると、自動的にHTMLフォームにアンチフォルジェリートークンが生成され、the asp-for attribute 我々はフォームに追加しました.

オープンインデックス.京大理

ファイルの先頭にthe @page attribute , 追加the @addTagHelper attribute ファイルが次のようになります.

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TestPostWithRazor.Pages.IndexModel
@{
    Layout = null;
}

デバッグモードでアプリケーションを再度実行します.

Webブラウザで、ページが読み込まれると、フォームが期待通りに初期化されていることがわかります.

ページの任意の場所を右クリックし、選択View page source . ASP . NETによって生成された次のHTMLコードが表示されます.NETアプリケーション

<body>
    <form method="post">
        <input type="text" id="Message" name="Message" value="Enter your message here" />
        <br />
        <input type="submit" />
    <input name="__RequestVerificationToken" type="hidden" value="[Some token]" /></form>
</body>

テキストフィールドの内容を変更し、[送信]ボタンをクリックします.この時点で、OnPost メソッドがヒットし、フィールドの内容がMessage プロパティ.

結論

The source code for this example is here.

時には、簡単です.この例では、空のASPを作成する方法を見ました.かみそりページ(および対応する)を使用したPageModel ), そして、このアプリケーションを構成する方法GET and POST メソッド.これは、純粋なクライアント側のJavaScriptで動くページのような他のメカニズムの代わりにServerless Azure関数に話すことです.ここで提示された解決策はServerlessではありませんが、既にApaureのアプリケーションサービスプランを持っているなら、WindowsやLinuxでASPのクロスプラットフォーム機能に感謝します.ネットコア.
うまくいけば、このコードはいくつかに役に立つでしょう.
ハッピーコーディング!
ローラン