가능한 한 간단한 ASP를 생성합니다.NET Core form with a POST 방법

최근에 나는 누군가가 HTML 폼을 제출할 수 있도록 간단한 페이지를 만들어야 한다.Azure 응용 프로그램의 나머지 부분은 Azure serverless functions, Logic apps 및 Cognitive services 에서 실행되지만, 마지막 부분에 대해서는 사용자가 링크를 클릭하여 웹 브라우저에서 페이지를 열고 양식에 암호 단어를 입력한 후 게시물을 통해 SSL 암호화 페이지로 제출할 수 있기를 바랍니다.나는 작은 Xamarin 응용 프로그램을 써서 POST를 통해 Azure 함수에 제출하고 싶다.또 다른 선택은 정적 HTML 페이지를 사용하고 Javascript를 사용하여 POST를 통해 양식을 Azure 함수에 제출하는 것입니다.미래에 대해 나는 이 두 가지 선택을 배제하지 않는다.
그러나 이와 동시에 나는 간단한 Razor page (CSHTML) 을 사용하여 사용자에게 HTML 폼을 보여주고 HTTPS의 게시물을 통해 이 폼을 자신에게 제출하고 싶다.

The source code for this example is here.

모형이 있는 면도기 페이지 정말 멋있어요.

나는 MVC가 없는 초간단ASP.NET Core 사이트를 좋아한다.오해하지 마세요. MVC 기업 웹 응용 프로그램에 있어서 너무 좋아요. 기업 웹 응용 프로그램에서 테스트 가능성과 유지보수성이 가장 기본이기 때문입니다.하지만 그것들도 많은 비용을 가져올 것이다.비어 있는 ASP를 계속 만들면NET 핵심 MVC 사이트는 아래에 빨간색 동그라미가 있는 템플릿을 사용하여 많은 파일 (CSHTML 페이지, 컨트롤러, 설정 클래스, 자바스크립트, CSS 등) 을 얻을 수 있습니다.빈 ASP라도NET Core MVC 웹 사이트에는 38개의 파일(!)이 있습니다.

ASP.NET 코어 면도기 및 ASP.Visual Studio의 NET 핵심 MVC 템플릿
다른 선택은 ASP 생성입니다.Razor 페이지만 있는 NET 핵심 웹 응용 프로그램입니다.이러한 응용 프로그램에서 컨트롤러를 제거하고 CSHTML Razor 페이지에 연결된 PageModel 인스턴스에서 코드를 처리합니다.이것은 절대로 그렇게 복잡하지 않다. 사실 나의 개인 사이트는 이런 방식으로 실현된 것이다.그러나 위에 표시된 주황색 동그라미 템플릿을 사용해서 비어 있는 웹 프로그램을 만들더라도 많은 파일을 얻을 수 있고 대부분의 파일을 삭제해야 합니다.이것은 매우 짜증스럽다. 나는 위의 그림에서 파란색으로 선택한 템플릿처럼'진짜 비어 있는'템플릿부터 시작하는 것을 더욱 좋아한다.

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.

처음부터

웹 응용 프로그램 템플릿을 처음부터 사용합니다.이를 위해 Visual Studio 2017에서 File, New 및 Project를 먼저 선택합니다.

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.

.순핵심 작업량
다음 단계에서 빈 웹 응용 프로그램을 선택해야 합니다. 아래와 같습니다.기본적으로 HTTPS를 사용할 수 있습니다. 이것은 보통 좋은 생각입니다.우리의 예시에서 우리는 인증을 사용하지 않기 때문에 이 옵션을 Empty로 보류할 수 있습니다.그런 다음 확인을 클릭합니다.

Razor 페이지 구성

다음 단계에서는 Razor 페이지에 서비스를 제공하기 위해 응용 프로그램을 구성합니다.이렇게 하려면 여기에서 완전한 MVC 기능을 사용하지 않으려 해도 응용 프로그램에 MVC 서비스를 사용하도록 요구해야 한다.

Visual Studio에서 열기Startup.cs.

수정No Authentication 방법은 다음과 같다.

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

수정ConfigureServices 방법은 다음과 같다.

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

    app.UseMvc();
}

Razor 페이지 만들기

이 구성을 사용하면 Razor(CSHTML) 페이지를 Configure라는 폴더에서 찾아 라우팅(URL)에 해당하는 페이지로 요청합니다.이 예에서, 우리는 가능한 한 간단하기를 원하기 때문에, 기본 루트를 사용하고 Index.cshtml 라는 페이지를 만들 것입니다.

항목을 마우스 오른쪽 버튼으로 클릭하고 연관 메뉴에서 Pages 을 선택한 다음 Add 을 선택합니다.

이 새 폴더의 이름을 New Folder 로 지정합니다.

폴더를 마우스 오른쪽 버튼으로 클릭하고 연관 메뉴에서 Pages 를 선택한 다음 Pages 을 선택합니다.

대화상자에서 Add 를 누릅니다.

Razor Page 대화 상자에 이름Add scaffold을 입력하고 Add을 선택합니다.

선택을 취소하고 Add Razor Page 를 누릅니다.

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 페이지(Pages 폴더에 있음).

주의Index 지령의 존재.이것은 ASP를 나타냅니다.NET는 Generate PageModel class 클래스 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...).

파일을 엽니다.이 파일은 인덱스에 중첩됩니다.솔루션 자원 관리자의 cshtml 페이지입니다.

OnGet 메서드에 브레이크 지점을 배치합니다.

디버깅 모드에서 응용 프로그램을 실행합니다.이것은 IIS Express를 시작하고 가장 좋아하는 웹 브라우저에서 Use a layout page URL을 엽니다. 예를 들어 Add.

주의, 단점이 맞았습니다.

이 메서드에서는 자주 사용하는 모든 ASP에 액세스할 수 있습니다.NET 객체(예: Index.cshtml.cs 인스턴스@model 속성) 등.

HttpRequest POST 기능 설정

우리가 IndexModel 방법에서 localhost 호출을 처리할 수 있는 것처럼, 우리는 https://localhost:44367/ 방법에서 Request 호출을 처리할 것이다.그러나 우리가 볼 수 있는 바와 같이, 이것은 약간의 추가 설정이 필요하다.먼저 IndexModel 클래스에 텍스트 필드를 게시하는 HTML 양식을 준비합니다.

에 GET라는 유형OnGet의 속성을 추가합니다.

public string Message
{
    get;
    set;
}

수정POST 방법은 다음과 같다.

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

IndexModel 클래스에서 OnPost라는 방법을 추가합니다.

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

IndexModel 방법에 단점을 배치합니다.

편집기에서 열기 the string class.

편집Message은 다음과 같습니다.

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

디버깅 모드에서 응용 프로그램을 다시 실행합니다.이전과 같이 OnGet 메서드를 호출하면 HTML 양식의 입력 필드가 비어 있는 것을 볼 수 있습니다.

Index.cshtml
이 때, 만약 저처럼 필드용 OnPost 속성의 내용을 초기화하기를 원한다면 깜짝 놀랄 수도 있습니다.하지만 또 다른 문제를 시험해 보자.

필드에 텍스트를 입력하고 제출 버튼을 누릅니다.

브라우저에서 HTTP 오류 400(오류 요청)이 나타납니다.

OnPost 속성 오류 수정 요청 오류 400

빠른 온라인 검색에 따르면 문제는 실종 과 관련이 있으며, 실종은 ASP가 취한 안전 조치이다.NET는 CSRF(크로스 사이트 요청 위조) 공격을 방지합니다.본질적으로 영패가 하는 것은 요청이 표의 출처에서 온 사이트라는 것을 증명하는 것이다.
그러면 우리는 어떻게 토큰을 얻을 수 있습니까?이것은 유용한 명명 공간이다antiforgery tokens.CSHTML 페이지에 추가하면 HTML 폼에 antiforgery 영패가 자동으로 생성되고 폼에 추가된 called body comes to play 에 해당하는 HTML 속성이 생성됩니다.

인덱스를 엽니다.cshtml.

파일 맨 위에 있지만 the OnGet attribute 아래에 the Message attribute 를 추가하여 파일을 다음과 같은 코드로 표시합니다.

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

디버깅 모드에서 응용 프로그램을 다시 실행합니다.

웹 브라우저에서 페이지를 불러오면 폼이 예상대로 초기화되는 것을 볼 수 있습니다.

the asp-for attribute

페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 Microsoft.AspNetCore.Mvc.TagHelpers 를 선택합니다.ASP에서 생성된 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>

텍스트 필드의 내용을 수정하고 제출 버튼을 클릭합니다.이때 asp-for 방법의 단점은 명중되어야 하며 필드의 내용은 @page 속성에 분배됩니다.

결론

The source code for this example is here.

때로는 간단함이 더 좋다.이 예에서 우리는 빈 ASP를 만드는 방법을 보았다.NET 핵심 응용 프로그램의 Razor 페이지와 그에 상응하는 @addTagHelper, 그리고 간단한 View page source 및 OnPost 방법을 처리하기 위해 이 응용 프로그램을 구성하는 방법.이것은 다른 메커니즘의 대체 방안이다. 예를 들어 순수한 클라이언트 자바스크립트가 지원하는 페이지와 서버 없는 Azure 기능과 대화하는 것이다.여기에서 소개한 해결 방안은 서버가 없는 것이 아니지만 만약에 Azure에서 응용 서비스 계획을 세웠다면 ASP의 크로스플랫폼 능력을 빌려 Windows나 Linux를 사용할 수 있습니다.순수한 핵심.
이 코드가 몇몇 사람들에게 유용하길 바란다.
즐거운 인코딩!
로렌트