Question

我需要将一个onclick事件分配给ASP.NET MVC razor中的CheckBoxFor，但它永远不会被调用。

我有类似的东西，但不起作用：

<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错误

Answer 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>

Answer 2

在MVC中，对数据*属性

使用underscore(_)而不是Hyphen(-)

只需将html属性参数作为匿名对象传递给CheckBoxFor。

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

Answer 3

尝试：

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

Answer 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>

可能适合你。

Answer 5

以下代码适用于MVC5：

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

Answer 6

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

在ASP.NET MVC剃须刀CheckBox中onclick不起作用

6 个答案: