MVC部分视图和Javascript

Question

我有一个局部视图，它本质上是一个小部件。 我想在同一页面上包含1到'n'之间的内容。

我遇到的问题是我无法在每个脚本中执行javascript。

例如

Index.cshtml

<div>
   @Html.Partial("_ButtonPartialView")
    <br/>
    <br />
   @Html.Partial("_ButtonPartialView")
</div>

_ButtonPartialView.cshtml

<h2>ButtonView</h2>
<button id="foo">
    on
</button>

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/test").Include(
                        "~/Scripts/test.js"));

Layout.cshtml

@Scripts.Render("~/bundles/test")

test.js

$(document).ready(function() {
    $('#foo').click (function() {
        if ($('#foo').html() === 'on') {
            $('#foo').html('off');
        } else {
            $('#foo').html("on");
        }
    });
});

我的问题是，当我单击第一个按钮时，它会在打开和关闭之间正常切换。 当我单击第二个按钮时，什么也没有发生！

我更大的问题是，如果我可以解决这个问题。 我显然希望我的所有部分视图都独立。 例如，我不想单击一个按钮，它们都会触发。 它们都将传递给模型，我需要编写JS来对该模型进行处理并显示信息。

因此，每个小部件都必须独立。

谢谢

Answer 1

如评论中所述，该id必须是唯一的。 如果要按ID引用按钮，则需要生成唯一的ID。

一种更干净的方法是使用类选择器代替$(this)来引用触发事件的按钮实例。

$(".foo").on("click", function(e) {
    var btn = $(this);
    var state = btn.html();
    ...
});

Answer 2

要在动态添加的内容上触发脚本，您需要将事件绑定到文档。 将您的点击事件更改为

$(document).on('click', '#foo', function() {
    if ($('#foo').html() === 'on') {
        $('#foo').html('off');
    } else {
        $('#foo').html("on");
    }
});

然后如另一个答案中所述，将选择器更改为部分特定的