javascript - Rendera delvy med jQuery i ASP.NET MVC

Hur renderar jag den partiella vyn med jQuery?

Vi kan rendera den partiella vyn så här:

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

Hur kan vi göra samma sak med jQuery?

Svar #1

Du kan inte rendera en partiell vy med enbart jQuery. Du kan däremot anropa en metod (action) som kommer att rendera den partiella vyn åt dig och lägga till den på sidan med jQuery/AJAX. Nedan har vi en knappklickshanterare som laddar URL:en för action från ett dataattribut på knappen och skickar en GET-förfrågan för att ersätta DIV:en som ingår i den partiella vyn med det uppdaterade innehållet.

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

där användarkontrollern har en åtgärd som heter detaljer som gör:

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

    return PartialView( "UserDetails", model );
}

Detta förutsätter att din delvisa vy är en behållare med id detailsDiv så att du bara ersätter hela saken med innehållet från resultatet av anropet.

Föräldravynknapp

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

User är kontrollerns namn och details är åtgärdens namn i @Url.Action(). UserDetails delvy

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

Svar #2

Jag har använt ajax-laddning för att göra detta:

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

Svar #3

@tvanfosson är fantastisk med sitt svar.

Jag skulle dock föreslå en förbättring inom js och en liten kontroll av styrenheten.

När vi använder @Url hjälpen för att anropa en åtgärd, kommer vi att få ett formaterat HTML. Det skulle vara bättre att uppdatera innehållet (.html) och inte det faktiska elementet (.replaceWith).

Mer om på: Vad är skillnaden mellan jQuerys replaceWith() och html()?

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

Detta är särskilt användbart i träd, där innehållet kan ändras flera gånger.

Vid controllern kan vi återanvända åtgärden beroende på begäraren:

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

Svar #4

En annan sak du kan försöka (baserat på tvanfossons svar) är detta:

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

Och sedan i skriptavsnittet på din sida:

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

Detta gör att din @Html.RenderAction används med ajax.

Och för att göra allt extra flott kan du lägga till en fade-in-effekt med den här 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;
}

Man, jag älskar MVC :-)

Svar #5