Bootstrap Modal Change and Ajax ASP.NET?

Question

I developed a basic functionality in the Asp.net MVC controller where I have a product list and it is changed in the Back-End and in the front-End I use the Bootstrap-Modal to load the product and change, the modal loads the product perfectly, the problem is that when saving, I am unable to leave the AJAX page when the user of a save in modal, in the back-end everything works perfect and return a Json in order to leave the Ajax page, but I am not able to take this Json in the Front-End and leave Ajax.

List of Products:

@model IEnumerable<CaelumEstoque.Models.Prod>
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Codigo)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Descricao)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Preco)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr id="prod@(item.Codigo)">
        <td>
            @Html.DisplayFor(modelItem => item.Codigo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Descricao)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Preco)
        </td>
        <td>
                <a href="#" class="btn btn-default details" data-url="@Url.Action("Details", "Prod", new { id = item.Codigo })">Detalhe</a>
                <a href="#" class="btn btn-primary edit" data-url="@Url.Action("Edit", "Prod", new { id = item.Codigo })"><i class="glyphicon glyphicon-edit"></i></a>
                @*<button class="btn btn-default details" data-id="@item.Codigo"><i class="glyphicon glyphicon-file"></i></button>
                <button class="btn btn-danger delete" data-id="@item.Codigo"><i class="glyphicon glyphicon-trash"></i></button>
                <button class="btn btn-primary edit" data-id="@item.Codigo"><i class="glyphicon glyphicon-edit"></i></button>*@


</td>
            </tr>
        }
    </table>

<div class="modal" id="modal">

</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>


    $(function () {
        $('.details').click(function () { // class name selector
            var url = $(this).data('url'); // use data(), not attr()
            $("#modal").load(url, function () {
                $("#modal").modal("show");
            })
        });
    })

    $(".edit").click(function () {
        var url = $(this).data('url'); // use data(), not attr()
        $("#modal").load(url, function () {
            $("#modal").modal("show");
        })


    })     

</script>

Modal to edit the product.

@model CaelumEstoque.Models.Prod
@{
    Layout = null;
}


<div class="modal-dialog">
    <div class="modal-content">
         @using (Html.BeginForm("ParcialEdit","Prod")) 

         {
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Editar produto</h4>
            </div>

            <div class="modal-body">
                <div class="form-horizontal">
                    @Html.ValidationSummary(true)
                    <div class="form-group">
                        @Html.LabelFor(model => model.Codigo, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Codigo, new { @class = "form-control", @readonly = "readonly" })
                            @Html.ValidationMessageFor(model => model.Codigo)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Descricao, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Descricao, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Descricao)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Preco, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Preco, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Preco)
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Salvar" class="btn btn-primary salvar" /> 
                @*<input type="button" value="Salvar" class="btn btn-primary salvar" data-url="@Url.Action("ParcialEdit", "Prod", new {p =  Model })" /> *@
                    <input type="button" value="Cancelar" class="btn btn-default" data-dismiss="modal" />
                </div>
            }
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

    <script>


    </script>

---

Controller

using CaelumEstoque.DAO;
using CaelumEstoque.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CaelumEstoque.Controllers
{
    public class ProdController : Controller
    {

        public static List<Prod> _listaProdutos = new List<Prod>()
        {
            new Prod { Codigo=01, Descricao="Produto 1", Preco=10 },
            new Prod { Codigo=02, Descricao="Produto 2", Preco=15 },
            new Prod { Codigo=03, Descricao="Produto 3", Preco=20 }
        };
        // GET: Prod
        public ActionResult Index()
        {

            IList<Prod> lista = _listaProdutos;

            return View(lista);
        }


        public ActionResult Details(int id) {

            var existe = _listaProdutos.Find(x => x.Codigo == id );

            ViewBag.Detalhes = existe;
            return View("parcial",existe);
        }

        public ActionResult Edit( int id) {
            var existe = _listaProdutos.Find(x => x.Codigo == id);


            //return Json( registro);
            return View(existe);
        }

        public ActionResult ParcialEdit(Prod p)
        {
            var registro = _listaProdutos.Find(x => x.Codigo == p.Codigo);
            registro.Descricao = p.Descricao;
            registro.Preco = p.Preco;

            //return Json(registro);
            //return RedirectToAction("Index");
            //return Json(new {"/Prod/Index" });
            //return Json(new { Title = "abc", Summary = "Summary", Magazine = "This is magazine", Url = "Index" }, JsonRequestBehavior.AllowGet);
            return Json( registro );
        }

        public ActionResult parcial() {
            return View();
        }


    }
}

Answer 1

You must close the modal at the end of the whole process, at the click of the button.

Modal of product edition

<script>
    $("#btnSave").click(function () {

        $.ajax({
            type: "POST",
            url: "",
            data: $('#myForm').serialize(),
            success: function (data) {
                alert('Registro salvo com sucesso.');
                $('#myModal').modal('hide');
            },
            error: function (data) {
                alert('Erro ao Salvar Registro.');
            }
        });
    });
</script>