如何在模式Twitter Bootstrap中使用Ajax插入记录

Question

您想通过模态窗口twitter引导程序将产品添加到列表中，在该窗口中要求您添加名称和数量。

我的按钮调用模式：

<a data-toggle="modal" data-target="#myDesayuno" href="#" class="btn btn-primary">Desayunos <span class="glyphicon glyphicon-plus-sign"></span> </a>        @:&nbsp;

我的模态及其调用脚本：

    <!-- Modal -->
    <div class="modal fade" id="myDesayuno" @*tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"*@>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Agregar Desayuno</h3>

                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <form id="myForm" method="post">
                            <div class="form-group">
                                @Html.LabelFor(model => model.Kn_CodigoProducto, "Desayuno", htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.DropDownList("Kn_CodigoProducto", null, htmlAttributes: new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.Kn_CodigoProducto, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.d_Cantidad, "Cantidad", htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.TextBoxFor(model => model.d_Cantidad, new { @class = "form-control", placeholder = "Agregar Cantidad" })
                                    @Html.ValidationMessageFor(model => model.d_Cantidad, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <input type="reset" id="btnSubmit" class="btn btn-primary" data-dismiss="modal" value="Agregar Desayuno" />
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")    
    <script>
           function launch_modal(id) {
         // Hide all modals using class if required.
         $('.modal').modal('hide');
         $('#'+id).modal('show');
             }
        </script>

}

希望在用户输入产品名称和数量时，单击“添加产品”，然后将产品加载到列表中，如下图所示：

但是我没有得到预期的结果，而是将产品添加到了我的列表中……有必要刷新页面以通过用户界面查看它。

模态表单按钮的id =“ btnSubmit”，它调用以下脚本：

<script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                var myformdata = $("#myForm").serialize();
                $.ajax({
                    type: "POST",
                    url: "/Ordens/AgregarDesayuno",
                    data: myformdata,
                    success: function () {
                        $("#myDesayuno").modal("hide");
                    }
                })
            })
        })
</script>

和我在mi控制器中的ActionResult：

  [HttpPost]
        public ActionResult AgregarDesayuno(AddProducto addproducto)
        {
            if (ModelState.IsValid)
            {               
                var cantidad = addproducto.d_Cantidad;
                var ordentmp = db.OrdenDetalleTmps.Where(o => o.UserName == User.Identity.Name && o.Kn_CodigoProducto == addproducto.Kn_CodigoProducto).FirstOrDefault();
                if (ordentmp == null)
                {
                    var buscaproducto = db.Productoes.Find(addproducto.Kn_CodigoProducto);
                    var temporal = new OrdenDetalleTmp
                    {
                        v_Nombre = buscaproducto.v_Nombre,
                        Precio_Unitario = Convert.ToInt16(buscaproducto.Precio_Unitario),
                        d_Cantidad = Convert.ToInt16(addproducto.d_Cantidad),
                        UserName = User.Identity.Name,
                        Kn_CodigoProducto = buscaproducto.Kn_CodigoProducto,
                    };

                    db.OrdenDetalleTmps.Add(temporal);
                    db.SaveChanges();                  
                    return RedirectToAction("Create");
                }             
            }

            ViewBag.Kn_CodigoProducto = new SelectList(ComboHelper.GetDesayuno(), "Kn_CodigoProducto", "v_Nombre");
            return PartialView(addproducto);
        }

我在主视图中的GET方法（打开列表）：

  [HttpGet]
        public ActionResult Create()
        {         

            var view = new NewOrdenView()
            {
                f_Ingreso = DateTime.Now,
                ListaOrdenDetallesTmps = db.OrdenDetalleTmps.Where(edt => edt.UserName == User.Identity.Name).ToList(),
            };

            ViewBag.Kn_CodigoProducto = new SelectList(ComboHelper.GetDesayuno(), "Kn_CodigoProducto", "v_Nombre");            
            return View(view);
        }

如何将产品添加到列表中，以便用户无需刷新页面即可看到它？ 我对模态窗口了解甚少，对我有帮助吗？

协调问候

Answer 1

尝试从ajax成功加载页面..它将加载列表中的最新记录

试试这个。 希望这可以帮助

<script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                var myformdata = $("#myForm").serialize();
                $.ajax({
                    type: "POST",
                    url: "/Ordens/AgregarDesayuno",
                    data: myformdata,
                    success: function () {
                        window.location.reload(true);
                        $("#myDesayuno").modal("hide");
                    }
                })
            })
        })
</script>