CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazor
Lyndon
Lyndon

Reputation: 159

onclick in ASP.NET MVC razor CheckBoxFor not working

I need to assign an onclick event to a CheckBoxFor in ASP.NET MVC razor, but it is never called.

I have something like this, which does not work:

<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"}})

This attempt also doesn't work:

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

This approach leads to the alert being called once when the page is loaded but not when I click on the checkbox:

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

Because of the data- attributes I cannot use a dictionary like this: new {@onclick, "setCompleteStatus('1')"}

By the way, there are no javascript errors displayed in Firefox's console

Upvotes: 7

Views: 49554

Answers (7)

Szynkie
Szynkie

Reputation: 79

Another solution:

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

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

In MVC, use underscore(_) instead of Hyphen(-) for data* attributes

Just pass the html attributes parameter as anonymous object shown below for CheckBoxFor.

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

Upvotes: 9

Bogdan Mates
Bogdan Mates

Reputation: 556

The following code works in MVC5:

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

Upvotes: 1

bitsalsa
bitsalsa

Reputation: 31

I was having a similar issue where the onclick function was not running on IE11, but it was running on Chrome.

What ended up working for me was something like you stated above that you said did not work for you:

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

but you need to make sure that if you declare it using jQuery, you DO NOT also have it in your control definition

@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"}})

Therefore a combination of 

@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"}})

(without the "onclick" attribute) and 

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

might work for you.

Upvotes: 1

Lyndon
Lyndon

Reputation: 159

Well, thanks for your help, guys, but I just found out that one should use the onchange event when dealing with a jquery mobile flipswitch and now it works.

Upvotes: 0

Adiono
Adiono

Reputation: 1044

You can do it by modify your {"onclick", "setCompleteStatus()"} code to {"onclick","setCompleteStatus.call(this)"} and get advantage of this variable. It should be like 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>

Upvotes: 12

Felix
Felix

Reputation: 38112

Try to do:

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

Upvotes: 1

Related Questions