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

Question

I am working on a project in MVC which has multiple forms on one page but the forms are separated as different views and are called as @Html.actions from the main view. Some of these forms are complex and have text-boxes and multiple select lists in them. I am trying to make this page be completely dynamic because there is such a large amount of code to reload if the page is refreshed by a post or page change. Part of the main view looks like 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 from 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 would like to focus on my CreateGroup view/form. This form has group name, permission, and type as text boxes. It also has a multi select list with users to be put in the group in the form. The controller for the Create Group view looks like this:

[HttpGet]
    public ActionResult CreateGroup()
    {
        List<string> u = new List<string>();
        object[] users = data.getDataFrmDB("Select username From `users`;");
        if (users != null)
        {
            foreach (object[] user in users)
            {
                u.Add((string)user[0]);
            }
        }
        ViewBag.GUsers = new MultiSelectList(u, "Username");
        return View();
    }

Right now the view looks like this: (and a picture of it rendered is 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 for Group: </label>
        @Html.ListBox("GUsers", ViewBag.Users as 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 now I am using ajax to handle the forms with only textboxes but it does not seem to work when there is a list box. So how would I post all of these values dynamically to the controller without reloading the page? Thank you in advance.

Answer 1

I figured it out. You have to handle it like a regular json post with only text boxes but tack on the list of selected objects to the array being posted.

Here is the 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 all the values to the start of the array
    myList.push(Gname);
    myList.push(Gserver);
    myList.push(Gemail);
    myList.push(Gtype);
    myList.push(Gperm);
//add all the 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 all of the objects from the 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 a link to prevent post

}

Here is the controller:

        [HttpPost]
    public JsonResult CreateG(List<string> group)
    {
        if (group == null)
        {
            ///break if the post failed
        }
   //assign values base on where they were placed in array and 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 the remainder of users
        foreach (string user in group)
        {
  //do whatever
        }

        return Json(group);
    }