欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何ASP.NET Core Razor中處理Ajax請(qǐng)求

 更新時(shí)間:2018年01月22日 16:39:17   投稿:laozhang  
本篇技術(shù)文章主要給大家講述了如何ASP.NET Core Razor中處理Ajax請(qǐng)求這方面的知識(shí)點(diǎn),有興趣的朋友參考下。

在ASP.NET Core Razor(以下簡(jiǎn)稱(chēng)Razor)剛出來(lái)的時(shí)候,看了一下官方的文檔,一直沒(méi)怎么用過(guò)。

今天閑來(lái)無(wú)事,準(zhǔn)備用Rozor做個(gè)項(xiàng)目熟練下,結(jié)果寫(xiě)第一個(gè)頁(yè)面就卡住了。。折騰半天才搞好,下面給大家分享下解決方案。先來(lái)給大家簡(jiǎn)單介紹下Razor Razor Pages是ASP.NET Core的一項(xiàng)新功能,可以使編頁(yè)面的編程方案更簡(jiǎn)單,更高效。Razor頁(yè)面使用處理程序方法來(lái)處理傳入的HTTP請(qǐng)求(GET / POST / PUT / Delete)。這些類(lèi)似于ASP.NET MVC或WEB API的Action方法。Razor Pages遵循特定的命名約定,Handler方法也是如此。他們也遵循特定的命名約定,并與“On”前綴:和HTTP動(dòng)詞一樣OnGet(),OnPost()等處理方法也有異步版本:OnGetAsync(),OnPostAsync()等。介紹完Razor,直接上圖

功能很簡(jiǎn)單,就是個(gè)登錄。用戶點(diǎn)擊"登錄按鈕"后利用Jquery獲取文本框的值,異步提交到服務(wù)器。很簡(jiǎn)單的功能,相信大家都寫(xiě)過(guò)很多次了。啪啪啪幾下代碼就擼出來(lái)了。

##前臺(tái)代碼
<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="注冊(cè)">
      </div>
</form>
##Script代碼
$("#btnLogin").click(function () {
      $.post('/user/Login?hanler=LoginIn', { UserName:$("#UserName").val(),              PassWord:$("#PassWord").val() }, function (data) {
        console.log(data);
      });
    });
##后臺(tái)代碼
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("帳號(hào)密碼錯(cuò)誤!"));
    //}
    return new JsonResult(ApiResult.ToFail("參數(shù)填寫(xiě)錯(cuò)誤,請(qǐng)檢查!"));
  }
}

首先解釋下/user/Login?hanler=LoginIn這個(gè)Url是什么意思,user是我Page下的一個(gè)目錄,Login是一個(gè)頁(yè)面,LoginIn是頁(yè)面里面對(duì)應(yīng)的一個(gè)方法。這個(gè)url的就是把這個(gè)請(qǐng)求交給OnPostLoginInAsync()方法處理。至于為什么是LoginIn而不是OnPostLoginInAsync,在文章開(kāi)頭也提到過(guò),這是Rozar的語(yǔ)法限定,不清楚的朋友可以去看下微軟的官方文檔,寫(xiě)的肯定比我好。。這個(gè)代碼乍一看,思路很清晰,項(xiàng)目跑起來(lái),走一波看看。

 

是的,你沒(méi)看錯(cuò),響應(yīng)碼400。各種姿勢(shì)試了半天,就是400,你現(xiàn)在一定想知道,上面的代碼有什么問(wèn)題。那么,上面的代碼沒(méi)有錯(cuò)。原因是,Razor被設(shè)計(jì)為可以自動(dòng)防止跨站請(qǐng)求偽造(CSRF / XSRF)攻擊。你不必編寫(xiě)任何其他代碼。Razor頁(yè)面中自動(dòng)包含防偽令牌生成和驗(yàn)證。這里請(qǐng)求失敗,是因?yàn)镻OST沒(méi)有提交AntiForgeryToken。有兩種方法可以添加AntiForgeryToken。

在ASP.NET Core MVC 2.0中,F(xiàn)ormTagHelper為HTML表單元素注入反偽造令牌。例如,Razor文件中的以下標(biāo)記將自動(dòng)生成防偽標(biāo)記:

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

 

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

要添加AntiForgeryToken,我們可以使用任何方法。這兩種方法都添加了一個(gè)隱藏名稱(chēng)的輸入類(lèi)型__RequestVerificationToken。Ajax請(qǐng)求應(yīng)將請(qǐng)求頭中的防偽標(biāo)記發(fā)送到服務(wù)器。所以,修改后的Ajax請(qǐng)求看起來(lái)像這個(gè)樣子:

$("#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);
        }
      });
    });

改良后的代碼在發(fā)送請(qǐng)求前在請(qǐng)求頭中增加了"XSRF-TOKEN"標(biāo)識(shí),值為表單自動(dòng)生成的防偽標(biāo)記。由于“XSRF-TOKEN”是我們自己加的,框架本身不會(huì)識(shí)別,所以我們需要把這個(gè)標(biāo)記添加到框架:

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

現(xiàn)在服務(wù)端就可以正常收到Post請(qǐng)求了。折騰了半天總算解決了。。。。解決了之后發(fā)現(xiàn)自己之前鉆了牛角尖,,,其實(shí)還有更簡(jiǎn)單的方法。。太晚了,明天測(cè)試一下,可行的話補(bǔ)回來(lái)。

相關(guān)文章

  • asp.net下生成英文字符數(shù)字驗(yàn)證碼的代碼

    asp.net下生成英文字符數(shù)字驗(yàn)證碼的代碼

    用了asp.net隨機(jī)數(shù),獲取指定位數(shù)的字母或數(shù)字以后,進(jìn)行圖片輸出的驗(yàn)證碼函數(shù)。
    2009-12-12
  • 淺談ASP.NETCore統(tǒng)一處理404錯(cuò)誤都有哪些方式

    淺談ASP.NETCore統(tǒng)一處理404錯(cuò)誤都有哪些方式

    本文主要介紹了ASP.NETCore統(tǒng)一處理404錯(cuò)誤都有哪些方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • .NET邏輯分層架構(gòu)總結(jié)

    .NET邏輯分層架構(gòu)總結(jié)

    本人將從另一個(gè)角度來(lái)解析.NET分層架構(gòu)的真正奧秘。分層,一些技術(shù)功底比較薄弱的程序員聽(tīng)到分層就會(huì)聯(lián)想到三層架構(gòu)(BLL,DAL之類(lèi)的),其實(shí)不是,分層是一個(gè)很大的技術(shù)框架思想,三層架構(gòu)只不過(guò)是對(duì)普通的信息系統(tǒng)來(lái)說(shuō),將信息的流轉(zhuǎn)通過(guò)三層來(lái)分解,
    2015-06-06
  • asp.net 在global中攔截404錯(cuò)誤的實(shí)現(xiàn)方法

    asp.net 在global中攔截404錯(cuò)誤的實(shí)現(xiàn)方法

    asp.net 在global中攔截404錯(cuò)誤,增加用于體驗(yàn),不會(huì)因?yàn)樘崾菊也坏叫畔⒍苯油顺龅膶擂巍?/div> 2010-03-03
  • .NET Core3.0 日志 logging的實(shí)現(xiàn)

    .NET Core3.0 日志 logging的實(shí)現(xiàn)

    這篇文章主要介紹了.NET Core3.0 日志 logging的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • .net前臺(tái)調(diào)用后臺(tái)函數(shù)的簡(jiǎn)單實(shí)例

    .net前臺(tái)調(diào)用后臺(tái)函數(shù)的簡(jiǎn)單實(shí)例

    這篇文章介紹了.net前臺(tái)調(diào)用后臺(tái)函數(shù)的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下
    2013-09-09
  • asp.net使用母版頁(yè)中使用ajax腳本取數(shù)據(jù)

    asp.net使用母版頁(yè)中使用ajax腳本取數(shù)據(jù)

    因母版頁(yè)繼承自UserControl,我們無(wú)法像正常頁(yè)面那樣使用Jquey或Ajax的PageMethods等無(wú)刷新方法取數(shù)據(jù)。不過(guò)可以使用ajax提供的Sys.Net.WebRequest來(lái)解決這一問(wèn)題。
    2010-09-09
  • 幾種using 的用法小結(jié)

    幾種using 的用法小結(jié)

    本文介紹了,幾種using 的使用方法,需要的朋友可以參考一下
    2013-03-03
  • ASP.NET開(kāi)發(fā)者使用jQuery應(yīng)該了解的幾件事情

    ASP.NET開(kāi)發(fā)者使用jQuery應(yīng)該了解的幾件事情

    如果你是有著APS.NET開(kāi)發(fā)背景的人員,那么jQuery的幾個(gè)概念建議你應(yīng)該忘掉。像使用其它的framework一樣,你應(yīng)該學(xué)習(xí)一下jQuery的所有語(yǔ)法等約定來(lái)讓它更好的為你服務(wù)。
    2009-09-09
  • ADO.NET通用數(shù)據(jù)庫(kù)訪問(wèn)類(lèi)

    ADO.NET通用數(shù)據(jù)庫(kù)訪問(wèn)類(lèi)

    這篇文章主要為大家介紹了ADO.NET通用數(shù)據(jù)庫(kù)訪問(wèn)類(lèi),利用ADO.NET的體系架構(gòu)打造通用的數(shù)據(jù)庫(kù)訪問(wèn)通用類(lèi),感興趣的小伙伴們可以參考一下
    2016-03-03

最新評(píng)論