MVC 保存按钮无法将数据添加到数据库

Question

我一直在研究 MVC 购物车，试图将数据从视图页面存储到数据库。但是保存按钮无法像我希望的那样工作，它返回错误警报而不是成功警报。

这是视图模型

    public class ItemViewModel
    {
        public Guid ItemId { get; set; }
        public int CategoryId { get; set; }
        public string ItemCode { get; set; }
        public string ItemName { get; set; }
        public string Description { get; set; }
        public decimal ItemPrice { get; set; }
        public HttpPostedFile ImagePath { get; set; }
        public IEnumerable CategorySelectListItem { get; set; }
    }
    
    

这是控制器

private ECartDBEntities objECartDbEntities;
    public ItemController()
    {
        objECartDbEntities = new ECartDBEntities();
    }
    // GET: Item
    public ActionResult Index()
    {
        ItemViewModel objItemViewModel = new ItemViewModel();
        objItemViewModel.CategorySelectListItem = (from objCat in objECartDbEntities.Categories
                                                   select new SelectListItem()
                                                   {
                                                       Text = objCat.CategoryName,
                                                       Value = objCat.CategoryId.ToString(),
                                                       Selected = true
                                                   });
        return View(objItemViewModel);
    }

    [HttpPost]
    public JsonResult Index(ItemViewModel objItemViewModel)
    {
        string NewImage = Guid.NewGuid() + Path.GetExtension(objItemViewModel.ImagePath.FileName);
        objItemViewModel.ImagePath.SaveAs(filename: Server.MapPath("~/Images/" + NewImage));

        Item objItem = new Item();
        objItem.ImagePath = "~/Images/" + NewImage;
        objItem.CategoryId = objItemViewModel.CategoryId;
        objItem.Description = objItemViewModel.Description;
        objItem.ItemCode = objItemViewModel.ItemCode;
        objItem.ItemId = Guid.NewGuid();
        objItem.ItemName = objItemViewModel.ItemName;
        objItem.ItemPrice = objItemViewModel.ItemPrice;
        objECartDbEntities.Items.Add(objItem);
        objECartDbEntities.SaveChanges();

        return Json(data: new { Success = true, Message = "Item is added successfully." }, JsonRequestBehavior.AllowGet);
    }

这是查看页面

        
        $(document).ready(function () {
            $("#btnSave").click(function () {
                SaveItem();
            });
        });
    
        function ResetItem() {
            $("#CategoryId").val("");
            $("#ItemCode").val("");
            $("#ItemName").val("");
            $("#Description").val("");
            $("#ItemPrice").val("");
            $("#ImagePath").val("");
        }
    
        function SaveItem() {
            var formData = new FormData;
            formData.append("CategoryId", $("#CategoryId").val());
            formData.append("ItemCode", $("#ItemCode").val());
            formData.append("ItemName", $("#ItemName").val());
            formData.append("Description", $("#Description").val());
            formData.append("ItemPrice", $("#ItemPrice").val());
            formData.append("ImagePath", $("#ImagePath").get(0).files[0]);
    
    
            $.ajax({
                async: true,
                dataType: 'JSON',
                type: 'POST',
                contentType: false,
                processData: false,
                url: '/Item/Index',
                data: formData,
                success: function (data) {
                    if (data.Success) {
                        alert(data.Message);
                        ResetItem();
                    }
                },
                error: function () {
                    alert("There is a problem with adding item.");
                }
            });
        }
    
<div>
<div class="col-md-4">
    <div class="form-group">
        Category :
        @Html.DropDownListFor(model => model.CategoryId, new SelectList(Model.CategorySelectListItem, dataValueField: "Value", dataTextField:"Text"),
       htmlAttributes: new { @class = "form-control"})
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        Item Code :
        @Html.TextBoxFor(model => model.ItemCode, htmlAttributes: new { @class = "form-control", autocomplete = "Off"})
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        Item Name :
        @Html.TextBoxFor(model => model.ItemName, htmlAttributes: new { @class = "form-control", autocomplete = "Off" })
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        Description :
        @Html.TextBoxFor(model => model.Description, htmlAttributes: new { @class = "form-control", autocomplete = "Off" })
    </div>
</div>


<div class="col-md-4">
    <div class="form-group">
        Item Price :
        @Html.TextBoxFor(model => model.ItemPrice, htmlAttributes: new { @class = "form-control", autocomplete = "Off" })
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        Image :
        @Html.TextBoxFor(model => model.ImagePath, htmlAttributes: new { type = "file", @class = "form-control" })
    </div>
</div>

    <div>
        <input type="button" value="Save" name="save" class="btn btn-primary" id="btnSave"/>
        &nbsp;
        <input type="button" value="Reset" name="reset" class="btn btn-danger" /> 
    </div>

</div>

当我点击 save 按钮时，它应该返回成功警报消息“项目添加成功”，但我得到的只是错误警报“添加项目有问题” .

Answer 1

请检查以下步骤：

1. 为您的表单提供 id (.cshtml)。

   @using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { @id = "formId", @enctype = "multipart/form-data" }))

   {

   //enctype is given above as you have mentioned about Image files
   
   //Your UI elements here
   

   }

1. Ajax 请求

//试试下面：

 var formData = new FormData($('#formId').get(0));

现在通过调试检查数据是否传递给控制器​​方法（objItemViewModel）的对象。