我发现的例子的网页上有多个处理程序和相关的命名约定(即OnPostXXX)和“ASP-后hanlder”标签帮手。但是,我怎么能叫的,从一个AJAX调用这些方法之一。
我有一个典型的MVC视图和控制器旧的例子,但如何做用剃刀页这项工作?
例如,如果我把基础应用和修改About.cshtml页以下几点:
@page
@model AboutModel
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"]</h2>
<h3>@Model.Message</h3>
<input type="button" value="Ajax test" class="btn btn-default" onclick="ajaxTest();" />
@section Scripts {
<script type="text/javascript">
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);
})
}
</script>
}
并在模型上页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("");
}
}
该onPOST等未从Ajax调用调用。
该防伪令牌需要添加,并需要有页面上的表单元素。
在Startup.Cs services.AddMvc之前加入这个()
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
thenn在阿贾克斯,更改为:
$.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页面包裹按钮的形式或没有防伪造的cookie将被添加。
<form method="post">
<input type="button" value="Ajax test" class="btn btn-default" onclick="ajaxTest();" />
</form>
请参阅文档https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=visual-studio的这种相关章节
的URL路径的页面的关联是通过在文件系统页面的位置决定。下表显示了剃刀页面路径和匹配网址
/Pages/Index.cshtml映射到/或/索引
/Pages/Contact.cshtml映射到/联系
一切正常,但有些更改必须进行:
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";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<p>Use this area to provide additional information.</p>
<form method="post">
<input type="button" value="Ajax test" class="btn btn-default" onclick="ajaxTest();" />
</form>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
function ajaxTest() {
$.ajax({
type: "POST",
url: 'onPost',
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);
})
}
</script>
应当指出的是,“onPOST等”是在控制器内添加的,所以在AJAX正确的“URL”应注明。然后:
url: 'onPost',
答案为我工作。我想补充一点,如果我们已经定制了页面上的方法,如:
public IActionResult OnPostFilter1()
{
return new JsonResult("Hello Response Back");
}
那么,我们应该在URL中指定的处理程序名称:
url: 'OnPost?handler=filter1',
看上面的答案,我得到了JSON AJAX使用.NET 2.1的核心剃刀页的Visual Studio 2017年预览2工作后:
Startup.cs
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
PostJson.cshtml
@page
@model myProj.Pages.PostJsonModel
@{
ViewData["Title"] = "PostJson";
}
<input type="button" value="Post Json" class="btn btn-default" onclick="postJson();" />
<script>
function ajaxRazorPostJson(o) {
return $.ajax({
type: "POST",
data: JSON.stringify(o),
url: 'postJson',
contentType: "application/json; charset=utf-8",
beforeSend: function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val()); },
dataType: "json"
});
}
function postJson() {
ajaxRazorPostJson({ reqKey: "reqVal" }).done(data => alert(data));
}
</script>
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);
}
}
}
浏览器
接受的解决方案在本地显影机的工作,但未能将其部署在后面Nginx的反向代理服务器的Debian(未找到404错误)。
这与有效载荷数据的工作示例:
<script type="text/javascript">
$('#btnPost').on('click', function () {
var payloadData; /*asign payload data here */
$.post({ /* method name in code behind, and full path to my view*/
url: '@Url.Action("OnPostAsync", "/Turtas/Inventorius/InventoriausValdymas")',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify({ payloadData }),
contentType: "application/json; charset=utf-8",
dataType: "json"
})
})
</script>
2017年VS;达网络核心2.2剃刀页; jQuery的3.3.1