ASP.Net Core MVC FormForm 方法接收空值

Question

我有一個模擬服裝網站的應用程序。我嘗試使用用戶在表單中寫入的數據和他們在網站上購買的產品構建我的 C# 對象。產品由一個 JSON 對象表示。我使用 2 個類：一種用於購物車，一種用於產品。

public class Product
    {
        [Key]
        public int id { get; set; }
        public string productName { get; set; }
        public string productPrice { get; set; }

        public string quantity { get; set; }
    }



public class ShoppingCart
    {
        [Key]
        public int? id { get; set; }

        public List<Product> productList { get; set; }

        public string clientName { get; set; }

        public string clientAddress { get; set; }

        public string clientMail { get; set; }
    }

我使用的控制器具有使用 [FromForm] 屬性的“保存”方法。從客戶端綁定對象后，我將其添加到我的數據庫中。問題是我為我的每個屬性獲取“空”值發送到方法的 ShoppingCart 對象。此外，在我的瀏覽器中，數據正確發送到服務器： chrome 中網絡選項卡的屏幕截圖

我使用的控制器如下所示：

[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([FromForm] ShoppingCart s)
        {

           await _db.ShoppingCarts.AddAsync(s);
           await _db.SaveChangesAsync();
            return RedirectToAction("Index");
        }
        [HttpGet("~/ThankYou/Index")]
        public IActionResult Index()
        {
            return View();
        }
        
    }

我的表單 html 是這樣寫的：

        @model ShoppingCart


        <div class="form-group row">
            <div class="col-4">
                <label id="clienId"></label>
            </div>
            <div class="col-6">
                <input asp-for="id" id="idClient" type="hidden" />
            </div>
        </div>

        <div class="form-group row">
            <div class="col-4">
                <label id="clientProds"></label>
            </div>
            <div class="col-6">
                <input asp-for="productList" id="inputProducts" type="hidden" />
            </div>
        </div>



        <div class="form-group row">
            <div class="col-4">
                <label id="clientName"></label>
            </div>
            <div class="col-6">
                <input asp-for="clientName" 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 asp-for="clientAddress" 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 asp-for="clientMail" 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" type="submit">ORDER</button>
            </div>
        </div>
    </form>

還有一個問題是，如果我不使用這段 javascript，客戶端不會再重定向到“ThankYou”頁面：

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


            document.getElementById("inputProducts").value = JSON.stringify(auxArray);

            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",
                
            })
            
        })

Answer 1

這是一個演示工作：Cart.cshtml（您需要更改`productList的綁定，然后您就不需要使用ajax將數據傳遞給控制器​​）​​：

<form method="post" asp-controller="SendItems" asp-action="Save">
<div class="form-group row">
    <div class="col-4">
        <label id="clienId"></label>
    </div>
    <div class="col-6">
        <input asp-for="id" id="idClient" type="hidden" />
    </div>
</div>

<div class="form-group row">
    <div class="col-4">
        <label id="clientProds"></label>
    </div>
    <div class="col-6">

        @for (var i = 0; i < Model.productList.Count(); i++)
        {
            <input type="hidden"  asp-for="@Model.productList[i].id" />
            <input type="hidden" asp-for="@Model.productList[i].productName" />
            <input type="hidden" asp-for="@Model.productList[i].productPrice" />
            <input type="hidden" asp-for="@Model.productList[i].quantity" />
        }
    </div>
</div>



<div class="form-group row">
    <div class="col-4">
        <label id="clientName"></label>
    </div>
    <div class="col-6">
        <input asp-for="clientName" 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 asp-for="clientAddress" 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 asp-for="clientMail" id="inputMail" type="text" />
    </div>
</div>



<div class="form-group row">
    <div class="col-3 offset-4">
        <button class="btn btn-primary" id="orderB"  type="submit" >ORDER</button>
    </div>
</div>
    </form>

控制器（發送項目）：

[HttpPost]
        public async Task<IActionResult> Save(ShoppingCart s)
        {
            return RedirectToAction("Index");
        }
        [HttpGet("~/ThankYou/Index")]
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult Cart()
        {
            ShoppingCart s = new ShoppingCart { id = 1, clientAddress = "address", clientName = "name1", clientMail = "123@123", productList = new List<Product> { new Product { id = 1, productName = "p1", productPrice = "10", quantity = "1" }, new Product { id = 2, productName = "p12", productPrice = "12", quantity = "3" } } };
            return View(s);
        }

結果：