无法从我的 AJAX 发布请求中获取数据

Question

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

我的 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; }
}

我还用[FromBody] 替换了[FromForm]，但这没有效果。我总是得到一个空的 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;
}

Answer 1

@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);
    }
});