示例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”。 然后:
上述就是C#学习教程:示例AJAX回调到ASP.NET Core Razor页面分享的全部内容,如果对大家有所用处且需要了解更多关于C#学习教程,希望大家多多关注---计算机技术网(www.ctvol.com)!
url: 'onPost',
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/cdevelopment/954256.html