c# - MVC 保存按钮无法将数据添加到数据库
问题描述
我一直在研究 MVC 购物车,试图将数据从 View 页面存储到 DB。但是保存按钮无法像我希望的那样工作,它返回错误警报而不是成功警报。
这是视图模型
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"/> <input type="button" value="Reset" name="reset" class="btn btn-danger" /> </div> </div>
当我单击保存按钮时,它应该返回成功警报消息“项目已成功添加”,但我一直得到的只是错误警报“添加项目有问题”。
解决方案
请检查以下步骤:
为您的表单(.cshtml)提供 id。
@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
}
- 阿贾克斯请求
//试试下面:
var formData = new FormData($('#formId').get(0));
现在通过调试检查数据是否传递给控制器方法(objItemViewModel)的对象。
推荐阅读
- python - 如何使用 namelist() 和 for 循环打开压缩的 csv 文件?
- function - 从 Jenkins 共享库返回的 Groovy LinkedHashMap 被转换为字符串
- c# - 在 Powershell 与 C# 中使用 GetMembers
- go - 想要将映射映射到切片结构
- react-native - React-Navigation:一旦父屏幕重新渲染,如何更改传递给子屏幕的参数?
- git - 从本地提交中检索意外删除的函数到 git
- javafx - FxmlLoader.load() 方法返回 InvocationTargetException
- javascript - 使用Angular2或moment js或javascript从给定的日期对象检测时区缩写
- python - 如何以编程方式访问 Pep8 错误代码列表
- google-cloud-platform - 无法使用 cloudbuild.yaml 配置机密以部署到 cloudrun 以实现对话流 basicauth