下拉列表选择保存 id 而不是名称

Question

我是 MVC 和 jQuery 的新手。以下问题涉及两个表，Product 和 QuoteDetail。我正在使用 DropDownListFor 允许用户根据名称从产品表中选择产品。选择 Name 后，QuoteDetail 记录中的两个文本框将分别填充 ProductId 和 Price。所有这一切都很好。我的问题是，当我保存 QuoteDetail 记录时，它将 ProductId 保存在 ProductName 字段而不是 ProductName 中。我看不出如何摆脱在 SelectList 中使用 ProductId，因为我需要它来执行查找。如何解决这个问题并保存 ProductName？

DropDownListFor 的读取方式如下：

 @Html.DropDownListFor(model => model.ProductName, new SelectList(ViewBag.ProductData, "ProductId", "Name"), new { htmlAttributes = new { @id = "ProductName", @class = "ProductList" } });

查找的jQuery如下：

<script type="text/javascript">
            $(document).ready(function () {
                $(document).on("change", '[id*="ProductName"]', function () {
                    $.post("/QuoteViewModel/GetProduct", { pId: $(this).val() }, function (data) {
                        $("[id*='ProductId']").val(data.ProductId);
                        $("[id*='Price']").val(data.Price);
                    });
                });
              });
            </script>

查找的控制器动作如下：

[HttpPost]
        public ActionResult GetProduct(int pId)
        {
            var data = db.Products.Find(pId);
            return Json(data);
        }

请注意，产品名称在 Product 表中称为“Name”，在 QuoteDetail 表中称为“ProductName”。任何帮助将不胜感激。

用于保存的代码如下：

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(QuoteViewModel qvm,[Bind(Include = "CustomerId,SalesRep,FirstName,LastName,Company,Address1,Address2,City,State,PostalCode,WorkPhone,CellPhone,Email,Discount,PaymentTerms")] Customer customer,
                                 [Bind(Include = "QuoteId,QuoteDetailId,ProductId,ProductName,Amount,ListPrice,Discount,Price")] List<QuoteDetail> quoteDetails,
                                 [Bind(Include = "QuoteId,CustomerId,Subtotal,Tax,Total,QuoteDate,GoodUntil,QuoteSent,DateApproved,DateOrdered")] Quote quote)

        {

            if (ModelState.IsValid)
            {

                foreach (var quoteDetail in qvm.QuoteDetail)
                {

                    QuoteDetail qd = db.QuoteDetails.FirstOrDefault(o => ((o.QuoteId == quoteDetail.QuoteId) && (o.QuoteDetailId == quoteDetail.QuoteDetailId)));

                    if (qd != null)
                    {
                        qd.ProductId = quoteDetail.ProductId;
                        qd.ProductName = quoteDetail.ProductName;
                        qd.Amount = quoteDetail.Amount;
                        qd.ListPrice = quoteDetail.ListPrice;
                        qd.Discount = quoteDetail.Discount;
                        qd.Price = quoteDetail.Price;
                    }
                    else
                    {
                        db.QuoteDetails.Add(quoteDetail);
                    }

                }

                quote.QuoteId = qvm.QuoteId;
                quote.GoodUntil = qvm.GoodUntil;
                quote.Discount = qvm.Discount;
                quote.DateApproved = qvm.DateApproved;
                quote.DateOrdered = qvm.DateOrdered;
                quote.Discount = qvm.Discount;
                quote.QuoteDate = qvm.QuoteDate;
                quote.QuoteSent = qvm.QuoteSent;
                quote.Subtotal = qvm.Subtotal;
                quote.Tax = qvm.Tax;
                quote.Total = qvm.Total;

                customer.CustomerId = qvm.CustomerId;
                customer.Address1 = qvm.Address1;
                customer.Address2 = qvm.Address2;
                customer.CellPhone = qvm.CellPhone;
                customer.City = qvm.City;
                customer.Company = qvm.Company;
                customer.Discount = qvm.Discount;
                customer.Email = qvm.Email;
                customer.FirstName = qvm.FirstName;
                customer.LastName = qvm.LastName;
                customer.PaymentTerms = qvm.PaymentTerms;
                customer.PostalCode = qvm.PostalCode;
                customer.SalesRep = qvm.SalesRep;
                customer.State = qvm.State;
                customer.WorkPhone = qvm.WorkPhone;

                db.Entry(quote).State = EntityState.Modified;
                db.Entry(customer).State = EntityState.Modified;

                bool saveFailed;
                do
                {
                    saveFailed = false;
                    try
                    {
                        db.SaveChanges();
                    }
                    catch (DbUpdateConcurrencyException ex)
                    {
                        saveFailed = true;
                        var objContext = ((IObjectContextAdapter)db).ObjectContext;
                        // Get failed entry
                        var entry = ex.Entries.Single();
                        // Now call refresh on ObjectContext
                        objContext.Refresh(RefreshMode.ClientWins, entry.Entity);


                    }

                } while (saveFailed);

                return RedirectToAction("Index");
            }
            return View(qvm);
        }
    }
}

修改 DropDownListFor：

@Html.DropDownListFor(model => model.ProductName, new SelectList(ViewBag.ProductData, "ProductId", "Name"), new { htmlAttributes = new { name = "ProductId", @id = "ProductName", @class = "ProductList" } });

Answer 1

这是因为当您提交表单时，所有相应表单元素中的值都会映射到包含它们的元素的 name 属性，而不是 id 属性。

您需要确保按照预期在元素上显式设置 name 属性，以确保它们绑定了正确的值：

<!-- If you wanted the value from this bound as "ProductId", you would need to set the
     name attribute in the htmlAttributes object -->
@Html.DropDownListFor(model => model.ProductName, ..., new { ...  name="ProductId" } });

根据您的需要，您可能更容易不自行对 DropDownList 进行任何更改，并允许它直接绑定到您的 ProductId 属性，然后在您的 AJAX 调用完成时设置您的名称：

@Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.ProductData, "ProductId", "Name"), new { @class = "ProductList" } });

与：

$(document).on("change", '[id*="ProductId"]', function () {
     $.post("/QuoteViewModel/GetProduct", { pId: $(this).val() }, function (data) {
         $("[id*='ProductId']").val(data.ProductId);
         // This could be a hidden element within your form
         $("[id*='ProductName']").val(data.ProductName);
         $("[id*='Price']").val(data.Price);
     });
});