none
Llamar una vista partial RRS feed

  • Pregunta

  • Hola

    Estoy trabajando en Asp MVC, quiero llamar una vista partial, en si no se como llamarlo es un popoup, mi código es el siguiente

    <div class="container">
    		<h3>Index</h3>
            <button class="btn btn-primary" onclick="btnMantenimiento='http://Home/Details'">Mantenimiento</button>
    	</div>
    Quiero llamarlo desde un boton


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila martes, 8 de marzo de 2016 23:03 xxxxxxxxxxx
    martes, 8 de marzo de 2016 23:02

Todas las respuestas

  • Hola Pedro,

    Más que un popup deberías abrir una pantalla modal. Puedes utilizar JqueryUI dialog para ello, te pongo un pequeño ejemplo:

    Tú código modificado:

    <div class="container">
       <h3>Index</h3>
       <button class="btnMantenimiento btn btn-primary">Mantenimiento</button>
        <div id="Details"></div>
    </div>

    Partial View Details (es un ejemplo, sería tú código)

    @model Modles.Details
    <div id="DetailInfo>
      @Html.LabelForm(x => x.Name)
      @Html.TextBoxFor(x => x.Name)
    </div>	


    JS

    $('.btnMantenimiento').on('click', function () {
        $("#Details").dialog({
            autoOpen: true,
            position: { my: "center", at: "top+350", of: window },
            width: 1000,
            resizable: false,
            title: 'Detials',
            modal: true,
            open: function () {
                $(this).load('@Url.Action("Details", "Home")');
            }
        });
        return false;
    });


    Action del controller

    public PartialViewResult Details()
    {
      return PartialView("Details--PartialView", new Details());
    }
    

    Veo que utilizas bootstrap, también podrías hacerlo con los modals de bootstrap, sería muy parecido.

    Espero te sirva de ayuda.

    miércoles, 9 de marzo de 2016 8:13
  • Hola Rober

    Gracias por responder.

    Quiero hacer un formulario Popup del cual tengo un código que obtuve de una web, mi código es el siguiente.

    Controlador

    using System.Web.Mvc;
    using OperacionesCrudMVC.Models;
    
    namespace OperacionesCrudMVC.Controllers
    {
        public class HomeController : Controller
        {
            private object db;
    
    
            // GET: Home
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Details(int id = 0)
            {
                Phone phone = (Phone)db;
                if (phone == null)
                {
                    return HttpNotFound();
                }
                return PartialView("Details", phone);
            }
        }
    }

    Index

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
        <title>Index</title>
    </head>
    <body>
    <div>
    	<div class="container">
    		<h3>Index</h3>
    	    <button class="btnMamtenimiento btn btn-primary">Mantenimiento</button>
            <div id="Details"></div>
    	</div>
        
    </div>  
    
        
    
        <script src="~/Content/js/jquery.js"></script>
        <script src="~/Content/js/bootstrap.min.js"></script>
    </body>
    </html>

    Details

    @model OperacionesCrudMVC.Models.Phone @{ Layout = null; } <div id="Details"> @@*Html.LabelForm(x => x.Name) @Html.b(x => x.Name)*@ </div> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Details</title> </head> <body> <div> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title">Phone Detail</h3> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="form-group"> @Html.LabelFor(m => Model.Model, new {@class = "control-label col-sm-3"}) <div class="col-sm-9"> @Html.TextBoxFor(m => m.Model, new {@class = "form-control required", @disabled = "disabled"}) </div> </div> <div class="form-group"> @Html.LabelFor(m => Model.Company, new {@class = "control-label col-sm-3"}) <div class="col-sm-9"> @Html.TextBoxFor(m => m.Company, new {@class = "form-control required", @disabled = "disabled"}) </div> </div> <div class="form-group"> @Html.LabelFor(m => Model.Price, new {@class = "control-label col-sm-3"}) <div class="col-sm-9"> @Html.TextBoxFor(m => m.Price, new {@class = "form-control required", @disabled = "disabled"}) </div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-warning" data-dismiss="modal">Close</button> </div> </div> </body>

    //Este código no se donde va, se me ocurrió ponerlo áca, no se si va en un html aparte////// <!-- modal placeholder--> <div id='myModal' class='modal fade in'> <div class="modal-dialog"> <div class="modal-content"> <div id='myModalContent'></div> </div> </div> </div>

    ////////////////////////////////////////////////////////////////////////////////////

    @section Scripts { <script type="text/javascript" src="~/scripts/Appjs/phones.js"></script> => Me parece no llega a la ruta indicada } </html>


    JS

    $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    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) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                    } else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

    Esto es lo que quiero hacer

    Search, sort, paging, insert, update and delete with ASP.Net MVC and bootstrap modal popup PART-2

    El JS que me distes para el botón no me esta funcionando lo puse en la carpeta scripts, como le indicas al botón que trabaje con ese js?


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila miércoles, 9 de marzo de 2016 12:12 xxxxxxxxxxxxxxxx
    miércoles, 9 de marzo de 2016 12:10
  • Hola Pedro,

    Aquí haces el binding del boton $(btnMantenimiento'').on('click'....

    Prueba de quitar el return false que puse que creo que es incorrecto.

    miércoles, 9 de marzo de 2016 12:45
  • Hice la modificación que me sujeriste y no llama a la vista parcial

    ¿Este fragmento de código no se donde va?

    <!-- modal placeholder-->
    <div id='myModal' class='modal fade in'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>
    
    @section scripts{
        @Scripts.Render("~/scripts/appjs/phones.js")
    }
    ¿Va donde mi vista parcial al final?, ¿va en algún archivo?


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila miércoles, 9 de marzo de 2016 13:04 xxxxxx
    miércoles, 9 de marzo de 2016 12:58
  • Hola Pedro,

      $("#Details").dialog({
           autoOpen: false,
           width: 400,
           resizable: false,
            title: 'Detials',
            modal: true,
            open: function () {
                $(this).load('@Url.Action("Details", "Home")');
            }
        });
    
    $('.btnMantenimienton').click(function () {
                $('#Details').dialog('open');
            });

    >>¿Va donde mi vista parcial al final?, ¿va en algún archivo?

    No va el partial, va en la página donde se llamará a la modal, es decir si estas en Home y quieres mostar los details, la tienes que tener en la view de home. Piensa que el modal te lo muestra dentro de la misma view donde estés, no genera una nueva.

    Saludos.

    miércoles, 9 de marzo de 2016 14:39
  • Hola Robert

    Tengo el código de la siguiente manera en la vista index pero al llamar a la vista parcial que debe estar en la vista index como popoup.

    @{
        Layout = null;
    }
    
    
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
        <title>Index</title>
    </head>
    <body>
    <div>
    	<div class="container">
    		<h3>Index</h3>
    	   
            <input type="button" class="btn btn-primary" onclick="llamarVistaParcial();" value="La llamada ganadora a la vista parcial" />
    	    <div id="resultado"></div>
    
    	    <script>
            function llamarVistaParcial() {
            var laURLDeLaVista = '@Url.Action("Details", "Home")';
                    $.ajax({
                        cache: false,
                        async: true,
                        type: "GET",
                        url: laURLDeLaVista,
                        data: {},
                        success: function(response) {
                            $('#resultado').html('');
                            $('#resultado').html(response);
                        }
                    });
                }
            </script>
    
    	</div>
    
    </div>
    // Supestamente con este código se hace popoup
        <div class="modal-footer">
            <button class="btn btn-warning" data-dismiss="modal">Close</button>
    
            <div id='myModal' class='modal fade in'>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div id='myModalContent'></div>
                    </div>
                </div>
            </div>
    
            @section scripts{
                <script type="text/javascript" src="~/scripts/Appjs/phones.js"></script>
            }
        </div>
    
        <script src="~/Content/js/jquery.js"></script>
        <script src="~/Content/js/bootstrap.min.js"></script>
    </body>
    </html>

    También tengo un js

    $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    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) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                    } else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila miércoles, 9 de marzo de 2016 14:49 xxxxxxxxxxxxx
    miércoles, 9 de marzo de 2016 14:47
  • Pedor,

    En el js tienes a[data-modal] y no veo ningún tag <a href>, por lo que no veo donde se te lanzaría el evento.

    En este link http://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa

    , tienes como hacer una modal con bootrasp cargando una partial en MVC, seguramente si empiezas y sigues los pasos te funcionará todo perfecto. 

    Saludos.

    miércoles, 9 de marzo de 2016 15:54