缺少）在参数列表之后，当试图调用 JS function onclick

Question

Im trying to add data to a JSON object, stored in session. I do this with a js function:

<section class="products">
    @foreach (var prod in Model) {
        string path = "~/images/" + prod.ImgURL;
        <article>
            <a href="@Url.Action("InspectProduct","Products", new {productID = prod.Id})">
            <img src="@Url.Content(path)" style="max-width: 75%"></a>

            <h3><a href="@Url.Action("InspectProduct","Products")">@prod.Name</a></h3>
            <h4>@prod.Price,-</h4>
            <a class="btn-add" style="cursor: pointer;" onclick="addToJSONObject(@prod.Id, @prod.Name, @prod.Price, @prod.Info)">Tilføj til kurv</a>
       </article>
     }
</section>

Im using MVC hence the "@" from the Viewbag. When i click the "button" it throws: "Uncaught SyntaxError: missing ) after argument list" on almost every products tag.

It worked fine until i started adding more parameters to the function. Any ideas what could be wrong? I dont seem to be missing any ")" or escapes.

Answer 1

You found a very basic concept called " context switch ".

If you look at this line:

"@Url.Action("InspectProduct","Products")"

You'll find the the first " initiates your html attribute context. It should be ended by another " . However there are four " in between serving other purposes. Namely, they start/end a parameter value context.

There is no way for the interpreter to differentiate those " . Thus, the syntax error.

Please read about the problem and how you would fix it in your programming language. Sometimes it is escaping (eg \" ), sometimes it is using different string literals (eg ' ).

Answer 2

When using Razorviews in ASP.NET MVC, the @ will allow you to write c# code directly into HTML. The call to the view-bag data in the foreach-loop is done with:

addToJSONObject(@prod.Id, @prod.Name, @prod.Price, @prod.Info)

However, this will not insert " or ' Therefore the correct way to use model data as a parameter (if string is required):

addToJSONObject('@prod.Id', '@prod.Name', '@prod.Price', '@prod.Info')