如何在模态 Twitter Bootstrap 中使用 ajax 插入记录

Posted 2023-05-08

【中文标题】如何在模态 Twitter Bootstrap 中使用 ajax 插入记录

【英文标题】：How to insert record with ajax in modal Twitter Bootstrap

【发布时间】：2018-09-13 03:46:35

【问题描述】：

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

我调用模态的按钮：

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

如何将产品添加到我的列表中，以便用户无需刷新页面即可将其可视化？我对模态窗口知之甚少，对我有什么帮助吗？

协调问候

【问题讨论】：

你用什么函数来获取初始列表？关闭模式后，您只需要在成功回调中再次调用该函数。

在我的操作结果的 Get 方法中，我以这种方式打开我的列表： var view = new NewOrdenView() f_Ingreso = DateTime.Now, ListaOrdenDetallesTmps = db.OrdenDetalleTmps.Where(edt => edt. UserName == User.Identity.Name).ToList(), ; @Eliellel

那你在POST后再次调用GET方法刷新列表。

获取项目的 GET 方法/控制器操作是什么？

并通过编写打开列表@user9405863的GET方法编辑了我的问题

【参考方案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>

【讨论】：

ajax 的全部意义在于保持在同一页面上。进行ajax调用并刷新页面是疯狂的