无法从我的AJAX帖子请求中获取数据

时间:2018-03-12 14:29:45

标签: javascript c# jquery asp.net-core

我目前正在开发一个ASP.net核心2.0网络应用程序。我想通过AJAX将选定的产品ID解析为控制器。在控制器中我想通过会话或其他东西存储它。到目前为止,我可以从AJAX连接到我的Controller,但我的参数始终为null。我的.js文件和Controller之间的连接不是问题。这是我的代码:

我的HTML

@Model  PCBuild.Models.PCBuildIndexModel
@{
    ViewData["Title"] = "PC-Builder";
}
<asp:HiddenField ID="Selector" runat="server"/>
<div class="container-fluid" style="padding-top: 10px">
    <div class="row">
        <div class="col-sm-6" style="border-right: solid 1px #efefef">
            <div class="container-fluid">
                <form asp-action="SendPcPart" method="post">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>All parts:</h3>
                            <div class="list-group">
                                @foreach (var part in Model.PcParts)
                                {
                                    <a class="list-group-item pcselector" data-href="@part.EAN">@part._Name</a>
                                }
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <h5>Selected part: </h5>
                            <br />
                            <button class="btn-primary">Add</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-sm-6">
            <h3>Selected Items:</h3>
            <ul class="list-group"></ul>
        </div>
    </div>
</div>

这是我的包含AJAX的.js文件:

$(document).ready(function() {
$('.pcselector').click(function () {
    var pcPart = {
        EAN: $(this).data('href')
    };
    console.log(pcPart);

    $.ajax({
        type: "POST",
        url: '/PCBuild/SelectPcPart',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: pcPart,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function(result) {
            console.log(result);
        },
        error: function(result) {
            console.log(result);
        }
    });
});

.pcselector有一个data-heref = "1";所以EAN的值为1.

我的ASP.net Core 2.0控制器:

[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult SelectPcPart([FromForm] PcPart pcPart)
{
    return new JsonResult("Hello response back" + pcPart);
}

我的PcPart课程:

public class PcPart
{
    public int EAN { get; set; }
    public string _Name { get; set; }
    public string _Type { get; set; }
    public string Information { get; set; }
    public List<Propertie> Properties { get; set; }
}

我还将[FromForm]替换为[FromBody],但这没有效果。我总是得到一个空的PcPart类。我也完全删除了它,但这也不起作用。

我也试过这个版本的.js文件:

$(document).ready(function() {
$('.pcselector').click(function () {
    var pcPart = EAN: $(this).data('href');
    console.log(pcPart);

    $.ajax({
        type: "POST",
        url: '/PCBuild/SelectPcPart',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: pcPart,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function(result) {
            console.log(result);
        },
        error: function(result) {
            console.log(result);
        }
    });
});

但这也不起作用。

我得到Click here

的空类的截图

我的控制台Click here

的屏幕截图

固定
我的javascript:

var pcPart = {
        "EAN": $(this).attr('data-href')
    };


data: JSON.stringify(pcPart),

我的控制器:

[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult SelectPcPart([FromBody] PcPart pcPart)
{
    return null;
}

1 个答案:

答案 0 :(得分:0)

来自@Camilo Terevinto的解决方案已经足够,但如果仍然无法正常工作,请尝试使用JSON.stringify()。试试这个

var dto = {
    pcPart: {
        EAN: $(this).data('href')
    }
};
console.log(dto);

$.ajax({
    type: "POST",
    url: '/PCBuild/SelectPcPart',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(dto),
    beforeSend: function(xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    success: function(result) {
        console.log(result);
    },
    error: function(result) {
        console.log(result);
    }
});