如何將 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>
}