javascript - Gjør delvis visning ved hjelp av jQuery i ASP.NET MVC

Hvordan gjengir jeg den delvise visningen ved hjelp av jQuery?

Vi kan gjengi den delvise visningen slik:

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

Hvordan kan vi gjøre det samme ved å bruke jquery?

Svar #1

Du kan ikke gjengi en delvis visning bare ved å bruke jQuery. Du kan derimot kalle en metode (handling) som vil gjengi den delvise visningen for deg og legge den til siden ved hjelp av jQuery/AJAX. Nedenfor har vi en knappetrykkbehandler som laster URL-en for handlingen fra et data-attributt på knappen og sender en GET-forespørsel for å erstatte DIV-en som er inneholdt i den delvise visningen med det oppdaterte innholdet.

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

der bruker-kontrolleren har en handling kalt detaljer som gjør:

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

    return PartialView( "UserDetails", model );
}

Dette antar at ditt delvis visning er en beholder med id-en detailsDiv slik at du bare erstatter hele greia med innholdet fra resultatet av kallet.

Foreldrevisningsknapp

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

User er kontrollernavn og details er handlingsnavn i @Url.Action(). UserDetails delvis visning

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

Svar #2

Jeg har brukt ajax last for å gjøre dette:

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

Svar #3

@tvanfosson rocker med svaret sitt.

Jeg vil imidlertid foreslå en forbedring i js og en liten kontroll av controlleren.

Når vi bruker @Url hjelpefunksjon for å kalle en handling, kommer vi til å motta en formatert HTML. Det ville være bedre å oppdatere innholdet (.html) og ikke det faktiske elementet (.replaceWith).

Mer om på: Hva er forskjellen mellom jQuerys replaceWith() og html()?

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

Dette er spesielt nyttig i trær, hvor innholdet kan endres flere ganger.

På kontrolleren kan vi gjenbruke handlingen avhengig av forespørrer:

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

Svar #4

En annen ting du kan prøve (basert på tvanfossons svar) er dette:

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

Og deretter i skriptseksjonen på siden din:

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

Dette gjør at din @Html.RenderAction bruker ajax.

Og for å gjøre det hele fancy sjmansy kan du legge til en fade-in-effekt ved å bruke denne CSS-en:

/* 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;
}

Mann jeg elsker mvc :-)

Svar #5