View doesn't pass Model to Action using Ajax.ActionLink

Question

my Model

  public class CalculateModel
    {
        public decimal ItemPrice { get; set; }
        public int CategoryID { get; set; }
        public decimal CategoryTax { get; set; }
        public decimal CategoryDuty { get; set; }
        public decimal value { get; set; }
        public decimal fees { get; set; }
        public int weightValue { get; set; }
        public IEnumerable<SelectListItem> CategoriesList { get; set; }
        public IEnumerable<SelectListItem> WeightsList { get; set; }
    }

My Controller:

 public ActionResult Index()
        {

            ViewBag.CategoriesNames = _db.Categories.ToList();
            ViewBag.Weights = _db.Weights.ToList();

            return View();
        }


        public ActionResult _Calculate(CalculateModel model)
        {
             decimal Total;
            model.CategoryTax = _db.Categories.Where(r => r.CategoryID == model.CategoryID).FirstOrDefault().Tax;
            model.CategoryDuty = _db.Categories.Where(r => r.CategoryID == model.CategoryID).FirstOrDefault().Duty;
            var weightfees = model.weightValue*5.5;
            Total = model.ItemPrice +(model.CategoryDuty*model.ItemPrice/100) +(model.CategoryTax*model.ItemPrice/100)+(decimal)weightfees;
            if (Total <100)
            {
                Total = Total+5;
            }
            else
            {
                Total = Total + (Total*5/100);
            }
            var CurrencyChange = _db.Currencies.Where(x=>x.Name == "Dollars").FirstOrDefault().Value;

            string Message = "Total = " + Total + "$ Which equals"+ Total*CurrencyChange+"LE";
            return Content(Message);
        }

my view :

  @model CSP1225.Models.CalculateModel
      @Html.TextBoxFor(m => m.ItemPrice, new { id="price"})
                                        <label class="control-label">Item Type</label>
                                           @{
                                               var Categories = ViewBag.CategoriesNames;}
@Html.DropDownListFor(m => m.CategoryID, new SelectList(Categories, "CategoryID", "CategoryName"), new { id= "SelectedCategory" })
                                                @{var weights = ViewBag.Weights;}
                                                @Html.DropDownListFor(m=> m.weightValue, new SelectList(weights,"WeightID","Name"), new {id="weight"})


    @Ajax.ActionLink("Calculate","_Calculate","Home",Model,new AjaxOptions { UpdateTargetId = "result" },null)                
                                </div>

my problem is when the Ajax.ActionLink is clicked , the model passed to the Controller function became null, i faced this problem before and didn't found a soultion till now, can anybosy help me ???

Answer 1

You should use an Ajax.BeginForm() instead which will post the module correctly.

View

@model CSP1225.Models.CalculateModel

@using(Ajax.BeginForm("_Calculate","Home",new AjaxOptions { UpdateTargetId = "result" }) {
      @Html.TextBoxFor(m => m.ItemPrice, new { id="price"})
                                        <label class="control-label">Item Type</label>
                                           @{
                                               var Categories = ViewBag.CategoriesNames;}
@Html.DropDownListFor(m => m.CategoryID, new SelectList(Categories, "CategoryID", "CategoryName"), new { id= "SelectedCategory" })
                                                @{var weights = ViewBag.Weights;}
                                                @Html.DropDownListFor(m=> m.weightValue, new SelectList(weights,"WeightID","Name"), new {id="weight"})


    <button type="submit">Submit</button>
}      

Then, add an HttpPost attribute to your _Calculate ActionMethod.