javascript - 无法从 json 返回的复选框中读取选中的值
问题描述
我的 Web 应用程序有一个显示用户的下拉列表,我想要的是,当字段更改发生时,它会将一组复选框更新为真或假,具体取决于存储在数据库中的值。
我的控制器
public IActionResult Admin(string message) {
EditUser euModel = new EditUser();
List<EditUser> editUser= new List<EditUser> {
new EditUser { UserID = 0, Username = "--Select User--"},
new EditUser { UserID = 1, Username = "Unchecked"},
new EditUser { UserID = 2, Username = "Checked"}
};
ViewBag.haveAccess = HaveAccess;
List<EditUser> HaveAccess = new List<EditUser> {
new EditUser { DepartmentID = 1, DepartmentName = "IT", HaveAccess=false},
new EditUser { DepartmentID = 2, DepartmentName = "Financial", HaveAccess=false},
new EditUser { DepartmentID = 3, DepartmentName = "Sales", HaveAccess=false}
};
var SelectedValues = HaveAccess.Where(a => a.HaveAccess == true).Select(u => u.DepartmentID).ToArray();
ViewBag.haveAccess = new MultiSelectList(HaveAccess, "DepartmentID", "DepartmentName", SelectedValues);
return View(euModel);
}
我的观点
<form asp-controller="Admin" asp-action="HaveAccess" method="post" class="form-horizontal" role="form">
<div class="alert-danger" asp-validation-summary="ModelOnly"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<label asp-for="Username" class="control-label" value=""></label>
<select asp-for="UserID" class="form-control" id="changeid"
asp-items="@(new SelectList(ViewBag.editUser, "UserID", "Username"))"></select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<ul asp-for="haveAccess" class="control-label" id="haveAccess">
@foreach (var item in (new SelectList(ViewBag.haveAccess, "DepartmentID", "DepartmentName", "HaveAccess")))
{
<li class="checkbox-label">
<div class="checkbox">
@Html.CheckBox("HaveAccess", @item.Selected)
@Html.Label("HaveAccess", @item.Text)
</div>
</li>
}
</ul>
</div>
</form>
我的 js 更改为 changeid(用户 ddl)
<script type="text/javascript">
$(document).ready(function () {
$("#changeid").change(function () {
var url = '@Url.Content("~/")' + "Admin/GetAccess";
var ddlsource = "#changeid";
$("#haveAccess").hide();
var items = " ";
$.getJSON(url, { UserID: $(ddlsource).val() }, function (data) {
$("#haveAccess").empty();
$.each(data, function (i, HaveAccess) {
items +=
"<li class='checkbox-label'>" +
"<div class='checkbox'>" +
"<input id='HaveAccess_" + HaveAccess.value + "' name='HaveAccess_" + HaveAccess.value + "' type='checkbox' " + "checked='" + HaveAccess.selected + "'/>" +
"<label for='HaveAccess_" + HaveAccess.value + "'>" + HaveAccess.text + "</label>" +
"</div>" +
"</li>";
});
$("#haveAccess").html(items);
$("#haveAccess").show();
});
})
})
</script>
JsonResult GetAccess
public JsonResult GetAccess(string UserID) {
List<EditUser> HaveAccess = new List<EditUser>();
//Getting Data from Database
con.Open();
string ua_query = "select gu.deptid as DepartmentID, d.department as DepartmentName , gu.have_access as Have_Access " +
"from it_materials_users u " +
"inner join it_materials_gu gu on u.id = gu.userid " +
"inner join it_materials_dept d on d.id = gu.deptid " +
"where u.id = '" + UserID + "'";
OracleCommand ua_cmd = new OracleCommand(ua_query, con);
OracleDataAdapter ua_da = new OracleDataAdapter(ua_cmd);
DataTable ua_dt = new DataTable();
ua_da.Fill(ua_dt);
foreach (DataRow ua_dr in ua_dt.Rows) {
HaveAccess.Add(new EditUser {
DepartmentID = Convert.ToInt16(ua_dr["DepartmentID"]),
DepartmentName = Convert.ToString(ua_dr["DepartmentName"]),
HaveAccess = Convert.ToBoolean(ua_dr["Have_access"])
});
}
con.Close();
var SelectedValues = HaveAccess.Where(a => a.HaveAccess == true).Select(u => u.DepartmentID).ToArray();
return Json(new MultiSelectList(HaveAccess, "DepartmentID", "DepartmentName", SelectedValues));
}
我的加载页面工作正常,但是当我更改用户的值时,js 触发器和 JsonResult GetAccess 按预期工作。但是,即使 sql HaveAccess 的返回为 false,浏览器上的所有复选框也会始终被选中。
有人可以指出我做错了什么吗?
在此先感谢您的帮助。
问候
解决方案
即使 sql HaveAccess 的返回为 false,浏览器上的所有复选框也始终被选中。
要解决上述问题,请修改以下代码以checked
根据HaveAccess.selected
值设置复选框的属性。
$.getJSON(url, { UserID: $(ddlsource).val() }, function (data) {
console.log(data);
$("#haveAccess").empty();
$.each(data, function (i, HaveAccess) {
var ischecked = HaveAccess.selected ? "checked" : "";
//console.log(ischecked);
items +=
"<li class='checkbox-label'>" +
"<div class='checkbox'>" +
"<input id='HaveAccess_" + HaveAccess.value + "' name='HaveAccess_" + HaveAccess.value + "' type='checkbox' " + ischecked + "/>" +
"<label for='HaveAccess_" + HaveAccess.value + "'>" + HaveAccess.text + "</label>" +
"</div>" +
"</li>";
});
$("#haveAccess").html(items);
$("#haveAccess").show();
});
推荐阅读
- python - 如何使用openpyxl按值比较两个无序列并打印每一行的结果?
- python-3.x - 如何在python中将列表打印为矩阵
- visual-c++ - Catch 22 等待外部应用程序完成处理并在完成前意外取消它
- python - Python 无法识别有效的 RegEx 条目
- c# - WPF 中的弹出窗口无法打开
- sql - 如何在 Oracle SQL 中按顺序匹配当前和前几个月的日期?(例如 1-jun as monday 与 4th jun monday 匹配)
- r - 在 RStudio 中使用 quit() 而不提示保存对代码的更改
- vue.js - this.$vuetify.goTo(0) 在 vuetify 的 v-navigation-drawer 中不起作用
- java - 在 GridView 中添加多个文本视图
- r - 如何从 csv 文件创建一个数据框,其文本由管道 I 分隔?