How to put a jQuery click event on a checkbox in a grid in ASP.NET MVC 2

Question

I am displaying a list of data in the following manner; Surname Forename Email Address Email Distribution Ops Manager Sign Off Admin Inputter

<% foreach (var item in Model.Users) { %>

    <% Html.RenderPartial("UserSummary", item); %>

<% } %>

</table>
<div class="pager">
    <%: Html.PageLinks(Model.PagingInfo, x=> Url.Action("List", new { page = x })) %>
</div>

and in the partial view;

   <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=Model.UserId }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=Model.UserId })%> |
            <%: Html.ActionLink("Delete", "Delete", new { id=Model.UserId })%>
        </td>
        <td>
            <%: Model.Surname %>
        </td>
        <td>
            <%: Model.Forename%>
        </td>
        <td>
            <%: Model.EmailAddress%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.EmailDistributionListFlag) %>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.OperationsManagerFlag)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.SignOffManager)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.AdministratorFlag)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.InputterFlag)%>
        </td>
     </tr>

I want to put a click event on each checkbox, so when the checkbox is clicked I can do a database update. However I do not appear to have a unique client name for each checkbox. So I would like to know how to put the click event on the checkbox, and how do I know which user row has been clicked in relation to the checkbox.

At the time of writing, the header columns are not being displayed in the above question. The partial view that you can see is placed with a foreach loop. — arame3333
– arame3333, Commented Aug 9, 2010 at 7:43

Yakimych · Accepted Answer · 2010-08-09 12:21:40Z

3

Try to set the checkbox id this way:

Html.CheckBoxFor(x => x.EmailDistributionListFlag, new { id = "checkBoxEmailDistributionListFlag" })

And then you can access it by jquery:

$("#checkBoxEmailDistributionListFlag").click(function(){ ... });

Update:

You missed a few brackets in your js:

$(document).ready(function ()
                  {
                      $("#checkBoxEmailDistributionListFlag").click(function ()
                                         {
                                             alert("done!");
                                         }) // <-- Those were missing
                  });

And make sure you have jquery included.

Update2

To quickly create checkboxes with uniques Ids and bind a function:

Html.CheckBoxFor(x => x.EmailDistributionListFlag, new
                         {
                             id = "checkBoxEmailDistributionListFlag_" + Model.UserId,
                             onclick = "EmailClickFunc(" + Model.UserId + ");"
                         })

And you can define your EmailClickFunc in js:

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

edited Aug 9, 2010 at 12:21

answered Aug 9, 2010 at 7:45

Yakimych

17.8k7 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

arame3333 Over a year ago

I am not sure how I know with this click event what the UserId is. In any case I made the change and I put in the click event at the end of the partial view, and nothing happened; <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $("#checkBoxEmailDistributionListFlag").click(function () { alert("done!"); }); //]]> </script>

Yakimych Over a year ago

Check the generated Html first. Does the checkbox for EmailDirstributionListFlag has it's 'id' attribute set?

arame3333 Over a year ago

It does. However the ID is the same on each row (this is in a grid after all). I suspect the ID should be unique, but how do I make this happen?

arame3333 Over a year ago

As an experiment I tried with 1 row, but that did not work either.

Yakimych Over a year ago

Is it the UserId you are talking about? You can append it to the checkBox id value: Html.CheckBoxFor(x => x.EmailDistributionListFlag, new { id = "checkBoxEmailDistributionListFlag_" + Model.UserId }). As a quick solution you can also try setting the 'click' function directly: Html.CheckBoxFor(x => x.EmailDistributionListFlag, new { id = "checkBoxEmailDistributionListFlag", click = "EmailClickFunc(" + Model.UserId + ")" }), and define your function in js: <script type="text/javascript">function EmailClickFunc(id) { alert(id); } </script>

|

Collectives™ on Stack Overflow

How to put a jQuery click event on a checkbox in a grid in ASP.NET MVC 2

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related