在选择下拉框时动态获取和添加复选框

Question

我有上面的表格。我正在尝试在用户选择 Table 名称和权限时工作，它返回到服务器端，获取所选 table 的列并将所有列名称显示为复选框。当用户选择 Save btn 时，HttpPost 将执行，当用户选择 Cancel 时，return 返回主页。

我为此创建了一个 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);
    }

View - UPDATED CODE：TableName 和 TableLevelPermission 的绑定字段，我在 [=] 发生变化时使用的脚本50=] 选中。 已更新 - 添加了表单 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" 并获取所选 table 的列名称并将列显示为复选框。我实现复选框的方式，我将在 HttpPost 中获得正确选择的值，对！我哪里错了吗？

如何在两个下拉列表都被选中时发出获取请求？？

非常感谢任何帮助。非常感谢。

Update 我开始尝试只选择 Table 名称（我想要两个下拉列表），但是事件没有发生并转到 FillFields()在脚本中。我哪里错了？我从 here 尝试了这个逻辑。不明白为什么它不被解雇？？？顺便说一句，这是一个完整的形式，我的意思是，它们不是部分形式。我想在选择 TableName & Permssion 复选框和保存 btn 时填充这 2 个 RestrictXFields 中的复选框控件，将所有内容发送到请求并保存到数据库。

更新：非常感谢，Stephen 和 Chethan。在您的支持下，我确定了事件未触发的原因。事件被触发，我能够从数据库中检索列名，成功的 HTML 部分没有被更新。 Stephen，我还添加了表单 ID 并按照您的指示尝试了 form.valid()，但我收到错误脚本无法识别 valid()。 Model 中的两个字段在 MetaData class 中都标记为 Required。目前，测试 var != null 都有效。但是，我喜欢你的 valid() 选项。

Answer 1

据我了解，您应该使用 ajax 调用获取复选框。

在您的控制器中创建一个操作方法，它接受 TableName 和 TableLevelPermisson 下拉列表的选定值。使用这些值来获取

List<FieldList> RestrictViewFields  
IEnumerable<FieldList> RestrictEditFields.

并用作 data/model 到您的局部视图。

在更改下拉列表值时使用 ajax 调用此操作方法。获取从部分视图返回的 HTML 并在您的 DOM.

中使用它

如何在两个下拉列表都被选中时发出获取请求？？

If you are using jQuery: Just google for "dropdown change events in jquery" and ajax call examples.

在选择下拉框时动态获取和添加复选框

Fetching and Adding Checkbox dynamically on selection of Dropdown boxes

checkbox

asp.net-mvc

http-get

dynamic

razor