首页 > 解决方案 > JavaScript 在 ASP .Net MVC 实体框架中不起作用

问题描述

我正在尝试使用 click 方法将按钮与某些 API 连接起来,但它不起作用。我网站其余部分的 JS 工作正常,但这似乎不喜欢我。 PS 我是 asp .net 的新手,我正在使用教程,所以如果以某种方式完成任何事情,因为这就是如何它在教程中完成。这是我创建问题的页面代码,

@model IEnumerable<GigHub.Models.Gig>
@{
    ViewBag.Title = "Home Page";
}

<ul class="gigs">
    @foreach(var gig in Model)
    {
        <li>
            <div class="date">
                <div class="month">
                    @gig.DateTime.ToString("MMM")
                </div>
                <div class="day" style="background:#f7f7f7;color:#333;font-size:20px;padding:6px 12px;">
                    @gig.DateTime.ToString("d ")
                </div>
            </div>
            <div class="details">
                <span class="artist">
                    @gig.Artist.Name
                </span>
                <span class="genre">
                    @gig.Genre.Name
                </span>
                <button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
            </div>
        </li>
    }
</ul>

@section scripts
{
    <script>
        $(document).ready(function () {
            $("js-toggle-attendence").click(function (event) {
                var button = $(event.target);
                $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
                    button.removeClass("btn-default").addClass("btn-info").text("Going");
                }).fail(function () {
                    alert("Error Occured!");
                });
            });
        });
    </script>
}`

这是似乎有问题的 div

<div class="details">
                    <span class="artist">
                        @gig.Artist.Name
                    </span>
                    <span class="genre">
                        @gig.Genre.Name
                    </span>
                    <button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
                </div>

这是脚本

@section scripts
    {
        <script>
            $(document).ready(function () {
                $("js-toggle-attendence").click(function (event) {
                    var button = $(event.target);
                    $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
                        button.removeClass("btn-default").addClass("btn-info").text("Going");
                    }).fail(function () {
                        alert("Error Occured!");
                    });
                });
            });
        </script>
    }`

标签: javascriptasp.net-mvcdom-events

解决方案


对于 jQuery,如果您想提及一个类,请使用 .

如果要提及 elementID,请使用符号 #

在您的代码中,您错过了符号 。在行中

$("js-toggle-attendence")

要更正它,请更改为

$(".js-toggle-attendence")

推荐阅读