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

Question

我有一个如上所述的表单。我试图当用户选择表名&权限，它回到服务器端，获取所选表的列&显示所有列名称为复选框。当使用选择保存btn时，HttpPost将执行，当用户选择取消时，返回主页。

我创建了一个视图模型为这样：

// 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事件

 [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); 
    } 

视图中添加新的动作（FillFields（））方法 - 更新代码：aDDED TableName的绑定字段& TableLevelPermission，我用于Table Selected更改事件的脚本。 修订 - 新增的表单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> 

他们是两件事情，我无法弄清楚&感到困惑吧。主要是，确保两个下拉框都有价值，我需要再次执行一个“获取”和获取列表名称列表&显示列作为复选框。 我已经实现了复选框的方式，我将在HttpPost中正确选择值，正确！我在哪里错了吗？

如何在下拉菜单中选择时获取请求？

任何帮助，高度赞赏。提前致谢。

更新我开始尝试只使用TableName选项（我希望为这两个下拉列表），但事件不会发生并在脚本中转到FillFields（）。我哪里错了？我试过here这个逻辑。不明白为什么它不会被解雇？ 顺便说一句，这是一个完整的形式，我的意思是，他们没有部分形式。我想在这2个RestrictXFields中选择表格名称& Permssion复选框&上的复选框控件保存btn，全部发送到请求&保存到db。

更新：谢谢很多，斯蒂芬&切坦。在您的支持下，我确定了未引发事件的原因。事件被触发，我能够从数据库检索列名，成功的HTML部分没有被更新。斯蒂芬，我也加了表格Id &尝试form.valid（）按照你的指示，但我得到的错误脚本不识别有效（）。这两个模型中的字段在MetaData类中都标记为必需。目前，测试两个var！= null的作品。但是，我喜欢你有效（）选项。