MVC Jquery add to form and ajax to controller

Question

I have the following form in my view

@using (Html.BeginForm("VMInstallCreate", "Scripts", FormMethod.Post, new { role = "form", encType = "multipart/form-data", id = "form_submit" }))
                    {
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <strong>Client</strong>

                                    @Html.DropDownListFor(a => a.SelectedClientId, Model.Clients, "Select Client", new { @class = "form-control m-b" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>Host Instance IP</strong>

                                    @Html.EditorFor(model => model.IP, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.IP)
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>Host Instance User</strong>

                                    @Html.EditorFor(model => model.User, new { htmlAttributes = new { @class = "form-control" } })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>
                                        Host Instance Password
                                    </strong>

                                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
  
                                </div>
                            </div>
                        </div>
                        <div id="vmDetails">
                            <div class="row" id="1">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <strong>VM Name</strong>

                                        <input type="text" class="form-control" placeholder="" id="vmName1">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <strong>Disk 1 Size</strong>

                                        <input class="touchspin1" type="text" value="" name="vmDisk1" id="vmDisk1">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <strong>RAM</strong>

                                        <input class="touchspin1" type="text" value="" name="vmRAM1" id="vmRAM1">
                                        
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <strong>Number of CPU</strong>

                                        <input class="touchspin1" type="text" value="" name="vmCPU1" id="vmCPU1">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a href="#" class="btn btn-primary" id="AddVM"><i class="fa fa-plus"></i> Add Another VM</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">

                                    <button class="btn btn-primary" type="submit"><i class="fa fa-floppy-o"></i> Create</button>
                                    <button>
                                </div>
                            </div>
                        </div>
                    }

And this page has the below java script

<script type="text/javascript">
        $(document).ready(function () {
            $("#AddVM").click(function () {
                var count = $("#vmDetails").children().last().attr("id");
                count++;
                var html =
                    '<div class="row" id="' + count + '">' +
                    '<div class="col-md-3">' +
                    '<div class="form-group">' +
                    '<strong>VM Name</strong>' +
                    '<input type="text" class="form-control" placeholder="" id="vmName' + count + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-3">' +
                    '<div class="form-group">' +
                    '<strong>Disk 1 Size</strong>' +
                    '<input class="touchspin1" type="text" value="" name="vmDisk' + count + '" id="vmDisk' + count + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-3">' +
                    '<div class="form-group">' +
                    '<strong>RAM</strong>' +
                    '<input class="touchspin1" type="text" value="" name="vmRAM' + count + '" id="vmRAM' + count + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-3">' +
                    '<div class="form-group">' +
                    '<strong>Number of CPU</strong>' +
                    '<input class="touchspin1" type="text" value="" name="vmCPU' + count + '" id="vmCPU' + count + '">' +
                    '</div>' +
                    '</div>' +
                    '</div>';
                $('#vmDetails').append(html);
            });

            $("#form_submit").submit(function (e) {


                var form = $(this);
                

                var url = form.attr('action');

                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize(), // serializes the form's elements.
                    success: function (data) {
                        if (data != null) {
                            window.open(data, '_blank');
                        }
                    }
                });

                e.preventDefault(); // avoid to execute the actual submit of the form.
            });
        });
    </script>

The user is able to add additional vm's to the div, this part works fine.

I have the below model for this page

public class VMInstall
    {
        public int SelectedClientId { get; set; }
        public IEnumerable<SelectListItem> Clients { get; set; }
        public string Initials { get; set; }
        public string IP { get; set; }
        public string User { get; set; }
        public string Password { get; set; }

        //[DataType(DataType.MultilineText)]
        //public string VMDetails { get; set; }
        public List<VMDetails> VMDetails { get; set; }


        public VMInstall()
        {
            Clients = Common.GetClients();
            IP = "10.27.50.200";
            User = "root";
            Password = "92dT8C9Dnk";
        }
    }

    public class VMDetails
    {
        public string VMname { get; set; }
        public int disk1size { get; set; }
        public int memorysize { get; set; }
        public int numCPU { get; set; }

        public VMDetails()
        {
            disk1size = 60;
            memorysize = 8;
            numCPU = 2;
        }
    }

How do i using Jquery, add the inputs of the vmdetails to the form before its submitted? Eg i need to add to the List of VMDetails in VMInstall from the input fields?

Answer 1

So managed to get this kind of working. And issue with the view refreshing

View

    <script type="text/javascript">
        $(document).ready(function () {
            $(".touchspin1").TouchSpin({
                buttondown_class: 'btn btn-white',
                buttonup_class: 'btn btn-white'
            });
            $("#AddVM").click(function () {
                var form = $("#form_submit");
                $.ajax({
                    type: "POST",
                    url: "/Scripts/VMInstallAddVM",
                    data: form.serialize(), // serializes the form's elements.
                    success: function (data) {
                        if (data != null) {
                        }
                    }
                });
            });
            
        });
    </script>

                    @using (Html.BeginForm("VMInstallCreate", "Scripts", FormMethod.Post, new { role = "form", encType = "multipart/form-data", id = "form_submit" }))
                    {
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.AntiForgeryToken()

                                    @Html.ValidationSummary(true)

                                </div>
                            </div>
                        </div>
                        @*<div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <strong>Client Initials (USED in VM names) eg Scott Salisburry = SSH</strong>

                                        @Html.EditorFor(model => model.Initials, null, new { @class = "form-control m-b" })
                                        @Html.ValidationMessageFor(model => model.Initials)
                                    </div>
                                </div>
                            </div>*@
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <strong>Client</strong>

                                    @Html.DropDownListFor(a => a.SelectedClientId, Model.Clients, "Select Client", new { @class = "form-control m-b" })
                                    @Html.ValidationMessageFor(model => model.SelectedClientId)
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>Host Instance IP</strong>

                                    @Html.EditorFor(model => model.IP, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.IP)
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>Host Instance User</strong>

                                    @Html.EditorFor(model => model.User, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.User)
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <strong>
                                        Host Instance Password
                                    </strong>

                                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Password)
                                </div>
                            </div>
                        </div>
                        <div id="vmDetails">
                            @{
                                var vmInstall = (CWMVC5.Models.VMInstall)ViewBag.vMInstall;
                            }

                            @for (int i = 0; i < vmInstall.VMDetails.Count; i++)
                            {
                                <div class="row" id="1">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <strong>VM Name</strong>
                                            @Html.TextBoxFor(m => m.VMDetails[i].vmName, new { @class = "form-control" })

                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <strong>Disk 1 Size</strong>
                                            @Html.TextBoxFor(m => m.VMDetails[i].vmDisk, new { @class = "touchspin1" })

                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <strong>RAM</strong>
                                            @Html.TextBoxFor(m => m.VMDetails[i].vmRAM, new { @class = "touchspin1" })

                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <strong>Number of CPU</strong>
                                            @Html.TextBoxFor(m => m.VMDetails[i].vmCPU, new { @class = "touchspin1" })

                                        </div>
                                    </div>
                                </div>


                            }
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a href="#" class="btn btn-primary btn-xs" id="AddVM"><i class="fa fa-plus"></i> Add Another VM</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">

                                    <button class="btn btn-primary" type="submit"><i class="fa fa-floppy-o"></i> Create</button>
                                    <button onclick="location.href='@Url.Action("Dashboard_1", "Dashboards")';return false;" class="btn btn-white" type="button"><i class="fa fa-remove"></i> Cancel</button>
                                </div>
                            </div>
                        </div>
                    }

Model

public class VMInstall
    {
        public int SelectedClientId { get; set; }
        public IEnumerable<SelectListItem> Clients { get; set; }
        public string Initials { get; set; }
        public string IP { get; set; }
        public string User { get; set; }
        public string Password { get; set; }

        //[DataType(DataType.MultilineText)]
        //public string VMDetails { get; set; }
        public List<VMDetails> VMDetails { get; set; }


        public VMInstall()
        {
            Clients = Common.GetClients();
            IP = "xxx";
            User = "xxx";
            Password = "xxx";
            VMDetails = new List<VMDetails>();
        }
    }

    public class VMDetails
    {
        public string vmName { get; set; }
        public int vmDisk { get; set; }
        public int vmRAM { get; set; }
        public int vmCPU { get; set; }

        public VMDetails()
        {
            vmDisk = 60;
            vmRAM = 8;
            vmCPU = 2;
        }
    }

Controller

 // GET: /Devices/
        public ActionResult VMInstall()
        {

            //TODO: jobs for hosted clients
            VMDetails vMDetailsNew = new VMDetails();
            VMInstall vMInstall = new VMInstall();
            vMDetailsNew.vmName = "";
            vMInstall.VMDetails.Add(vMDetailsNew);
            ViewBag.vMInstall = vMInstall;
            return View(vMInstall);


        }

        // GET: /Devices/
        [HttpPost]
        public ActionResult VMInstallAddVM(VMInstall vM)
        {

            VMDetails vMDetailsNew = new VMDetails();
            vM.VMDetails.Add(vMDetailsNew);
            ViewBag.vMInstall = vM;
            return View("VMInstall", vM);
        }

Only issue is when VMInstallAddVM returns the view, the page doesnt actually add the additional row to the page, but the view code, iterates through as it should.

THe end result html, therefore doesnt contain the additional row.