How to pass return value in Javascript to the Controller

Question

This is my Javascript code that gets the value from the query string

function getUrlVars() {
        var name = [], hash;
        var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < url.length; i++) {
            hash = url[i].split('=');
            name.push(hash[0]);
            name[hash[0]] = hash[1];

            var hid =hash[1];
            return pid;
        }
    }

    var hid = getUrlVars()['pid'];

This is my URL: http://localhost:33454/Product?pid=1

[HttpGet]
    [Route("api/product/getproducts/{pid}")]
    public IActionResult Product(int pid)
    {

        var selectProducts= (from p in _db.Products
                           where p.ProductId == pid
                           select p).ToList();

        return Ok(selectProducts);
    }

This is my AJAX for printing the list to the html

    var $view = $('.table')
    $(function () {
        $.ajax({
            type: 'GET',
            url: '/api/product/getproducts/{pid}',
            datatype: 'json',
            success: function (products) {
                $.each(products, function (i, product) {
                    $view.append('<td class="products">' + product.productName + '</td>', '<td class="products">' + product.productDescription + '</td>');
                });
            }
        });
    });

Are there any issues with my code. Sorry, I know this might be a really simple question to you all. I'm new to programming. Thanks in advance.

Nkosi · Accepted Answer · 2018-06-20 22:24:29Z

1

The API URL is not being constructed properly for the AJAX call.

//...code omitted for brevity

var hid = getUrlVars()['pid'];

//...

var $view = $('.table');
$(function () {
    $.ajax({
        type: 'GET',
        url: '/api/product/getproducts/' + hid, //<<<<
        datatype: 'json',
        success: function (products) {
            $.each(products, function (i, product) {
                $view.append('<td class="products">' + product.productName + '</td>', '<td class="products">' + product.productDescription + '</td>');
            });
        }
    });
});

answered Jun 20, 2018 at 22:24

Nkosi

249k38 gold badges472 silver badges506 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vinxnk Over a year ago

Hi Nkosi, so for my controller that I included the [Route] attribute is not necessary right?

Nkosi Over a year ago

@vinxnk The route is necessary. That route template is what allows the controller action to be called. It defines what the URL should look like. That is what determined that the URL you were calling was incorrect because it did not match the template defined on the controller. Reference Routing to controller actions in ASP.NET Core

Mohammed · Accepted Answer · 2018-06-20 23:50:04Z

Change your code to this.

[HttpPost]
public IActionResult Product(int pid)
{

    var selectProducts= (from p in _db.Products
                       where p.ProductId == pid
                       select p).ToList();

    return Json(selectProducts, JsonRequestBehavior.AllowGet);
}

And this should be:
Replace {ControllerName} with your controller's name with no curly braces
For example: url: '/Clients/Details'

var $view = $('.table')
$(function () {
    $.ajax({
        type: 'POST',
        url: '/{ControllerName}/Product',
        data: JSON.stringify({ pid: hid}),
        dataType: 'json',
        success: function (products) {
            $.each(products, function (i, product) {
                $view.append('<td class="products">' + product.productName + '</td>', '<td class="products">' + product.productDescription + '</td>');
            });
        }
    });
});

Collectives™ on Stack Overflow

How to pass return value in Javascript to the Controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related