例如AJAX回调到ASP.NET核心剃刀页

问题描述 投票:4回答:6

我发现的例子的网页上有多个处理程序和相关的命名约定(即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调用调用。

c# ajax asp.net-core-2.0 razor-pages
6个回答
11
投票

该防伪令牌需要添加,并需要有页面上的表单元素。

在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>

1
投票

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

的URL路径的页面的关联是通过在文件系统页面的位置决定。下表显示了剃刀页面路径和匹配网址

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

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


0
投票

一切正常,但有些更改必须进行:

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',

0
投票

答案为我工作。我想补充一点,如果我们已经定制了页面上的方法,如:

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

那么,我们应该在URL中指定的处理程序名称:

url: 'OnPost?handler=filter1',

0
投票

看上面的答案,我得到了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);
        }
    }
}

浏览器

http://localhost:44322/postJson


0
投票

接受的解决方案在本地显影机的工作,但未能将其部署在后面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

© www.soinside.com 2019 - 2024. All rights reserved.