Rehan Khan Rehan Khan - 9 months ago 32
Javascript Question

JavaScript not firing method in the controller

I'm trying for the following code to fire an Action method in the controller.

function updateSalary() {
var salary = $('#basicSalary').val();
var figure = $('#allowance').val();
url: '@Url.Action("updateSalary","salary")',
type: "GET",
dataType: "JSON",
data: { salary: basicsalary, figure: allowance },
success: function (add) {


@Html.DropDownListFor(model => model.allowance, Model.allowances, "--please choose an option--", new { @class = "form-control", @onchange = "updateSalary()" })


public ActionResult updateSalary (int salary, string figure)
if (figure == "Transport")
allowance trans = hc.allowances.First(x => == figure);
if (trans != null)
salary = +Convert.ToInt32(trans.amount);
throw new excep("Record not found");

return Json(salary,JsonRequestBehavior.AllowGet);

should get added to
field on the webpage when user selects the
dropdownlist. I've put a breakpoint on starting braces of
Action method to check if javaScript is firing it in the controller or not when I change the selection in
dropdownList. It is not firing. I can't figure out why. Could someone see why?


Some typos here:

data: { salary: basicsalary, figure: allowance }

should probably be:

data: { salary: salary, figure: figure }

given the names of the variables you declared at the beginning of your updateSalary javascript function.

In order to track this kind of problems I would recommending you using the developer toolbar of your browser. For example if you are using Google Chrome you could click F12 to activate it and then in the Console tab look for javascript errors. Also when dealing with AJAX queries like you do, you could look at the Network tab which will show you all requests sent to the server as well as the corresponding response. This could give you a good indication where the problem might be.