如何ASP.NET Core Razor中處理Ajax請求[轉載]

在ASP.NET Core Razor(如下簡稱Razor)剛出來的時候,看了一下官方的文檔,一直沒怎麼用過。

今天閒來無事,準備用Rozor作個項目熟練下,結果寫第一個頁面就卡住了。。折騰半天才搞好,下面給你們分享下解決方案。先來給你們簡單介紹下Razor Razor Pages是ASP.NET Core的一項新功能，可使編頁面的編程方案更簡單，更高效。Razor頁面使用處理程序方法來處理傳入的HTTP請求（GET / POST / PUT / Delete）。這些相似於ASP.NET MVC或WEB API的Action方法。Razor Pages遵循特定的命名約定，Handler方法也是如此。他們也遵循特定的命名約定，並與「On」前綴：和HTTP動詞同樣OnGet()，OnPost()等處理方法也有異步版本：OnGetAsync()，OnPostAsync()等。

功能很簡單，就是個登陸。用戶點擊"登陸按鈕"後利用Jquery獲取文本框的值,異步提交到服務器。很簡單的功能，相信你們都寫過不少次了。啪啪啪幾下代碼就擼出來了。

前臺代碼

<form method="post">
      <div class="login-ic">
        <i></i>
        <input asp-for="Login.UserName" />
        <div class="clear"> </div>
      </div>
      <div class="login-ic">
        <i class="icon"></i>
        <input asp-for="Login.PassWord" />
        <div class="clear"> </div>
      </div>
      <div>
        <ul>
          <li>
            <input type="checkbox" value="">
            <label for="brand1">記得我</label>
          </li>
        </ul>
        <a href="#" rel="external nofollow" >
          忘記密碼?
        </a>
      </div>
      <div class="log-bwn">
        <input type="button" value="登陸">
      </div>
      <div class="log-bwn">
        <input type="button" value="註冊">
      </div>
</form>

　　JS代碼：

$("#btnLogin").click(function () {
      $.post('/user/Login?hanler=LoginIn', { UserName:$("#UserName").val(),              PassWord:$("#PassWord").val() }, function (data) {
        console.log(data);
      });
    });

     後臺代碼：

public class LoginModel : PageModel
{
 
  private UserServiciCasee _userService;
 
  public LoginModel(UserServiciCasee userService)
  {
    _userService = userService;
  }
 
  public void OnGet()
  {
  }
  [BindProperty]
  public UserLoginDto Login { get; set; }
  public async Task<ActionResult> OnPostLoginInAsync()
  {
    //if (ModelState.IsValid)
    //{
    //  var user = await _userService.LoginAsync(Login);
    //  if (user != null)
    //  {
    //    return new JsonResult(ApiResult.ToSucess("登陸成功!"));
    //  }
    //  return new JsonResult(ApiResult.ToFail("賬號密碼錯誤!"));
    //}
    return new JsonResult(ApiResult.ToFail("參數填寫錯誤,請檢查!"));
  }
}

 

首先解釋下/user/Login?hanler=LoginIn這個Url是什麼意思,user是我Page下的一個目錄,Login是一個頁面,LoginIn是頁面裏面對應的一個方法。這個url的就是把這個請求交給OnPostLoginInAsync()方法處理。至於爲何是LoginIn而不是OnPostLoginInAsync,在文章開頭也提到過,這是Rozar的語法限定,不清楚的朋友能夠去看下微軟的官方文檔，寫的確定比我好。。這個代碼乍一看，思路很清晰,項目跑起來,走一波看看。

 

 

是的,你沒看錯，響應碼400。各類姿式試了半天，就是400,你如今必定想知道，上面的代碼有什麼問題。那麼，上面的代碼沒有錯。緣由是，Razor被設計爲能夠自動防止跨站請求僞造（CSRF / XSRF）攻擊。你沒必要編寫任何其餘代碼。Razor頁面中自動包含防僞令牌生成和驗證。這裏請求失敗，是由於POST沒有提交AntiForgeryToken。有兩種方法能夠添加AntiForgeryToken。

在ASP.NET Core MVC 2.0中，FormTagHelper爲HTML表單元素注入反僞造令牌。例如，Razor文件中的如下標記將自動生成防僞標記：

<form method="post">
<!-- form markup -->
</form>

明確添加使用 @Html.AntiForgeryToken()

要添加AntiForgeryToken，咱們可使用任何方法。這兩種方法都添加了一個隱藏名稱的輸入類型__RequestVerificationToken。Ajax請求應將請求頭中的防僞標記發送到服務器。因此，修改後的Ajax請求看起來像這個樣子:

$("#btnLogin").click(function () {
      $.ajax({
        type: "POST",
        url: "/user/Login?handler=LoginIn",
        beforeSend: function (xhr) {
          xhr.setRequestHeader("XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: { UserName: $("#UserName").val(), PassWord: $("#PassWord").val() },
        success: function (response) {
          console.log(response);
        },
        failure: function (response) {
          alert(response);
        }
      });
    });

改良後的代碼在發送請求前在請求頭中增長了"XSRF-TOKEN"標識,值爲表單自動生成的防僞標記。因爲「XSRF-TOKEN」是咱們本身加的,框架自己不會識別,因此咱們須要把這個標記添加到框架：

public void ConfigureServices(IServiceCollection services)
{
  services.AddMvc();
  services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}

如今服務端就能夠正常收到Post請求了。折騰了半天總算解決了。。。。解決了以後發現本身以前鑽了牛角尖，，，其實還有更簡單的方法。。太晚了,明天測試一下,可行的話補回來。

本文來源於：http://www.jb51.net/article/133437.htm