Teilansicht mit jQuery in ASP.NET MVC rendern

Sie können eine Teilansicht nur mit jQuery rendern. Sie können jedoch eine Methode (action) aufrufen, die die Teilansicht für Sie rendert und mit jQuery/AJAX der Seite hinzufügt. Im Folgenden haben wir einen Button-Click-Handler, der die URL für die Aktion aus einem Datenattribut der Schaltfläche lädt und eine GET-Anforderung auslöst, um das in der Teilansicht enthaltene DIV durch den aktualisierten Inhalt zu ersetzen.

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

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

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

wenn der Benutzer-Controller eine Aktion namens Details hat, die Folgendes ausführt:

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

    return PartialView( "UserDetails", model );
}

Dies setzt voraus, dass Ihre Teilansicht ein Container mit der ID detailsDiv ist, sodass Sie einfach die gesamte Sache durch den Inhalt des Anrufergebnisses ersetzen.

Schaltfläche für übergeordnete Ansicht

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

UserDetails Teilansicht

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

@tvanfosson rockt mit seiner Antwort.

Ich würde jedoch eine Verbesserung innerhalb von js und einen kleinen Controller-Check vorschlagen.

Wenn wir den @Url-Helper verwenden, um eine Aktion aufzurufen, erhalten wir eine formatierte HTML-Datei. Es ist besser, den Inhalt (.html) und nicht das eigentliche Element (.replaceWith) zu aktualisieren.

Mehr dazu unter: Was ist der Unterschied zwischen jQuerys replaceWith () und html ()?

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

Dies ist besonders nützlich in Bäumen, wo der Inhalt mehrmals geändert werden kann.

Auf dem Controller können wir die Aktion je nach Anforderung erneut verwenden:

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

Eine andere Sache, die Sie (basierend auf der Antwort von tvanfosson) ausprobieren können, ist folgende:

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

Und dann im Abschnitt "Scripts" Ihrer Seite:

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

Dadurch wird Ihre @ Html.RenderAction mit ajax gerendert.

Und um alle Fans zu erreichen, können Sie mit diesem CSS einen Einblendeffekt hinzufügen:

/* 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 ich liebe mvc :-)

Sie müssen auf Ihrem Controller eine Aktion erstellen, die das gerenderte Ergebnis der Teilansicht oder des Steuerelements "UserDetails" zurückgibt. Verwenden Sie dann einfach ein HTTP-Get oder -Post von jQuery, um die Action aufzurufen, um die gerenderte HTML-Datei anzuzeigen.

Verwenden Sie einen Standard-Ajax-Aufruf, um das gleiche Ergebnis zu erzielen

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

Ich habe es so gemacht. 

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

Details Methode:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Wenn Sie auf einen dynamisch generierten Wert verweisen müssen, können Sie nach der @ URL.Action auch Abfragezeichenfolgenparameter wie folgt anhängen:

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