Using checkbox in webgrid MVC3 Razor - how to get row values

Question

I have a webgrid and each row has a checkbox. When the checkbox is clicked I want to somehow get the values of that row to my actionResult method via jQuery Ajax. The actionResult and jQuery Ajax part are not a problem but I don't know how to get those values from a checkbox onclick event.

@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New User", "CreateUser")
</p>
<div class="webgrid-wrapper">
    @model IEnumerable<UserManager.Models.vw_UserManager_Model>
@{
    ViewBag.Title = "Jobs";
    WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");

}
    @grid.GetHtml(
    fillEmptyRows: true,
        tableStyle: "webgrid",
                alternatingRowStyle: "webgrid-alternating-row",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
columns: new[] {
    grid.Column("UserName"),
    grid.Column("salutation"),
    grid.Column("FirstName"),
    grid.Column("LastName"),
    grid.Column("Password"),
    //grid.Column("isactive"),
    //grid.Column(header: "Is logged in?", format: (model) => @Html.Raw("<input type='checkbox' checked='" + ((model.isactive) ? "checked" : "unchecked") + "' />")),  
    grid.Column(header: "Print?", format: @<text><input name="Prints" 
      type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff()" id="chkboxIsActive" /></text>),
    grid.Column("isApproved"),  
    grid.Column("MaxConcurrentUsers"),
    grid.Column("email"),
    grid.Column("group_name"),
   grid.Column("module_name"), 


     grid.Column(header:"Edit", format:@<text><div id="btnEditSelectedRow">
         "@Html.ActionLink("Edit record", "EditUser", "UserManager", new {
         userid = item.userid,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive,
         isapproved = item.IsApproved,
         maxconcurrentusers = item.MaxConcurrentUsers,
         email = item.email, 
         module = item.module_name, 
         group = item.group_name }, null)</div></text>),

    grid.Column(header:"Delete", format:@<text><div id="btnDelSelectedRow">
        "@Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
         userid = item.userid,
         username = item.UserName,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive, 
         email = item.email, 
         module = item.module_name, 
         group = item.group_name }, null)</div></text>)


})
</div>
<script type="text/javascript">
    $(document).ready(function () {

        // Disable checkboxs where a user is not active.
        $("input:not(:checked)").attr("disabled", "disabled");

        // Style tables.
        function jQueryUIStyling() {
            $('input:button, input:submit').button();

            $('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
            $('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
            jQueryTableStyling();
        } // end of jQueryUIStyling

        function jQueryTableStyling() {
            $('.webgrid').addClass('ui-grid-content ui-widget-content');
            $('.webgrid-header').addClass('ui-state-default');
            $('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
        } // end of jQueryTableStyling
    });
</script>
<script type="text/javascript">
    function logUserOff() {
        var answer = confirm('Are you sure you want to save this data?')
        if (answer) {
            return true;
        }
        else {
            return false;
        }
    };
</script>

My checkbox

grid.Column(header: "Print?", format: @<text><input name="Prints" 
      type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff()" id="chkboxIsActive" /></text>),

How would I change my checkbox to pass row values to javascript?

Answer 1

I ended up figuring it out on my own.

grid.Column(header: "Print?", format: @<text><input name="Prints" 
      type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager")', '@item.userid')" id="chkboxIsActive" /></text>),

The onClick function can pass values generated by razor engine as long as you use correct character literals so javascript can parse the strings that your passing.

<script type="text/javascript">
    function logUserOff(url, value) {
        var answer = confirm('Are you sure you want to save this data?')
        if (answer) {
            alert(url + ": " + value);

//            $.ajax({
//               
//            });


            return true;
        }
        else {
            return false;
        }
    };

Used an alert to make sure correct values are passed through. Maybe this can help anyone else who is stuck.