基于下拉框选择的动态取加复选框
我有上面的表格。当用户选择表名和权限时，它返回到服务器端，获取所选表的列并将所有列名显示为复选框。当使用selects时，HttpPost将执行，当用户选择Cancel时，返回主页。
我已经为此创建了一个ViewModel：
// Actual EF Model
public partial class TablePermission
{
public int Id { get; set; }
public int UserId { get; set; }
public int PermissionLevelId { get; set; }
public string TableName { get; set; }
public string RestrictViewFields { get; set; }
public string RestrictEditFields { get; set; }
public virtual PermissionLevel PermissionLevel { get; set; }
public virtual User User { get; set; }
}
// View Model for the View
public class TablePermissionsVM
{
public TablePermissionsVM()
{
TablePermission = new TablePermission();
RestrictViewFields = new List<FieldList>();
// Created for trial to see Checkboxes
RestrictViewFields.Add(new FieldList() { FieldName = "UserId", Selected = false });
RestrictViewFields.Add(new FieldList() { FieldName = "fName", Selected = false });
RestrictViewFields.Add(new FieldList() { FieldName = "lName", Selected = false });
RestrictEditFields = new List<FieldList>();
}
public TablePermission TablePermission { get; set; }
public List<FieldList> RestrictViewFields { get; set; }
public IEnumerable<FieldList> RestrictEditFields { get; set; }
}
// Model to save field names & it's selected status
public class FieldList
{
public string FieldName { get; set; }
public bool Selected { get; set; }
}
}控制器更新了：添加了必须调用onChange事件的新操作(FillFields() )方法
[Authorize]
[HttpGet]
public ActionResult TablePermissions(TablePermissionsVM tablePermissionVm)
{
return View(tablePermissionVm);
}
// Action Method to Fill Column names for the List<>.
public ActionResult FillFields(string tableName, string tblPermLevel)
{
// WANT TO RETURN HERE ANOTHER LIST (2 LIST OBJECTS) IN JSON
// restrictView & restrictEdit
var restrictView = DbUtilities.GetColumnNames(tableName);
var restrictEdit = DbUtilities.GetColumnNames(tableName);
return Json(restrictView, JsonRequestBehavior.AllowGet);
}视图-更新后的代码：aDDED绑定的TableName & TableLevelPermission字段，在表被选中的情况下使用的脚本。更新的- aDDED表单ID，脚本方法
@model DataStudio.Models.TablePermissionsVM
using (Html.BeginForm("TablePermissions", "Admin", FormMethod.Post, new { id = "tblPermForm" }) ))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.TablePermission.TableName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="editor-field">
@Html.DropDownListFor(model => model.TablePermission.TableName,
DbUtilities.GetTableNames(), "Select Table",
new { @class = "form-control", @onchange="FillFields()" })
@Html.ValidationMessageFor(model => model.TablePermission.TableName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.TablePermission.PermissionLevelId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="editor-field">
@Html.DropDownListFor(model => model.TablePermission.PermissionLevelId, DbUtilities.GetPermissionLevelList(), "Select Permission Level", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.TablePermission.PermissionLevelId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RestrictViewFields, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="editor-field">
**// NEED TO ADD CHECK BOXES HER RECEIVED THRU SCRIPT**
</div>
</div>
}
<script>
function FillFields() {
var tblName = $('#TablePermission_TableName').val();
var tblPermLevel = $('#TablePermission_PermissionLevelId').val();
//($('tblPermForm').valid()) { ERROR - OBJECT DOESN'T HAVE valid()'
if (tblName != null && tblPermLevel != null) {
$.ajax({
url: '/Admin/FillFields',
type: 'GET',
dataType: "JSON",
data: { TableName: tblName, TablePermLevel: tblPermLevel },
success: function (restrictView) {
$("#RestrictViewFields").html(""); // Clear before appending new ones
$.each(restrictView, function (i, field) {
$("#RestrictViewFields").append(
$('<option></option>').val(field.FieldName).html(field.FieldName))
// WANT TO ADD AS 3 CHECKBOX IN A ROW
});
}
});
}
}
</script>它们是我无法弄清楚的几件事，它们让我感到困惑。主要是，在确保两个下拉框都有值之后，我需要再次为选中的表执行一个"Get“和fetch列名&将这些列显示为复选框。按照我实现复选框的方式，我将在HttpPost中得到适当的选定值，对吧！我哪里错了吗？
当两个下拉列表都被选中时，如何发出Get请求?？
任何帮助都是非常感谢的。提前谢谢。
Update --我开始尝试只使用TableName选择(我希望两个下拉列表都是这样)，但是事件不会发生，并在脚本中转到FillFields()。我哪里出问题了？我尝试了这里的这个逻辑。不明白为什么它不能只被解雇？顺便说一句，这是一个完整的表格，我的意思是，它不是局部的形式。我想填写这2 RestrictXFields中的复选框控件，选择TableName & Permssion复选框&在Save上，将所有的控件发送到Request。
更新：非常感谢，Stephen&Chethan。在您的支持下，我确定了事件未被触发的原因。事件被触发，我可以从db检索列名，HTML部件上的成功没有被更新。斯蒂芬，我还添加了表单Id &按照您的指示尝试了form.valid()，但是我得到的错误脚本不能识别有效的()。在MetaData类中，模型中的两个字段都标记为必需的字段。目前，测试这两个var != null都有效。但是，我喜欢你的有效()选项。
回答 1
Stack Overflow用户
发布于 2017-07-25 23:33:16
根据我的理解，您应该使用ajax调用来获取复选框。
在控制器中创建一个操作方法，该方法接受TableName和TableLevelPermisson下拉列表的选定值。使用这些值来获取
List<FieldList> RestrictViewFields
IEnumerable<FieldList> RestrictEditFields. 并将其用作部分视图的数据/模型。
在下拉列表值更改时，使用ajax调用此操作方法。获取从部分视图返回的HTML，并在DOM中使用它。
当两个下拉列表都被选中时，如何发出Get请求?？
如果您正在使用jQuery:仅用于“jquery中的下拉更改事件”和ajax调用示例。
https://stackoverflow.com/questions/45314209
复制相似问题
腾讯云开发者
