Rendering della vista parziale utilizzando jQuery in ASP.NET MVC

Come si esegue il rendering della vista parziale usando jquery?

Possiamo rendere la vista parziale in questo modo:

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

Come possiamo fare lo stesso usando jquery?

Non è possibile eseguire il rendering di una vista parziale utilizzando solo jQuery. Tuttavia, è possibile chiamare un metodo (azione) che renderà la vista parziale per te e la aggiungerà alla pagina usando jQuery / AJAX. Di seguito, abbiamo un gestore di clic sui pulsanti che carica l'URL per l'azione da un attributo di dati sul pulsante ed emette una richiesta GET per sostituire il DIV contenuto nella vista parziale con i contenuti aggiornati.

$('.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);         
    });
});

dove il controller utente ha un'azione denominata dettagli che fa:

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

    return PartialView( "UserDetails", model );
}

Ciò presuppone che la vista parziale sia un contenitore con l'id, in detailsDivmodo da sostituire l'intera cosa con il contenuto del risultato della chiamata.

Pulsante Vista padre

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

Userè il nome del controller ed detailsè il nome dell'azione in @Url.Action(). UserDetails vista parziale

<div id="detailsDiv">
    <!-- ...content... -->
</div>

Ho usato il caricamento Ajax per fare questo:

$('#user_content').load('@Url.Action("UserDetails","User")');

@tvanfosson oscilla con la sua risposta.

Tuttavia, suggerirei un miglioramento all'interno di js e un piccolo controllo del controller.

Quando usiamo l' @Urlhelper per chiamare un'azione, stiamo per ricevere un HTML formattato. Sarebbe meglio aggiornare il contenuto ( .html) non l'elemento reale ( .replaceWith).

Maggiori informazioni su: Qual è la differenza tra jWQuery sostituisce con () e HTML ()?

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

Ciò è particolarmente utile negli alberi, in cui il contenuto può essere modificato più volte.

Al controller possiamo riutilizzare l'azione a seconda del richiedente:

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

Un'altra cosa che puoi provare (in base alla risposta di tvanfosson) è questa:

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

E poi nella sezione script della tua pagina:

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

Questo rende il tuo @ Html.RenderAction usando ajax.

E per renderlo tutto fanatico sjmansy puoi aggiungere un effetto dissolvenza usando questo 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;
}

Uomo che amo mvc :-)

Dovrai creare un'azione sul tuo controller che restituisca il risultato renderizzato della vista o controllo parziale "UserDetails". Quindi basta usare un HTTP Get o Post da jQuery per chiamare l'Azione per visualizzare l'html renderizzato.

Utilizzo della chiamata Ajax standard per ottenere lo stesso risultato

        $.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);
        }

L'ho fatto così.

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

Metodo dei dettagli:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Se è necessario fare riferimento a un valore generato dinamicamente, è anche possibile aggiungere parametri della stringa di query dopo l'URL @. Azione in questo modo:

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