如何 POST ajax 使用 .net core 2.0 调用数据响应

Question

我正在尝试在 .netcore 2.0 中进行 ajax 调用。在网上做了一些研究后，我将 cshtml 和下面的方法添加到我的项目中。我的应用程序的当前状态是，当我单击 CreateNewTwitterData 输入时 "Hello world" 是 return 作为我的新页面（我还没有编写 java 脚本但是这个功能执行的是发出 post 请求的 CSHTML 吗？）。我想与下面的 URL 保持相同的页面，并使用一些 java-script 来更新当前页面上的信息。

当前URL： http://localhost:5808/Manifest/Details?id=80004

CSHTML:

<form method="post">
    <input type="image" data-id="@Model.ManifestViewModel.ID" asp-page-handler="CreateTwitterItem" src="~/images/twitterlogo.jpg" name="New Twitter" id="CreateNewTwitterData" />
</form>

C#:

[ValidateAntiForgeryToken]
public async Task<IActionResult> OnPostCreateTwitterItemAsync(long? id)
{

    if (!ModelState.IsValid)
    {
        return Page();
    }
    return new JsonResult("Hello world");
}

我尝试了下面的ajax方法，但是代码没有到达成功点。

$('#CreateNewTwitterData').click(function (e) {

    $.ajax({
        type: "POST",
        url: '/Manifest/Details?id=' + $(CreateNewTwitterData).data("id") + '&handler=CreateTwitterItem', // <-- 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) {
        alert(data);
    })
})

Answer 1

经过反复试验，我找到了 Ajax 解决方案 using.Netcore 2.0 razor 页面，但我不确定它是否是最佳解决方案它对我有用，所以我想我会分享它。（此外，我意识到我不需要 cshtml 中的 form 标签 asp-page-handler 这是它自己的调用）。

CSHTML:

<img type="image" class="socialmediaicon" data-id="@Model.ManifestViewModel.ID" src="~/images/twitterlogo.jpg" name="New Twitter" id="CreateNewTwitterData" asp-route-id="@Model.ManifestViewModel.ID" height="20" width="20" />

AJAX:

$('#CreateNewTwitterData').click(function (e) {
    $.ajax({
        type: "POST",
        url: "/Manifest/Details?id=" + $(CreateNewTwitterData).data("id") + "&handler=CreateTwitterItem", // <-- Where should this point?
        contentType: "application/json; charset=utf-8",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        dataType: "json", success: function (msg) {
            alert("success");
            alert(msg);
        },
        error: function (errormessage) {
            alert("fail");
        }
    })
})

如何 POST ajax 使用 .net core 2.0 调用数据响应

How to POST ajax call using .netcore 2.0 with data response

c#

ajax

asp.net-core-2.0