skip to Main Content

I am trying to append an item to the SQL table but when I press the save button nothing happens. The reset button works but not the Save. Nothing is showing in the database either. Basically, I don’t understand why the buttons act as if there was no code attached to it. No Error message or crash shows up either.

View

@model BudgetAmazon.ViewModel.ItemViewModel
@{
    ViewBag.Title = "Item";
}

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSave").click(function () {
            SaveItem();
        });
        $("#btnReset").click(function () {
            ResetItem();
        });
    });

    function ResetItem() {
        $("#CategoryId").val("1");
        $("#ItemCode").val("");
        $("#ItemName").val("");
        $("#Description").val("");
        $("#ItemPrice").val("0");
        $("#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,
            type: 'POST',
            contentType: false,
            processDate: false,
            data: formDate,
            url: '/Item/Index',
            success: function (data) {
                if (data.success) {
                    alert(data.Message);
                    ResetItem();
                }
                
            },
            error: function (data) {
                alert('There is a problem adding items.');
            }
        });
    }
</script>
<div class="container">
    <div class="col-md-4">
        <div class="form-group">
            Category :
            @Html.DropDownListFor(model => model.CategoryId, new SelectList(Model.CategorySelectListItem, "Value", "Text"),
            new { @class = "form-control"})

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

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

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

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

        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            Image Path :
            @Html.TextBoxFor(model => model.ImagePath, 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" id="btnReset"/>
    </div>
</div>

Controller

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BudgetAmazon.Models;
using BudgetAmazon.ViewModel;

namespace BudgetAmazon.Controllers
{
    public class ItemController : Controller
    {
        private BudgetAmazonEntities3 objBudgetAmazonEntities;
        public ItemController()
        {
            objBudgetAmazonEntities = new BudgetAmazonEntities3();

        }
        // GET: Item
        public ActionResult Index()
        {
            ItemViewModel objItemViewModel = new ItemViewModel();
            objItemViewModel.CategorySelectListItem = (from objCat in objBudgetAmazonEntities.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(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;
            objBudgetAmazonEntities.Items.Add(objItem);
            objBudgetAmazonEntities.SaveChanges();

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

ViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BudgetAmazon.ViewModel
{
    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 HttpPostedFileBase ImagePath { get; set; }
        public IEnumerable<SelectListItem> CategorySelectListItem { get; set; }
    }
}

2

Answers


  1. I think the problem is you have made a typo mistake while giving the forma data. Try changing "formDate" to "formData". I have attached the picture to show where to.
    enter image description here

    Login or Signup to reply.
  2. As far as I know, your url may require something like .html file extension. Try to revise like url: "/Item/index.html, and see if the request success or not.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search