c# - How to handle forms with both text boxes and a multiple select list dynamically -

i working on project in mvc has multiple forms on 1 page forms separated different views , called @html.actions main view. of these forms complex , have text-boxes , multiple select lists in them. trying make page dynamic because there such large amount of code reload if page refreshed post or page change. part of main view looks this:

                    <div class="row" style="height:500px">                     <div class="col-lg-3">                         <h3>groups</h3>                         <ul class="nav nav-pills nav-stacked">                             <li><a data-toggle="pill" href="#cregroup"> create group</a></li>                             <li><a data-toggle="pill" href="#modgroup"> modify group</a></li>                             <li><a data-toggle="pill" href="#delgroup"> delete group</a></li>                             <li><a data-toggle="pill" href="#args"> add or remove users/group schedule</a></li>                         </ul>                     </div>                      <div class="container col-lg-8 col-lg-offset-1" style="height:95%;border-radius:70px;border-color:darkblue; border:1px solid">                         <div class="tab-content col-lg-offset-1">                             <div id="cregroup" class="tab-pane active">                                 @html.action("creategroup", "home")                             </div>                             <div id="modgroup" class="tab-pane">                                 @html.action("modifygroup", "home")                             </div>                             <div id="delgroup" class="tab-pane">                                 @html.action("deletegroup", "home")                             </div>                             <div id="args" class="tab-pane">                                 @html.action("args", "home")                             </div>                           </div>                     </div>                 </div> 

i focus on creategroup view/form. form has group name, permission, , type text boxes. has multi select list users put in group in form. controller create group view looks this:

[httpget]     public actionresult creategroup()     {         list<string> u = new list<string>();         object[] users = data.getdatafrmdb("select username `users`;");         if (users != null)         {             foreach (object[] user in users)             {                 u.add((string)user[0]);             }         }         viewbag.gusers = new multiselectlist(u, "username");         return view();     } 

right view looks this: (and picture of rendered below)

##creategroup## <div class="container" style="text-align:center">  <div class="row"> @using (html.beginform(null, null, formmethod.post)) {         <h3>create group</h3>      <div class="col-lg-7">         <div class="row">             <div class="col-lg-6" style="text-align:left">                 <br/>                 <label>group name:</label> <br /><br />                 <label>group type:</label><br /><br />                 <label>group permissions:</label><br /><br />                 <label>server name:</label><br /><br />                 <label>server email:</label><br /><br />              </div>              <div class="col-lg-6" style="text-align:right;">                 <br/>                 @html.textbox("gname", "group name", new { maxlength = 50 })<br /><br />                 @html.textbox("gtype", "group type", new { maxlength = 50 })<br /><br />                 @html.textbox("gpermission", "permissions", new { maxlength = 50 })<br /><br />                  @html.textbox("gserver", "server name", new { maxlength = 50 })<br /><br />                 @html.textbox("gemail", "server email", new { maxlength = 50 })<br /><br />                 <br />              </div>         </div>      </div>     <div class="col-lg-4 col-lg-offset-1">         <label> select users group: </label>         @html.listbox("gusers", viewbag.users multiselectlist,    new { @class = "chzn-select", @style = "width:150px; height:250px" })      </div>     } </div>         <div class="row">             <div class="col-lg-1 col-lg-offset-8">                 <button class="btn btn-primary dropdown-toggle" id="button1" type="button" onclick="group()"> create group(s)</button>              </div>         </div> 

right using ajax handle forms textboxes not seem work when there list box. how post of these values dynamically controller without reloading page? thank in advance.

i figured out. have handle regular json post text boxes tack on list of selected objects array being posted.

here json post:

var gnameinput = $("#gname"); var gserverinput = $("#gserver"); var gemailinput = $("#gemail"); var gtypeinput = $("#gtype"); var gperminput = $("#gperm"); var gusers = $("#gusers"); function group() {     var mylist = []      var gname = gnameinput.val();     var gserver = gserverinput.val();     var gemail = gemailinput.val();     var gtype = gtypeinput.val();     var gperm = gperminput.val(); //add values start of array     mylist.push(gname);     mylist.push(gserver);     mylist.push(gemail);     mylist.push(gtype);     mylist.push(gperm); //add selected values after      $("#gusers > option:selected").each(function () {         mylist.push($(this).val());     });       jquery.ajax({         type: 'post',         datatype: 'json',         contenttype: "application/json; charset=utf-8",         url: 'createg',         data: json.stringify(mylist),         success: function (data) {   //remove of objects list after post             $('#gusers option:contains("' + item + '")').remove();   //confirmation message off success              $('#msgcg').html("sucessfully created group: "+gname);         },         failure: function (errmsg) {             $('#msgcg').html(data.msg);         }     });      return false;// if it's link prevent post  } 

here controller:

        [httppost]     public jsonresult createg(list<string> group)     {         if (group == null)         {             ///break if post failed         }    //assign values base on placed in array , remove after         string name = group[0];         group.removeat(0);         string server = group[0];         group.removeat(0);         string email = group[0];         group.removeat(0);         string type = group[0];         group.removeat(0);         string perm = group[0];         group.removeat(0); //iterate through remainder of users         foreach (string user in group)         {   //do whatever         }          return json(group);     }