How to pass model property from Razor View to JavaScript function

I have the following in my view

    foreach (var book in @Books)
                <th scope="row">@book.Title</th>
                <th scope="row">@book.Author</th>
                <th scope="row">
                    <button onclick="favouriteBook(@book.Id)">Favourite</button>

And a JavaScript function in a separate file (Which is being correctly loaded as I have tested with a console.log:

function favouriteBook(id) {
    localStorage.setItem("bookId", id); 
    // Later to be a DB, just testing for now. 

However when this function is called by the user clicking on the button, I get an Uncaught SyntaxError: Invalid or unexpected token error. What is wrong here?


Change your button html

<button id="@book.Id" class="favoriteBookBtn" onClick="favouriteBook(">Favourite</button>

But better way is to put the code in @scrips section of your view:

@section Scripts {

$(document).ready(function () {
    $(".favoriteBookBtn").click(function (e) {
...your code