如何更新的WebGrid复选框 [英] how to update checkbox in webgrid
问题描述
原谅我，我尽量让的WebGrid中的WebGrid我把复选框。我想改变复选框的值。我有5行中的WebGrid，在第一排，复选框成功的价值变动。但在两排，直到五，值可以改变。可有人告诉我，我有什么错？
excuse me, i try to make webgrid, in webgrid i put checkbox. i want to change value of checkbox. i have 5 row in webgrid, in first row, value of checkbox success to change. but in row two until five, the value can change. can some one tell me, what my mistake?
这是我的看法。
<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);
}
请帮我
感谢
推荐答案
只是解决了复选框的问题和MVC的WebGrid，结果
你只需要添加一个简短的脚本。
just solved the issue of checkbox and the mvc webgrid,
you just need to add a short script.
这是解决方案：结果
在抢东西的脚本都是一样的：
this is the solution:
in the grab script things are all the same:
var IsDisabled = tr.find("#IsDisabled").val();
＆安培;
tr.find("#lblIsDisabled").text(IsDisabled);
＆安培;
"IsDisabled": IsDisabled,
到目前为止，所有的相同，但你需要添加的复选框，像这样：
so far its all the same, but you need to add the checkbox, like so:
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辅助，像这样（！）：
instead(!) you can also use the mvc html helper like so:
@Html.CheckBox("ShowOnChart", (bool)item.ShowOnChart, new { @class = "edit-mode", value = item.ShowOnChart })
最后你需要的是添加此脚本：
eventually all you need is to add this script:
<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>
如果您在页面更加复选框和要排除他们只需使用：
if you have more checkboxes in the page and you want to exclude them just use:
$('.edit-mode:checkbox').change(...
在控制器我喜欢去接受布尔时：
when receiving the bool in the controller i like going:
bool? isDisabled
刚要更重presentable如果的ActionResult并不总是与isDisabled输入调用。
just to be more representable if the ActionResult is not always called with the isDisabled input.
希望这有助于。
这篇关于如何更新的WebGrid复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
