问题描述
我有一个应用程序，其中将一些JSON数据发布到服务器上，然后创建一个对象，稍后将其添加到数据库中。这是通过“ SendItemsController”中的“保存”方法完成的：
[Route("SendItems/Save")]
[ApiController]
public class SendItemsController : Controller
{
private AppDbContext _db;
public SendItemsController(AppDbContext db)
{
_db = db;
}
[HttpPost]
[Consumes("application/json")]
public async Task<IActionResult> Save([FromBody] ShoppingCart s)
{
await _db.ShoppingCarts.AddAsync(s);
await _db.SaveChangesAsync();
return RedirectToAction("Index");
}
[HttpGet("~/ThankYou/Index")]
public IActionResult Index()
{
return View();
}
}
将对象添加到数据库后，我尝试将客户端重定向到“谢谢”页面。
首次启动时，当我按“购物车”页面上的订购按钮时，它将客户端重定向到“ ThankYou”页面，而不触发“保存”方法，但是如果我从“ ThankYou”页面返回到“ Cart”页面然后再次按下按钮，方法被触发，对象被添加到数据库中，并且客户端被重定向到“ ThankYou”页面，正如它应该的那样。我的问题是我应该对我的代码进行什么更改才能使其第一次触发，而不是返回并再次按下订单按钮后。
我将提供我编写的代码。
这是我用来形成JSON对象然后将其发布到服务器的javascript：
var orderB = document.getElementById("orderB");
orderB.addEventListener("click",function () {
var inputName = document.getElementById("inputName").value;
var inputAddress = document.getElementById("inputAddress").value;
var inputMail = document.getElementById("inputMail").value;
var auxArray = [];
for (var i = 0; i < productsAux.length; i++) {
if (productsAux[i]!="") {
auxArray[i-1] = { "productName": productsAux[i].titlu,"productPrice": productsAux[i].pret,"quantity": localStorage.getItem(productsAux[i].titlu) };
}
}
var shoppingCart = {
productList: auxArray,clientName: inputName,clientAddress: inputAddress,clientMail: inputMail
};
$.ajax({
type: "POST",data: JSON.stringify(shoppingCart),url: "senditems/save",contentType: "application/json;charset=utf-8",})
})
这是我的表单的html，我用它来收集来自客户端的名称，地址和电子邮件：
<div class="form-group row">
<div class="col-4">
<label id="clientName"></label>
</div>
<div class="col-6">
<input id="inputName" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label id="clientAddress"></label>
</div>
<div class="col-6">
<input id="inputAddress" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label id="clientMail"></label>
</div>
<div class="col-6">
<input id="inputMail" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-3 offset-4">
<button class="btn btn-primary " id="orderB" asp-controller="SendItems" action="Save">ORDER</button>
</div>
</div>
</form>
解决方法
首先，我不确定您是否提供了整个ajax，因为ajax请求的操作不会让您在后端进行重定向。您只能在ajax函数中进行重定向。
第二，您已经添加了onclick事件，无需添加asp-controller标记帮助程序，它将导致错误的formaction。
第三，项i以0开头，而索引auxArray以-1开头，乘积数组可能无法成功传递到后端。
最后，ajax网址应为：/senditems/save。
这是一个工作示例，如下所示：
型号：
public class ShoppingCart
{
public string clientName { get; set; }
public string clientAddress { get; set; }
public string clientMail { get; set; }
public List<Product> productList { get; set; }
}
public class Product
{
public string productName { get; set; }
public int productPrice { get; set; }
public int quantity { get; set; }
}
查看：
<form>
//....
<div class="form-group row">
<div class="col-3 offset-4">
<button class="btn btn-primary" id="orderB" type="button">ORDER</button>
</div>
</div>
</form>
@section Scripts
{
<script>
var orderB = document.getElementById("orderB");
orderB.addEventListener("click",function () {
var inputName = document.getElementById("inputName").value;
var inputAddress = document.getElementById("inputAddress").value;
var inputMail = document.getElementById("inputMail").value;
var auxArray = [];
for (var i = 0; i < 1; i++) {
auxArray[i] = { "productName": "aaaa","productPrice": 34,"quantity": 3 };
}
var shoppingCart = {
productList: auxArray,clientName: inputName,clientAddress: inputAddress,clientMail: inputMail
};
$.ajax({
type: "POST",data: JSON.stringify(shoppingCart),url: "/senditems/save",//add `/`
contentType: "application/json;charset=utf-8",success: function (res) {
window.location.href = res; //redirect like this
}
})
})
</script>
}
控制器：
[Route("SendItems/Save")]
[ApiController]
public class SendItemsController : Controller
{
[HttpPost]
[Consumes("application/json")]
public async Task<IActionResult> Save([FromBody] ShoppingCart s)
{
return Json("YourRedirectUrl");
}
}
结果：
