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

如何解决MVC 保存按钮无法将数据添加到 DB

我一直在研究 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);
    }

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,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,autocomplete = "Off" })
    </div>
</div>

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


<div class="col-md-4">
    <div class="form-group">
        Item Price :
        @Html.TextBoxFor(model => model.ItemPrice,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>

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

解决方法

请检查以下步骤：

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
   

   }

2. Ajax 请求

//下面试试：

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

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