示例AJAX回调到ASP.NET Core Razor页面

我发现在页面上有多个处理程序的示例以及相关的命名约定(即OnPostXXX)和’asp-post-hanlder’标记帮助程序。 但是如何从AJAX调用中调用这些方法之一。

我有一个典型的MVC视图和控制器的旧示例,但这如何与Razor页面一起使用?

例如,如果我使用基本应用程序并将About.cshtml页面修改为以下内容:

@page @model AboutModel @{ ViewData["Title"] = "About"; } 

@ViewData["Title"]

@Model.Message

@section Scripts { function ajaxTest() { console.log("Entered method"); $.ajax({ type: "POST", url: '/About', // <-- Where should this point? contentType: "application/json; charset=utf-8", dataType: "json", error: function (xhr, status, errorThrown) { var err = "Status: " + status + " " + errorThrown; console.log(err); } }).done(function (data) { console.log(data.result); }) } }

在模型页面About.cshtml.cs上

 public class AboutModel : PageModel { public string Message { get; set; } public void OnGet() { Message = "Your application description page."; } public IActionResult OnPost() { //throw new Exception("stop"); return new JsonResult(""); } } 

不从Ajax调用调用OnPost。

需要添加AntiForgery令牌,页面上需要有一个表单元素。

在你的Startup.Cs中添加这个在services.AddMvc()之前

 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); 

然后在你的ajax中,改为:

  $.ajax({ type: "POST", url: '/About', // <-- Where should this point? contentType: "application/json; charset=utf-8", beforeSend: function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val()); }, dataType: "json" }).done(function (data) { console.log(data.result); }) } 

然后在你的方法中添加

  [ValidateAntiForgeryToken] public IActionResult OnPost() { //throw new Exception("stop"); return new JsonResult ("Hello Response Back"); } 

在cshtml页面上,在表单中包装按钮,或者不添加AntiForgery cookie。

 

请参阅文档的相关部分https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=visual-studio

URL路径与页面的关联由页面在文件系统中的位置决定。 下表显示了Razor页面路径和匹配的URL

/Pages/Index.cshtml映射到/或/索引

/Pages/Contact.cshtml映射到/联系人

答案对我有用。 我只想补充说,如果我们在页面上有自定义方法,如:

  public IActionResult OnPostFilter1() { return new JsonResult("Hello Response Back"); } 

然后我们应该在url中指定处理程序名称:

 url: 'OnPost?handler=filter1', 

在查看上面的答案后,我使用Visual Studio 2017 Preview 2获得了JSON ajax以使用.NET Core 2.1 Razor页面:

Startup.cs

 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); 

PostJson.cshtml

 @page @model myProj.Pages.PostJsonModel @{ ViewData["Title"] = "PostJson"; }   

PostJson.cshtml.cs

 using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Newtonsoft.Json.Linq; namespace myProj.Pages { public class PostJsonModel : PageModel { public IActionResult OnPost([FromBody] JObject jobject) { // request buffer in jobject return new ContentResult { Content = "{ \"resKey\": \"resVal\" }", ContentType = "application/json" }; // or ie return new JsonResult(obj); } } } 

浏览器

HTTP://本地主机:44322 / postJson

一切都运作良好,但必须做出一些改变:

1)打开Startup.cs:

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

2)打开HomeController.cs:

 [ValidateAntiForgeryToken] public IActionResult OnPost() { return new JsonResult("Hello Response Back"); } 

3)打开About.cshtml:

 @{ ViewData["Title"] = "About"; } 

@ViewData["Title"]

@ViewData["Message"]

Use this area to provide additional information.

应该注意的是,在控制器内添加了“onPost”,因此在AJAX中应该指出正确的“url”。 然后:

 url: 'onPost',