I can't send a value to a Razor View from controller using Jquery and Ajax in C#

Question

What I'm trying to do is to return an object from the controller and read all its values one by one in a razor view. The value is going well from view to controller; the issue is when I try to return it from the controller to view. I'm using ASP.NET, Razor Views (HTML5), AJAX and JQuery. Please, let me know if you need further information about this.

These are my three controls in the view:

        <div class="form-group">
            @Html.LabelFor(model => model.IdProducto, "IdProducto", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("IdProducto", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.IdProducto, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CantidadProducto, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CantidadProducto, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CantidadProducto, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ValorTotal, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ValorTotal, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ValorTotal, "", new { @class = "text-danger" })
            </div>
        </div>

This is my JQuery statement:

    <script type="text/javascript">
        $(function () {
            $('#IdProducto, #CantidadProducto').on('change', function () {
                var IdProducto = $('#IdProducto').val();
                var CantidadProducto = $('#CantidadProducto').val();

                if (CantidadProducto.length > 0) {
                    $.getJSON('@Url.Action("GetProductValue")', { idProducto: IdProducto }, function (data) {
                        $.each(data, function (i, item) {
                            $('#ValorTotal').val(( Number(CantidadProducto) * Number(item.Precio) ));
                        });
                    });
                }
                else {
                    $('#ValorTotal').val(0);
                };
            });
        });
    </script>

And, this is my controller code:

[HttpPost]
        public JsonResult GetProductValue(string idProducto)
        {
            Producto producto = db.Producto.Find(Convert.ToInt32(idProducto));

            if (producto == null)
            {
                producto = new Producto();
            }

            return Json(producto);
        }

Answer 1

$.getJSON fetchs data using http GET request while in your controller your action method is POST

You can change it to HttpGet or use $.post method