آموزش Ajax در ASP.Net core, razor page

سلام، اول اینکه خیلی نمیشه اسمشو آموزش گذاشت، بیشتر یه راهنماست.

ارسال اطلاعات به صورت Ajax در razor page یه مقدار با قبل متفاوت هست، تفاوت هم که نه، یه چندتا ریزه کاری کوچیک داره.

اول اینکه ما برای دریافت اطلاعات از صفحه چند تا متد داریم مثل:

• OnGet
• OnPost
• OnPut
• OnGetAsync
• OnPostAsync
• OnPutAsync

متد OnGet وقتی صفحه لود میشه اتفاق میوفته و همینطور موقع ارسال اطلاعات به صورت get و متد OnPost هم موقع ارسال اطلاعات به صورت post. حالا اگه ما بخوایم یه متد خاص رو صدا بزنیم میتونیم به 2 روش عمل کنیم:

public void OnPostSave(){
//This is my save Handler
}
 public void OnPostDelete(){ //This is my save Handler } 
  <form id="post-form" asp-page-handler="Save" method="post" action="~/Managing/Products" role="form">
  <input type="submit" value="ذخیره"  /> 
 </form> 
 

حالا اگه بخوایم 2 تا handler رو از داخل یه فرم فراخونی کنیم به روش زیر عمل می کنیم.

  <form id="post-form" method="post" action="~/Managing/Products" role="form">   
  <input type="submit"  asp-page-handler="Save" value="ذخیره"  />  
    <input type="submit"  asp-page-handler="Delete" value="حذف"  />  
   </form>  

همونطوری که توجه کردید اینجا هندلر های ما پیشوند OnPost دارن که حتما باید در اول اسمشون قرار بگیره.

حالا ما میخوایم اطلاعات رو به صورت اجکسی ارسال کنیم. برای این کار تو حالت معمولی از کد زیر استفاده می کنیم:

$(function () {

$.ajax({
    url : 'http://www.mysite.com/index',
    type : 'GET',
    data : {
        'numberOfWords' : 10
    },
    dataType:'json',
    success : function(data) {              
        alert('Data: '+data);
    },
    error : function(request,error)
    {
        alert("Request: "+JSON.stringify(request));
    }
});   

ولی اگه از این کد در razor page استفاده کنیم می بینیم که با خطا روبرو میشیم. خطای 400! ( bad request error )

حالا راه حل چیه؟!

برای اینکه از دست این ارور مزاحم خلاص بشین چند تا کار کوچیک هست که باید انجام بدین.

اول، در ASP.NET Core MVC 2.0 متد FormTagHelper میاد و در تگ های فرم توکن anti-forgery رو تزریق می کنه، حالا برای اینکه اسکریپت ajax ما کار کنه باید این توکن رو تو هدر خودش ارسال کنه، اما اول باید سرویسش رو به صورت زیر اضافه کنیم.

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

تو فایل Startup.cs تکه کد bold شده بالا رو وارد کنید.

$.ajax({
url: 'http://localhost:62117/Managing/Products?handler=Save',
beforeSend: function (xhr) { xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val()); },
data : {         'numberOfWords' : 10     }, 
dataType:'json',
contentType: false, 
processData: false, 
type: 'POST', 
success: function (resp) {
 alert(resp);  
 }  
 });

و همینطور در کد اسکریپت خودمون هم توکن رو در هدر قرارش میدیم تا ارسال بشه و بعد از اجرا می بینیم که عملیات با موفقیت انجام میشه.

اگه در کد بالا به url دقت کنید می بینید که ما برای استفاده از handler مورد نظرمون به چه شکلی عمل کردیم.

کم و کاستی ها رو به بزرگی خودتون ببخشید، موفق باشید.

منبع