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

Question

I'm currently working on a ASP.net core 2.0 web app. And I want to parse a selected product id to the controller trough AJAX. In the controller I want to store it trough session or something. So far I can get a connection from AJAX to my Controller but my parameter is always null. The connection between my .js file and the Controller is not the problem. Here is my code:

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

This is my .js file containing the AJAX:

$(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);
        }
    });
});

The .pcselector has a data-heref = "1"; So the EAN has a value of 1.

My ASP.net Core 2.0 Controller:

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

My PcPart class:

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

I also replaced the [FromForm] with [FromBody] but that has no effect. I always get a empty PcPart class. I also removed it completely but that doesn't work either.

I also tried this version of my .js file:

$(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);
        }
    });
});

But that doesn't work either.

A screenshot of the empty class i get Click here

A screenshot of my console Click here

FIXED
My javascript:

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


data: JSON.stringify(pcPart),

My Controller:

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

Answer 1

The solution from @Camilo Terevinto is enough but if still not working then try using JSON.stringify(). Try this out

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