Question

我有一个webgrid，每行都有一个复选框。单击复选框时，我想以某种方式通过jQuery Ajax将该行的值传递给我的actionResult方法。 actionResult和jQuery Ajax部分不是问题，但我不知道如何从复选框onclick事件中获取这些值。

@{
    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>

我的复选框

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

如何更改复选框以将行值传递给javascript？

Answer 1

我最终自己搞清楚了。

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>),

只要您使用正确的字符文字，onClick函数就可以传递由razor引擎生成的值，因此javascript可以解析传递的字符串。

<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;
        }
    };

使用警报确保传递正确的值。也许这可以帮助其他被困的人。

在webgrid中使用复选框MVC3 Razor - 如何获取行值

1 个答案: