如何将 model 属性从 Razor 查看到 JavaScript ZC1C425268E68385D1AB5074C17A

Question

I have the following in my view

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

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?

Answer 1

Change your button html

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

But much better way is to remove onClick="favouriteBook(this.id)" and use Unobtrusive JavaScript. It is the way of writing JavaScript language in which we properly separate Document Content and Script Content thus allowing us to make a clear distinction between them. This approach is useful in so many ways as it makes the code less error prone, easy to update and to debug.

@section Scripts {
<script>

$(document).ready(function () {
    $(".favoriteBookBtn").click(function (e) {
e.preventDefault();
         var id=this.id;       
...your code
     });
});

</script>
}