ASP.NET MVC 剃须刀 CheckBoxFor 中的 onclick 不起作用答案

【问题标题】：onclick in ASP.NET MVC razor CheckBoxFor not workingASP.NET MVC 剃须刀 CheckBoxFor 中的 onclick 不起作用
【发布时间】：2014-06-13 18:42:44
【问题描述】：

我需要为 ASP.NET MVC 剃须刀中的 CheckBoxFor 分配一个 onclick 事件，但它从未被调用。

我有这样的东西，但不起作用：

<script type="text/javascript">
    function setCompleteStatus() {
        alert("setCompleteStatus called");
    }
</script>

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"onclick","setCompleteStatus()"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

这个尝试也不起作用：

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

这种方法导致alert 在页面加载时被调用一次，但在我点击复选框时不会被调用：

<script type="text/javascript">
    $(document).ready(
        $("#p1isCompleted").click(
            alert("setCompleteStatus called");
        )
    );
</script>

由于data- 属性，我不能使用这样的字典：new {@onclick, "setCompleteStatus('1')"}

顺便说一下，Firefox 的控制台中没有显示 javascript 错误

【问题讨论】：

标签： javascript jquery asp.net-mvc razor

【解决方案1】：

您可以通过将{"onclick", "setCompleteStatus()"} 代码修改为{"onclick","setCompleteStatus.call(this)"} 并利用this 变量来实现。应该是这样的：

@Html.CheckBoxFor(m => m.Process.IsComplete,
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"},
                     {"onclick","setCompleteStatus.call(this)"},
                     {"data-role", "flipswitch"},
                     {"data-on-text", "complete"},
                     {"data-off-text", "incomplete"},
                     {"data-wrapper-class", "custom-size-flipswitch"}})

<script type="text/javascript">
    function setCompleteStatus() {
        alert(this.checked);
    }
</script>

【讨论】：

【解决方案2】：

在 MVC 中，使用 underscore(_) 而不是 Hyphen(-) 用于 data* 属性

只需将 html 属性参数作为 CheckBoxFor 的匿名对象传递如下所示。

 @Html.CheckBoxFor(m => m.Process.IsComplete, 
              new {
                   @id="p1isCompleted", 
                   @onclick="setCompleteStatus()", 
                   @data_role="flipswitch",
                 }

【讨论】：

【解决方案3】：

尝试做：

$(document).ready(function() {
    $("#p1isCompleted").click(function() {
        alert("setCompleteStatus called");
    });
});

【讨论】：

这仅在我不使用 jquery 的数据属性使复选框成为翻转开关时才有效 ([link]api.jquerymobile.com/flipswitch)

【解决方案4】：

我遇到了类似的问题，即 onclick 功能没有在 IE11 上运行，但它在 Chrome 上运行。

最终对我有用的是你上面所说的对你不起作用的东西：

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

但您需要确保如果您使用 jQuery 声明它，您的控件定义中也不会包含它

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"onclick","setCompleteStatus()"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

因此结合

@Html.CheckBoxFor(m => m.Process.IsComplete, 
                  new Dictionary<string, object>{
                     {"id", "p1isCompleted"}, 
                     {"data-role", "flipswitch"}, 
                     {"data-on-text", "complete"}, 
                     {"data-off-text", "incomplete"}, 
                     {"data-wrapper-class", "custom-size-flipswitch"}})

（没有“onclick”属性）和

<script type="text/javascript">
    $("#p1isCompleted").click(
        function setCompleteStatus() {
            alert("setCompleteStatus called");
        }
    );
</script>

可能对你有用。

【讨论】：

【解决方案5】：

以下代码适用于 MVC5：

$('#checkboxId').click(function () {
    //add code here
 });

【讨论】：

【解决方案6】：

好吧，谢谢你们的帮助，伙计们，但我刚刚发现在处理 jquery 移动翻转开关时应该使用 onchange 事件，现在它可以工作了。

【讨论】：

【解决方案7】：

另一种解决方案：

@Html.CheckBoxFor(x => item.Atribute, new Dictionary<string, object>{
   {"onclick", String.Format("yourFunction.call(this, '{0}')", item.Id)} 
})

【讨论】：