如何将模型属性从 Razor 视图传递给 JavaScript 函数

Question

我的观点如下

@{
    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>
    }
}

还有一个单独文件中的 JavaScript 函数（正如我使用 console.log 测试过的那样，该函数已正确加载：

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

但是当用户点击按钮调用这个函数时，我得到一个Uncaught SyntaxError: Invalid or unexpected token error.这里有什么问题？

Answer 1

更改您的按钮 html

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

但更好的方法是删除 onClick="favouriteBook(this.id)" 并使用 Unobtrusive JavaScript。这是编写 JavaScript 语言的方式，在这种方式中，我们适当地分离了文档内容和脚本内容，从而使我们能够清楚地区分它们。这种方法在很多方面都很有用，因为它使代码不易出错、易于更新和调试。

@section Scripts {
<script>

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

</script>
}