Issues in ajax call in MVC

See more:

MVC

jQuery

Hello,

I am new in MVC. I have one product table which has ProductID, ProductName and ProductRate. I have one dropdown list which has all the ProductName. Now I am trying to select the productname and upon this select, it should fill my textbox with ProductRate. Code is as below but it is not doing anything and no errors. Please help.

<script type="text/javascript">
    function GetPrice(_this) {

        var x = document.getElementById("productID"), selectedValue = x.value;
        alert("_this" + _this.SelectedValue);
        var pid = selectedValue;
        alert(pid);
        var url = '@Url.Action("GetPrice","Sales")';
        alert(url);
              $.ajax({
                type:"POST",
                url: 'Sales/GetPrice',
                contentType: "application/json; charset=utf-8",
                data:  {pid: pid },
                cache:false,
                dataType: json,
                async: true,
                processData:false,
                success: function (data)
                {
                    alert("yay1");
                },
                failure: function (response) {
                    alert("Fail");
                }

        });

    };
</script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
   <fieldset>
  <div class="editor-field">
<div class="editor-label">
            @Html.LabelFor(model => model.ProductId)
        </div>
  @Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.ProductList, "ProductId", "ProductName" ), "Select Product", new { id = "productID", onchange="GetPrice(this);"})                       
            @Html.ValidationMessageFor(model => model.ProductId, "", new { @class = "text-danger" })
            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
        </div>


   <div class="editor-label">
            @Html.LabelFor(model => model.Rate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Rate, new { id = "idRate"})
            @Html.ValidationMessageFor(model => model.Rate)
        </div>\
   </fieldset>
}

Here is my Controller "SalesController.cs" code:

[HttpPost]
      public JsonResult GetPrice(int ProductId)
      {
          return Json("");
      }

What I have tried:

I have tried that code and put the breakpoint in controller part just to see if my ajax call is executing but it doesn't seem to work . alert part above ajax call is working but not inside ajax call. Please help.