Renderizar vista parcial usando jQuery en ASP.NET MVC

223

¿Cómo renderizo la vista parcial usando jquery?

Podemos representar la vista parcial de esta manera:

<% Html.RenderPartial("UserDetails"); %>

¿Cómo podemos hacer lo mismo con jquery?

Prasad
fuente
También puedes echar un vistazo al artículo a continuación. tugberkugurlu.com/archive/… Sigue un enfoque diferente y mejora el camino.
tugberk
Pregunta estupida. ¿Es UserDetails una vista parcial como una página cshtml: UserDetails.cshtml? Estoy tratando de cargar una vista parcial. Y normalmente usaría: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend el
1
@GeorgeGeschwend, Nada es estúpido aquí, hasta que alguien pueda responder. UserDetails (UserDetails.cshtml) es la Vista parcial dentro del Controlador de usuario. Como en los comentarios de la respuesta marcada, es mejor usar Url.Action en lugar de codificar por completo la ruta completa de la vista.
Prasad

Respuestas:

286

No puede representar una vista parcial utilizando solo jQuery. Sin embargo, puede llamar a un método (acción) que le mostrará la vista parcial y la agregará a la página usando jQuery / AJAX. A continuación, tenemos un controlador de clic de botón que carga la URL de la acción desde un atributo de datos en el botón y dispara una solicitud GET para reemplazar el DIV contenido en la vista parcial con los contenidos actualizados.

$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});

donde el controlador de usuario tiene una acción denominada detalles que hace:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

Esto supone que su vista parcial es un contenedor con la identificación detailsDivpara que simplemente reemplace todo con el contenido del resultado de la llamada.

Botón de vista principal

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button>

Useres el nombre del controlador y el detailsnombre de la acción en @Url.Action(). Vista parcial de detalles del usuario

<div id="detailsDiv">
    <!-- ...content... -->
</div>
tvanfosson
fuente
Sigo recibiendo malas solicitudes con este código de ejemplo que diste. Copié tal cual y simplemente cambié la acción del Controlador a la que debería ir. No estoy seguro de para qué es "usuario".
chobo2
1
Acabo de usar algunos nombres "probables" de controladores y acciones, ya que no incluiste ningún código que pudiéramos utilizar. Simplemente reemplace "detalles" con su acción y "usuario" con el nombre de su controlador.
tvanfosson
1
Gracias de nuevo por una gran respuesta tvanfosson.
¿Alguna idea de cómo funcionaría esto con Razor? intentó $ .get ("@ Url.Action (\" Manifest \ ", \" Upload \ ", new {id =" + key + "})", function (data) {$ ("<div />") .replaceWith (datos);});
Patrick Lee Scott,
1
@Zapnologica: si está volviendo a cargar toda la tabla, es posible que deba volver a aplicar el complemento ya que los elementos DOM a los que estaba conectado originalmente se han reemplazado. Podría ser mejor conectarlo a un método que devuelva los datos como JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson
152

He usado ajax load para hacer esto:

$('#user_content').load('@Url.Action("UserDetails","User")');
Prasad
fuente
46
En general, creo que es mejor ir con el asistente de Url.Action en lugar de codificar el camino. Esto se romperá si su sitio web está en un subdirectorio en lugar de en la raíz. El uso del ayudante soluciona ese problema y le permite agregar parámetros con valores establecidos dinámicamente.
tvanfosson el
18
Podrías hacer $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")') para solucionarlo: a menudo uso este método si necesito que JavaScript active los parámetros de la cadena de consulta al final de la url
Shawson
En esta respuesta, UserDetailses el nombre de una acción, no una vista parcial, ¿verdad?
Maxim V. Pavlov
44
@Prasad: las URL siempre deben evaluarse usando en @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )lugar de Handcoding .
Imad Alazani
3
@PKKG. @ Url.Action () solo evalúa en Razor. esto no funciona si OP quiere poner su código en un archivo js separado y hacer referencia a él.
Michael
60

@tvanfosson rockea con su respuesta.

Sin embargo, sugeriría una mejora dentro de js y una pequeña comprobación del controlador.

Cuando usamos @Urlhelper para llamar a una acción, vamos a recibir un html formateado. Sería mejor actualizar el contenido ( .html) no el elemento real ( .replaceWith).

Más información sobre: ¿Cuál es la diferencia entre replaceQith (jQuery) y html ()?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

Esto es especialmente útil en árboles, donde el contenido se puede cambiar varias veces.

En el controlador podemos reutilizar la acción según el solicitante:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}
Custodio
fuente
11

Otra cosa que puedes probar (según la respuesta de tvanfosson) es esta:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

Y luego en la sección de secuencias de comandos de su página:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

Esto representa su @ Html.RenderAction usando ajax.

Y para hacerlo todo fanático, puedes agregar un efecto de desvanecimiento usando este CSS:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    -o-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

Hombre me encanta mvc :-)

Peter
fuente
¿Por qué cada uno funcionó? ¿Cómo funciona? ¿Menciona algo como: data-actionurl = "@ Url.Action (" detalles "," usuario ", nuevo {id = Model.ID} data-actionurl =" Otra acción "?
user3818229
No, cada función recorre todos los elementos html que tienen el atributo data-actionurl y lo llena invocando una solicitud ajax para el método de acción. Así que múltiples <div class="renderaction fade-in" ...></div>elementos.
Peter
9

Deberá crear una Acción en su Controlador que devuelva el resultado representado de la vista o control parcial "UserDetails". Luego, solo use un Get o Post Http de jQuery para llamar a la Acción para que se muestre el html representado.

Chris Pietschmann
fuente
cómo configurar el intervalo de tiempo para actualizar los datos actualizados en esta función jQuery
Neeraj Mehta
5

Usando la llamada estándar de Ajax para lograr el mismo resultado

        $.ajax({
            url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
            type: 'GET',
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);

            },
            success: function (result) {

                $('#divSearchResult').html(result);
            }
        });




public ActionResult _SearchStudents(string NationalId)
        {

           //.......

            return PartialView("_SearchStudents", model);
        }
DevC
fuente
0

Lo hice así.

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

Método de detalles:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
Una camioneta
fuente
0

Si necesita hacer referencia a un valor generado dinámicamente, también puede agregar parámetros de cadena de consulta después de la URL @. Acción como esta:

    var id = $(this).attr('id');
    var value = $(this).attr('value');
    $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);


    public ActionResult Details( int id, string value )
    {
        var model = GetFooModel();
        if (Request.IsAjaxRequest())
        {
            return PartialView( "UserDetails", model );
        }
        return View(model);
    }
Jinete Harrison
fuente