it-swarm-ko.tech

ASP.NET Core 2, MVC가없는 Razor 페이지에서 버튼 클릭

누군가가 의견에서 지적했듯이 Razor 페이지에는 MVC에서와 같이 컨트롤러가 필요하지 않습니다. 또한 Razor는 버튼 클릭 이벤트를 기본적으로 처리하지 않습니다. 사용자가 버튼을 클릭 할 때 무언가 ( "코드 숨김")를 수행하기 위해 최소한 두 가지 옵션이 있습니다.

  • 제출 버튼을 사용하십시오
  • 아약스 호출을 사용

컨트롤러 기능을 정의하는 방법을 보여주는 MVC에 대한 많은 예제를 발견했습니다. 그러나 말했듯이 나는 하나도 없습니다.

따라서 두 가지 방법을 모두 이해하려고합니다. 여기 내 테스트 CSS :

<form method="post">
    <input type="submit" class="btn btn-primary" value="way1">Way 1/>
</form>

<button id="btn" type="button" class="btn btn-primary" value="way2">Way 2</button>

<script>
$(document).ready(function() {
    $("#btn").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: "@Url.Action("Way2")",
            type: "POST",
            data: "foo",
            datatype: "text",
            success: function (data) {
                alert(data);
            }
        });
        return false;
    });
});
</script>

그리고 여기 cshtml.cs :

공용 클래스 TestModel : PageModel {개인 읽기 전용 MyContext _context;

public TestModel(MyContext context)
{
    _context = context;
}

public IActionResult OnPost()
{
    // here I can put something to execute 
    // when the submit button is clicked
}

public ActionResult Way2(string data)
{
    // this is never triggered
}

질문

  1. "Way1"(제출)을 사용하면 버튼 클릭을 잡을 수 있지만 몇 가지 단점이 있습니다. 기본적으로 게시물 때문에 페이지가 다시로드됩니다. 때로는 아무것도 변경할 필요가 없지만 C # 함수를 호출하면됩니다. 그러나 여러 버튼을 처리하는 방법을 이해하지 못합니다. 즉 5 개의 버튼이 있으면 각 버튼마다 다른 작업을 수행하는 방법은 무엇입니까?

  2. "Way2"를 사용하면 CSS 코드의 함수에 도달하지 못하고 잘못된 요청 오류 (400)가 발생하여 잘못되었습니다. 내가 놓친 게 무엇입니까?

8
Mark

일반 양식 제출

일반 양식 제출시 규칙에 따라 On{{HttpVerb}}{{YourHanderName}} 형식을 따르는 핸들러 메소드 이름이 필요합니다.

public ActionResult OnPostWay2(string data)
{
    // to do : return something
}

이제 form 태그 안에 제출 버튼이 있고 asp-page-handler를 언급했는지 확인하십시오. 해당 속성의 값은 페이지 모델 클래스 (Way2)의 핸들러 이름이어야합니다.

<form method="POST">       
    <button type="submit" asp-route-data="foo" asp-page-handler="Way2">Way 2</button>
</form>

위의 코드는 URL yourBaseUrl/YourPageName?data=foo&handler=Way2로 설정된 formaction attribute 버튼의 마크 업을 생성합니다. 사용시 제출 단추를 클릭하면 formaction 속성 값이 양식의 기본 조치 URL을 대체하므로이 URL 양식을 게시합니다. 요청이 수신되면 면도기 페이지 프레임 워크는이 매개 변수 (handler)를 사용하여 요청을 해당 핸들러 메소드로 보냅니다.

아약스 호출

프레임 워크가 게시 된 요청 데이터의 일부로 RequestVerificationToken을 (를) 예상하므로 400 (잘못된 요청) 응답을받습니다. 페이지의 뷰 소스를 확인하면 양식 안에 이름이 __RequestVerificationToken 인 숨겨진 입력 요소가 표시됩니다. 프레임 워크는이를 사용하여 가능한 CSRF 공격을 방지합니다. 요청에이 정보가 없으면 프레임 워크는 400 개의 잘못된 요청을 반환합니다.

아약스 코드를 작동 시키려면이를 명시 적으로 보내면된다. 다음은 작동하는 샘플입니다

$("#btn").click(function(e) {
    e.preventDefault();

    var t = $("input[name='__RequestVerificationToken']").val();
    $.ajax({
        url: $(this).attr("formaction"),
        headers:
        {
            "RequestVerificationToken": t
        },
        type: "POST",
        data: { data: 'foo2' },
    }).done(function(data) {
        console.log(data);
    }).fail(function(a, v, e) {
        alert(e);
    });
});

이제 아약스 호출을하고 있기 때문에 JSON 응답을 반환하는 것이 좋습니다.

public ActionResult OnPostWay2(string data)
{
    return new JsonResult("Received "+ data + " at "+DateTime.Now);        
}

위의 예에서 일부 jQuery 코드를 사용하여 이름이 __RequestVerificationToken 인 입력 요소를 가져 와서 값을 읽습니다. 보다 강력한 접근법은 IAntiforgery 구현을 뷰에 주입하고 GetAndStoreTokens 메소드를 사용하는 것입니다.

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken;
    }
}
<script>
     $(function () {

         $("#btn").click(function(e) {
             e.preventDefault();
             var t = '@GetAntiXsrfRequestToken()';
             $.ajax({
                      url: $(this).attr("formaction"),
                      headers:
                      {
                          "RequestVerificationToken": t
                      },
                      type: "POST",
                      data: { data: 'foo2' },
             }).done(function(data) {
                     console.log(data);
             }).fail(function(a, v, e) {
                     alert(e);
             });
         });
    })
</script>
11
Shyju