none
Como destruir vista Modal RRS feed

  • Pregunta

  • Hola:

     Para mostrar ventanas modales utilizo la siguiente linea de codigo:

    @Html.Raw("<a data-modal='' data-backdrop='static' data-toggle='modal' data-target='#myModal' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")

    Y utilizo el siguiente script:

    $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    backdrop: 'static',
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });
    
    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        refresh:
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                      }
                    else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
    
                }
            });
            return false;
        });
    }


    Para cerrar la vista modal:

    <div class="modal-footer">
        <button class="btn btn-warning" data-dismiss="modal">Close</button>
    </div>

     Bueno, teniendo todo eso, resulta que al mostrar la primer vista parcial como modal esta se muestra bien, pero al cerrarla y querer mostrar otra se vuelve a mostrar la que anteriormente habíamos cerrado, con los mismo datos tal cual como la dejamos al momento de cerrarla.

     ¿Como puedo destruir la vista después de presionar el botón close?


    Saludos desde Monterrey, Nuevo León, México!!!

    sábado, 19 de marzo de 2016 4:51

Respuestas

  • hola

    en que contexto usas el @Html.Raw() ?

    >> ¿Como puedo destruir la vista después de presionar el botón close?

    si usas el developer tools del browser, al cual accedes con F12, con la sola network podrias analizar si al querer mostrar otra se realiza alguna invocacion al servidor

    quizas el browser esta cacheando el html de esa partial por eso no la actualiza

    al presionar para mostrar una nueva deberia realizarse una llamada al servidor y eso podras analizarlo con la developer tools del browser

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    sábado, 19 de marzo de 2016 5:13
  • Hola:

     La solucion fue modificar un poco el script:

    // modalform.js
    
    $(function () {
        $.ajaxSetup({ cache: false });
    
        $("a[data-modal]").on("click", function (e) {
            // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
            //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
    
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    /*backdrop: 'static',*/
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });
    
    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
                    } else {
                        $('#myModalContent').html(result);
                        bindForm(dialog);
                    }
                }
            });
            return false;
        });
    }


    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 20 de marzo de 2016 15:49

Todas las respuestas

  • hola

    en que contexto usas el @Html.Raw() ?

    >> ¿Como puedo destruir la vista después de presionar el botón close?

    si usas el developer tools del browser, al cual accedes con F12, con la sola network podrias analizar si al querer mostrar otra se realiza alguna invocacion al servidor

    quizas el browser esta cacheando el html de esa partial por eso no la actualiza

    al presionar para mostrar una nueva deberia realizarse una llamada al servidor y eso podras analizarlo con la developer tools del browser

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    sábado, 19 de marzo de 2016 5:13
  • Hola:

     Esto es lo que se carga la primera vez:

    Despues presiono el boton que deseo utilizar para mostrar la vista parcial del Create pero ya no veo llamadas.

    El @Html.Raw lo utilizo aqui:

            <div style="margin-top:17px;">
                @{
                    var grid = new WebGrid(
                                canPage: true,
                                rowsPerPage: Model.PageSize,
                                canSort: true,
                                ajaxUpdateContainerId: "grid");
    
                    grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                    grid.Pager(WebGridPagerModes.All);
    
                    @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
                fillEmptyRows: false,
                tableStyle: "table table-bordered table-hover",
                mode: WebGridPagerModes.All,
                columns: grid.Columns(
                  grid.Column("PhoneId", "ID"),
                  grid.Column("Model", "Model", style: "col-lg-4"),
                  grid.Column("Company", "Company", style: "col-lg-3"),
                  grid.Column("Price", header: "Price", format: @<text>@String.Format("{0:C}", item.Price) </text>),
                  grid.Column(header: "Action", canSort: false, style: "action",
                    format: @<text>
                    @Html.Raw("<a data-modal='' data-backdrop='static' data-toggle='modal' data-target='#myModal' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
                    @Html.Raw("<a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
                    @Html.Raw("<a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
                    </text>)
    
                ));
                }
    
    
            </div>
    Todo eso dentro de un Html.BeginForm{}


    Saludos desde Monterrey, Nuevo León, México!!!

    sábado, 19 de marzo de 2016 5:24
  • hola

    >>Despues presiono el boton que deseo utilizar para mostrar la vista parcial del Create pero ya no veo llamadas.

    cual es el boton que cargaria el create ?

    en el grid solo veo para details, delete y edit, no hay ningun create

    estas seguro que esa accion del create tiene definido algun evento desde jquery ?


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    sábado, 19 de marzo de 2016 6:01
  • Hola:

     Este es el boton que llama al Create.

                <div class="pull-right col-lg-1">
                    <a class="btn btn-success" data-modal='' data-backdrop='static' data-toggle='modal' data-target='#myModal' href="/Phone/Create" id="btnCreate">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>

    Como veras eñ boton llama al PartialView llamado Create, pero el tema es independiente de si llamo a un Create o a otro Detail, siempre se muestra la primer vista modal desplegada como PopUp, si llamo primero al Create entonces al presionar Detail después de cerrar el Create mediante el boton Close es la vista Create la que se muestra, si a esta vista Create le ingreso algunos datos estos datos vuelven a mostrarse.

     No tengo ninguna evento de jquery para el boton Create.


    Saludos desde Monterrey, Nuevo León, México!!!

    sábado, 19 de marzo de 2016 6:20
  • hola

    si pones un breakpoint en la linea

     $('#myModalContent').load(this.href, function () {

    puedes ver que se detiene el codigo cuando invocas al Create despues de haber abierto el detalle?

    si usas el IE poner un breakpoint es directo en el VS

    si usas Chrome debes abrir el developer tools y en el solapa Source defines el breakpoint

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    sábado, 19 de marzo de 2016 15:20
  • Hola:

     La solucion fue modificar un poco el script:

    // modalform.js
    
    $(function () {
        $.ajaxSetup({ cache: false });
    
        $("a[data-modal]").on("click", function (e) {
            // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
            //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
    
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    /*backdrop: 'static',*/
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });
    
    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
                    } else {
                        $('#myModalContent').html(result);
                        bindForm(dialog);
                    }
                }
            });
            return false;
        });
    }


    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 20 de marzo de 2016 15:49