I have This code in a C# MVC 4 VS2012 project. I need to be able to update the shopping cart using jSON data with JQuery/AJAX, i'm using jqGrid to display the data and pulling the shopping cart items from SQL. I'm new ASP.NET MVC 4 and am having some difficulties incorporating AJAX, jSON, and jqGrid into the mix.

I've searched Google  and I'm not understanding how to do this - I see many solutions using PHP and ASPX, but i'm not sure how to translate these to my C#/MVC 4 project. I've read the documentation for Ajax and tried a few things such as @ajax.actionlink and new AjaxOptions { UpdateTargetId = myDivIneedToUpdate} but i'm not sure how to implement these into the MVC solution.

If someone could point me in the right direction I would appreciate it. All of my code is on github at the link above - or github , user=jbeans99 , repo= MVC4_OSU_SportStore....

Thanks in advance!

Also, I believe I should be returning partial views in my controller as I just want the page to refresh the data for the category the user chooses; just haven't got to that part yet.

My controller looks like this: 

using System;
using System.Linq;
using System.Web.Mvc;
using MvcApp.AjaxResponses;
using MvcApp.GridModels;
using MvcApp.Models;

namespace MvcApp.Controllers
{
    public class HomeController : Controller
    {
        private SportsStoreEntities db = new SportsStoreEntities();

        [HttpGet]
        public ActionResult Index()
    {
       return View();
    }

           // I think I should be returning a partial view here
    [HttpGet]
    public ActionResult Chess()
    {
        return View();
    }

    [HttpPost]
    public ActionResult GetAllProducts(JqGridSettings gridSettings)
    {
        int totalPages;
        int totalRecords;
        var allProducts = DatabaseDAL.GetAllProductModels();

        var results =
            jqGridDataManager.GetGridData<ProductModel>(gridSettings,
                                                        allProducts,
                                                        out totalPages,
                                                        out totalRecords);
        JqGridResult result = new JqGridResult()
        {
            Page = gridSettings.PageIndex,
            Records = totalRecords,
            Total = totalPages,
            Rows = results.ToList()
        };

        return Json(result, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult GetChessProducts(JqGridSettings gridSettings)
    {
        int totalPages;
        int totalRecords;
        var allProducts = DatabaseDAL.GetChessProductModels();

        var results =
            jqGridDataManager.GetGridData<ProductModel>(gridSettings,
                                                        allProducts,
                                                        out totalPages,
                                                        out totalRecords);
        JqGridResult result = new JqGridResult()
        {
            Page = gridSettings.PageIndex,
            Records = totalRecords,
            Total = totalPages,
            Rows = results.ToList()
        };

        return Json(result, JsonRequestBehavior.AllowGet);
    }

    public ActionResult PostInput_Ajax(int productId)
    {
        var response = new DefaultAjaxResponse();

        try
        {
            return Json(GetSuccessInputResponse(productId));
        }
        catch (Exception)
        {
            response.AddFeedback(DefaultAjaxResponse.AjaxResponseStatusType.Error, "Input was failed! ");
            return Json(response);
        }
    }

    private string GetSuccessInputResponse(int productId)
    {
        Product selectedProduct = DatabaseDAL.GetProductByProductID(productId);
        return string.Format("This product is added to cart: {0}; {1}; {2:C}",
            selectedProduct.Name, selectedProduct.Description, selectedProduct.Price);

        }

    }
}

My index.cshtml looks like this: 

@model MvcApp.Models.ProductModel

@{
    ViewBag.Title = "Index";
}

@section MainHeaderContentPlaceHolder
{
    

        @Html.Partial("Header")
    

}

 id="checkoutDiv">
     style="margin:1.5em; width:30%;">
         style="font-weight: bold; color: blue; font-size: large"">Check out
         style="color:darkgreen">Please enter your details, and we'll ship your goods right away!
        

             style="">Ship to
             style="border: 1px; width: 60%;">
                
                    Name:
                     type="text" id="textboxName" />
                
                        
        


        

             style="">Address
             style="border: 1px; width: 60%;">
                
                    Line 1:
                     type="text" id="textboxLine1" />
                
                
                    Line 2:
                     type="text" id="textboxLine2" />
                
                
                    Line 3:
                     type="text" id="textboxLine3" />
                
                
                    City:
                     type="text" id="textboxCity" />
                
                
                    State:
                     type="text" id="textboxState" />
                
                
                    Zip:
                     type="text" id="textboxZip" />
                
                
                    Country:
                     type="text" id="textboxCountry" />
                
                        
        


        

             style="">Option
             style="border: 1px; width: 60%;">
                
                     type="checkbox" id="checkboxoption">Gift wrap these items

                
                        
        


    
    

     id="buttonComplete" style="margin-left: 1.5em; margin-top: 5px">Complete order