我目前正在开发一个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;
}
答案 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);
}
});