asp.net mvc - Fetching and Adding Checkbox dynamically on selection of Dropdown boxes -

i have form above. trying work when user selects table name & permission, goes server side, fetches columns of selected table & display column names check boxes. when use selects save btn, httppost execute , when user selects cancel, return home page.

i have created 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 view public class tablepermissionsvm {      public tablepermissionsvm()     {         tablepermission = new tablepermission();         restrictviewfields = new list<fieldlist>();          // created trial 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 save field names & it's selected status public class fieldlist {     public string fieldname { get; set;  }     public bool selected { get; set; } } } 

controller updated : added new action (fillfields() ) method has called onchange event

       [authorize]     [httpget]     public actionresult tablepermissions(tablepermissionsvm tablepermissionvm)     {         return view(tablepermissionvm);     }      // action method fill column names list<>.     public actionresult fillfields(string tablename, string tblpermlevel)     {         // want return here 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 : added bound fields tablename & tablelevelpermission, script use on event of change of table selected. updated - added form id, script method

       @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 add check boxes 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 add 3 checkbox in row                     });                  }             });         }     }   </script> 

their couple of things not able figure out & confused it. mainly, on making sure both drop down boxes has value, need perform again "get" , fetch column names table selected & display columns check boxes. way have implemented checkboxes, proper selected values in httppost, right ! anywhere wrong ?

how make request when both drop down's selected ??

any highly appreciated. lot in advance.

update started try tablename selection (i want both dropdown), event doesn't occur , go fillfields() in script. going wrong ? tried logic here . can't why doesn't fired ??? btw, full form mean, no partial form in it. want fill check box controls in 2 restrictxfields on selection of tablename & permssion check box & on save btn, send request & save db.

update : lot, stephen & chethan. support, identified cause event not getting triggered. event triggered, able retrieve column names db, html part on success not being updated. stephen, added form id & tried form.valid() instructed, error script doesn't identify valid(). both fields in model marked required in metadata class. currently, testing both var != null works. but, liked valid() option.

per understanding, should fetch checkboxes using ajax call.

create action method in controller accepts selected values of tablename , tablelevelpermisson dropdown. use these values fetch

list<fieldlist> restrictviewfields   ienumerable<fieldlist> restricteditfields.  

and use data/model partial view.

call action method using ajax, on change of dropdown list value. html returned partial view , use in dom.

how make request when both drop down's selected ??

if using jquery: google "dropdown change events in jquery" , ajax call examples.