如何使用带有数据响应的.netcore 2.0来发布ajax调用

时间:2017-10-31 12:30:33

标签: c# ajax asp.net-core-2.0

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

当前网址: 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);
    })
})

1 个答案:

答案 0 :(得分:0)

我在试用和错误后找到了使用.Netcore 2.0 razor页面的Ajax解决方案,但我不确定它是否是最好的解决方案它对我有用所以我想我会分享它。(此外,我意识到我没有不需要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");
        }
    })
})