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

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事件，現在它可以工作了。