Add a client-side checkbox clicked handler to Razor view

Question

The following markup generates an input of type checkbox with an id="IsRecurring" when a Razor view is sent to the browser.

<div class="editor-label">
    @Html.LabelFor(model => model.IsRecurring)
</div>

<div class="editor-field">
    @{
        @Html.EditorFor(model => model.IsRecurring)
    }
</div>

I need to show/hide other markup block, based on the checked state of the checkbox.

Which is the most MVC3 way to do it?

My plan is to go with adding the following script above the div:

<script type="text/javascript">
    $("#IsRecurring").click(function () {
        do show hide;
    });
</script>

Where is the appropriate place in my View markup, to place the script? Is there a better way I can reference IsReccuring checkbox, rather then knowing what Id it's going to have in advance?

Dungdungan

Answer 1

how hide/show is a behavior I would use script, adding a class in checkbox:

@Html.CheckBoxFor(model => model.IsRecurring, new {@class "recurring"})


//event
$(".recurring input:checkbox").click(function () {
                   //hide/show
                });

Lowney

there is no need to use new class since Razor engine binds the checkbx to the model thus gives id of IsRecurring to the checkbox – Goral

Where does the event processing logic go in the view? Does it even meter? How would I reference an element via ID in particular. I don't have a class of checkboxes, therefore using a class in a mistake in my case. – Dungdungan

Answer 2

You could try like this:

@Html.CheckBoxFor(model => model.IsRecurring, new {onchange = "checkedChanged"})

//JS
var checkedChanged = function () {
    alert("checkedChanged");
}

Begotten

older IEs than IE9 don't recognize onchange event AFAIK – Goral

As I mentioned, I am willing to use an unobtrusive approach to separate client scripting logic from a document model. Also, my question included "where in the view should JS go"? – Dungdungan

This worked for us. Maxim, we put our javascript in an external .js file linked with a script tag. – Munson

Answer 3

You can also try:

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

Amyamyas