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

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 function （正如我用 console.log 测试过的那样，它被正确加载：

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

但是，当用户单击按钮调用此 function 时，我收到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>
}