Click here to Skip to main content
14,694,553 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Updated 9-Apr-18 22:06pm
Comments
Bryian Tan 9-Apr-18 10:14am
   
I think because the method parameter name not matching. Try change data: {pid: pid }, to data: {ProductId: pid }
F-ES Sitecore 9-Apr-18 10:19am
   
As said above you have an issue with a mismatch in parameter names. When using ajax it's good to learn how you can debug potential issues

https://forums.asp.net/t/1982579.aspx?Using+the+browser+s+dev+tools+to+diagnose+ajax+problems+and+other+things+
Dhyanga 9-Apr-18 10:50am
   
Thank you Bryian for prompt response. I tried the parameter name as ProductId but no change. :(
F-ES Sitecore 9-Apr-18 11:00am
   
Try a different content type

contentType: "application/x-www-form-urlencoded; charset=UTF-8"
Dhyanga 9-Apr-18 11:59am
   
No it did't work either.
Dhyanga 9-Apr-18 12:47pm
   
Thank you again for the ajax debug information. I can see the issue and now able to fix it. Thanks a lot.
Kornfeld Eliyahu Peter 9-Apr-18 15:24pm
   
AS you are in Razor you should write @onchange me think...
Kornfeld Eliyahu Peter 9-Apr-18 15:25pm
   
I also would say a look on the result HTML may help...

1 solution

I think issue is with the AJAX function
$.ajax({
               type:"POST",
               url: 'Sales/GetPrice',
               contentType: "application/json; charset=utf-8",
               data:  {"ProductId": pid },
               dataType: "json",
               success: function (data)
               {
                   alert("Success!");
               },
               failure: function (response) {
                   alert("Fail!");
               }
       });

I have corrected
data:  {"ProductId": pid }
and
dataType: "json"

If still issue persist please check in browsers developer console and share the detail.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900