How to insert record with ajax in modal Twitter Bootstrap

Question

You want to add a product to a list through a modal window twitter bootstrap, in the window you are asked to add the name and the quantity.

my button that calls the modal:

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

my modal and its call script:

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

}

It is wanted that when the user enters name and quantity of product, this click in "Add Product" and the products are loaded in the list, as it shows the following figure:

But I'm not getting the expected result, but add the product to my list ... it is necessary to refresh the page to view it through user interface.

the modal form button has an id = "btnSubmit" that calls the following script:

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

and my ActionResult in mi controller:

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

my GET method from the main view (open the list):

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

How can I add a product to my list so that the user does not need to refresh the page to visualize it? I have very little knowledge of modal windows, any help for me?

coordinating greetings

Answer 1

Try loading page from ajax success..it will load latest records in your list

try this one. hope this helps

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