javascript - MVC 部分 View 和 Javascript

Question

我有一个局部 View ，它本质上是一个小部件。我希望在同一页上有 1 到 'n' 个这样的内容。

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

例如

索引.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"));

布局.cshtml

@Scripts.Render("~/bundles/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();
    ...
});