MVC Jquery 添加到表单和 ajax 到控制器答案

【问题标题】：MVC Jquery add to form and ajax to controllerMVC Jquery 添加到表单和 ajax 到控制器
【发布时间】：2018-08-13 12:04:18
【问题描述】：

我认为有以下表格

@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>
                    }

这个页面有下面的java脚本

<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>

用户可以在 div 中添加额外的虚拟机，这部分工作正常。

我有这个页面的以下模型

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

我如何使用 Jquery，在提交之前将 vmdetails 的输入添加到表单中？例如，我需要从输入字段添加到 VMInstall 中的 VMDetails 列表？

【问题讨论】：

用户可以向 div 添加额外的虚拟机，这部分工作正常。 - 不，它没有。一些表单控件甚至没有name 属性，而那些与模型完全没有关系的控件。建议你先阅读this answer
他们这样做，在剃刀视图和 jquery 中？ '' +
阅读我给你的链接！！ - 和this one 了解name 属性与您的模型的关系（并且<input type="text" class="form-control" placeholder="" id="vmName' + count + '">' 不包含name 属性
好的，通过在答案中使用 for 循环并使用视图包 @{ var vmInstall = (CWMVC5.Models.VMInstall)ViewBag.vMInstall; 在视图之间传递数据。 } @for (int i = 0; i
我不知道ViewBag 与我告诉你的任何事情有什么关系。而且我不知道您现在使用的是什么代码，也无法猜测您犯了什么错误。

标签： javascript jquery html asp.net-mvc

【解决方案1】：

所以设法让这种工作。并且视图刷新问题

查看

    <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>
                    }

型号

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

控制器

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

唯一的问题是当 VMInstallAddVM 返回视图时，页面实际上并没有向页面添加额外的行，但视图代码会按应有的方式进行迭代。

最终结果 html，因此不包含附加行。

【讨论】：