如何更新webgrid中的复选框

Question

对不起，我尝试制作 webgrid，在 webgrid 中我放置了复选框。我想更改复选框的值。我在 webgrid 中有 5 行，在第一行，复选框的值成功更改。但在第二行到第五行中，值可以改变。谁能告诉我，我的错误是什么？

这是我的看法

<div id="mygrid">
</div>
<div>
    @{
        var grid = new WebGrid(Model.DataDiriList, rowsPerPage: 15, canPage: true, canSort: true, ajaxUpdateContainerId: "gridContent");
        @grid.GetHtml(
                           tableStyle: "row",
                  alternatingRowStyle: "alt",
                  columns: grid.Columns(
                  grid.Column("ID", format: @<text>  <span  class="display-mode">@item.ID </span> <label id="UserID" class="edit-mode">@item.ID</label> </text>, style: "col1Width" ),
                  grid.Column("Nama", "Nama", format: @<text>  <span  class="display-mode"> <label id="lblNama"  >@item.Nama</label> </span> <input type="text" id="Nama" value="@item.Nama" class="edit-mode" /></text>, style: "col2Width"),
                  grid.Column("Umur", "Umur", format: @<text>  <span  class="display-mode"> <label id="lblUmur"  >@item.Umur</label> </span> <input type="text" id="Umur" value="@item.Umur" class="edit-mode" /></text>, style: "col2Width"),
                  grid.Column(header: "Active", format:@<text> <span  class="display-mode"> <label id="lblActive">@item.ActiveStatus</label> </span> <input id="chkActive" type="checkbox" @((item.Active == true) ? " checked=checked" : "") name="CloseSelling" value="@item.Active" class="edit-mode" onchange="adchange()" /></text>, style: "col2Width"),
                  grid.Column("Action", format: @<text>
                                <button class="edit-user display-mode" >Edit</button>
                                <button class="save-user edit-mode"  >Save</button>
                                <button class="cancel-user edit-mode" >Cancel</button>
                            </text>,  style: "col3Width" , canSort: false)
                 ));
    }
</div>

@section scripts
    {
    <script type="text/javascript">

        $(document).ready(function () {
            $('.edit-mode').hide();
            $('.edit-user, .cancel-user').on('click', function () {
                var tr = $(this).parents('tr:first');
                tr.find('.edit-mode, .display-mode').toggle();
            });
            $(function () {
                $('#chkActive').click(function () {
                    alert($(this).val() + ' ' + (this.checked ? 'checked' : 'unchecked'));
                });
            });

            $(".save-user").on("click", function () {
                var tr = $(this).parent().parent();
                var t = tr.find("#Nama").val();
                var Umur = tr.find('#Umur').val();
                var chkActive = $('#chk').attr('checked') ? "True" : "False";
                var ID = tr.find('#UserID').html();
                alert(chkActive);

                $.ajax({
                    url: '@Url.Action("UpdateUser", "Home")',
                type: "Post",
                data: { CustomerNameId: t, UserID: ID, Umur: Umur,Active: chkActive},
                dataType: 'json',
                success: function (result) {
                    $("#mygrid").html('');
                    $("#mygrid").html(result);
                }
                });

                tr.find("#lblNama").text(t);
                tr.find("#lblUmur").text(Umur);
                tr.find('.edit-mode, .display-mode').toggle();
        });

    });
</script>
    }

这个控制器

public JsonResult UpdateUser(string CustomerNameId, string UserID, string Umur, bool Active)
        {
            var ID = Convert.ToInt32(UserID);
            var IntUmur = Convert.ToInt32(Umur);
            var dd = db.DataDiris.AsQueryable().Where(r => r.ID == ID).Single();
            dd.ID = ID;
            dd.Nama = CustomerNameId;
            dd.Umur = IntUmur;
            dd.Active = Active;

            db.Entry(dd).State = EntityState.Modified;
            db.SaveChanges();
            string message = "Success";
            return Json(message, JsonRequestBehavior.AllowGet);
        }

请帮帮我

谢谢

Answer 1

关于checkbox和mvc webgrid的问题，
你只需要添加一个简短的脚本。

这是解决方案：
在抓取脚本中，一切都是一样的：

var IsDisabled = tr.find("#IsDisabled").val();

&

tr.find("#lblIsDisabled").text(IsDisabled);

&

"IsDisabled": IsDisabled,

到目前为止一切都一样，但您需要添加复选框，如下所示：

grid.Column("IsDisabled", "IsDisabled", format: @<text> <span  class="display-mode"> <label id="lblIsDisabled">@item.IsDisabled</label> </span>  
<input class="edit-mode" id="IsDisabled" name="IsDisabled" type="checkbox" value="@if (item.IsDisabled){<text>True</text>}else{<text>False</text>}" @if(item.IsDisabled){<text>checked</text>}/>
</text>),

相反（！）你也可以像这样使用 mvc html 帮助器：

@Html.CheckBox("ShowOnChart", (bool)item.ShowOnChart, new { @class = "edit-mode", value = item.ShowOnChart })

最终你只需要添加这个脚本：

<script type="text/javascript">
$(function () {
    $('input:checkbox').change(function () {
        if ($(this).attr("checked")) {
            $(this).attr("value", true);
        } else {
            $(this).attr("value", false);
        }
    });
});
$(document).ready(function () {
    $('input[type=checkbox]').each(function () {
        if ($(this).attr("checked")) {
            $(this).attr("value", true);
        } else {
            $(this).attr("value", false);
        }
    });
});
</script>

如果您在页面中有更多复选框并且想要排除它们，请使用：

$('.edit-mode:checkbox').change(...

当收到控制器中的布尔值时，我喜欢去：

bool? isDisabled

如果 ActionResult 不总是使用 isDisabled 输入调用，则更具有代表性。

希望这会有所帮助。