CODEWITHSUNDEEP
asp.net-mvchtml.actionlinkurl.action
Brian Crist
Brian Crist

Reputation: 814

How to format action link pass parameter in mvc?

I have a trouble with action link as text in mvc .

  function ListProduct() {
            $.get('@Url.Action("ListProduct", "Product")')
                 .done(function (data) {
                     var json = JSON.parse(data.result);
                     $.each(json, function (idx, obj) {
                        $("#tb_product tbody").append(
                        '<tr>' +
                        ' <td>' + obj.CATEGORY_NAME + '</td>' +
                        ' <td><a href="@Url.Action("Detail", "Product", new { id = '+ obj.PRODUCT_ID + ' })">' + obj.PRODUCT_NAME + '</a></td>' +' </tr>');
                        });
                    });
        }

But seem it's not working, it's get error too many charaters in character literal at '+ obj.PRODUCT_ID + ' . Thank you see it.

Upvotes: 1

Views: 2144

Answers (2)

Chris Pratt
Chris Pratt

Reputation: 239320

Razor code (@Url.Action(...)) runs server-side, while JavaScript runs client-side, long after the server has already done it's work, returned a response, and moved on to other things. As a result, you can't pass a JavaScript variable into a Razor method, as that JavaScript variable doesn't even exist as a thing yet.

If you need to include the value as part of the actual URL path, then you can perhaps construct the path manually. For example:

'<a href="@Url.Action("Detail", "Product")'+ obj.PRODUCT_ID + '">' + obj.PRODUCT_NAME + '</a>'

In other words, server-side, @Url.Action("Detail", "Product") is evaluated an returns something like /product/detail/. Then, client-side, in your JavaScript, all you're doing is just concatenating the product id onto this existing string, resulting in something like /product/detail/xxxxxx.

Upvotes: 2

toddmo
toddmo

Reputation: 22416

I think this is just "level confusion" about what's generated by mvc and what is generated by javascript. Mvc doesn't use string concatenation to construct it's helper method calls. In this case it uses the open and close parenthesis of @Url.Action to parse out the method call from the surrounding text. Sticking string concatenation in the middle of that makes the mvc code parse fail.

The error your getting is from mvc as it tries to process the @Url.Action and fails because it's not expecting string concatenation in the middle of a call it.

In my fix here, see that 

@Url.Action("Detail", "Product", new { id = obj.PRODUCT_ID })

is pure c# code. It's purely and only processed by the server, not by javascript.

I don't know how your serving this code, but you can't just serve a javascript file from an mvc project and expect it to work. It has to be served from a controller method that returns a view. That view can contain this code. But if your client side page references this by script url and it just downloads it, mvc server methods won't work even if the script is on the same web site as all the controller stuff.

    $("#tb_product tbody").append(
      "<tr>" +
      " <td><a href='@Url.Action("Detail", "Product", new { id = obj.PRODUCT_ID })'> @obj.PRODUCT_NAME </a></td>" +
      " </tr>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions