Teilansicht mit jQuery in ASP.NET MVC rendern

223

Wie rendere ich die Teilansicht mit jquery?

Wir können die Teilansicht folgendermaßen rendern:

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

Wie können wir dasselbe mit jquery machen?

Prasad
quelle
Sie können sich auch den folgenden Artikel ansehen. tugberkugurlu.com/archive/… Es folgt einem anderen Ansatz und verbessert den Weg.
Tugberk
Dumme Frage. Ist UserDetails eine Teilansicht als cshtml-Seite: UserDetails.cshtml? Ich versuche eine Teilansicht zu laden. Und normalerweise würde ich verwenden: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend
1
@ GeorgeGeschwend, hier ist nichts dumm, bis jemand darauf antworten kann. UserDetails (UserDetails.cshtml) ist die Teilansicht im User Controller. Wie in den Kommentaren der markierten Antwort ist es besser, Url.Action zu verwenden, als den vollständigen Pfad der Ansicht hart zu codieren.
Prasad

Antworten:

286

Sie können eine Teilansicht nicht nur mit jQuery rendern. Sie können jedoch eine Methode (Aktion) aufrufen, die die Teilansicht für Sie rendert und mit jQuery / AJAX zur Seite hinzufügt. Im Folgenden haben wir einen Schaltflächenklick-Handler, der die URL für die Aktion aus einem Datenattribut auf der Schaltfläche lädt und eine GET-Anforderung auslöst, um die 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) {
        $detailDiv.replaceWith(data);         
    });
});

Dabei verfügt der Benutzercontroller über eine Aktion mit dem Namen details, 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 ist, detailsDivsodass Sie einfach das gesamte Objekt durch den Inhalt des Ergebnisses des Aufrufs ersetzen.

Schaltfläche "Übergeordnete Ansicht"

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

Userist der Name des Controllers und der detailsName der Aktion in @Url.Action(). UserDetails Teilansicht

<div id="detailsDiv">
    <!-- ...content... -->
</div>
Tvanfosson
quelle
Ich bekomme immer wieder schlechte Anfragen mit diesem Beispielcode, den Sie gegeben haben. Ich habe so wie es ist kopiert und nur die Controller-Aktion geändert, zu der es gehen soll. Ich bin nicht sicher, wofür "Benutzer" ist.
Chobo2
1
Ich habe nur einige "wahrscheinliche" Controller- und Aktionsnamen verwendet, da Sie keinen Code angegeben haben, nach dem wir suchen könnten. Ersetzen Sie einfach "Details" durch Ihre Aktion und "Benutzer" durch Ihren Controllernamen.
Tvanfosson
1
Nochmals vielen Dank für eine tolle Antwort tvanfosson.
Hast du eine Idee, wie das mit Razor funktionieren würde? versuchte $ .get ("@ Url.Action (" Manifest "," Upload ", neue {id =" + key + "})", Funktion (Daten) {$ ("<div />") .replaceWith (Daten);});
Patrick Lee Scott
1
@Zapnologica - Wenn Sie die gesamte Tabelle neu laden, müssen Sie das Plugin möglicherweise erneut anwenden, da die ursprünglich verbundenen DOM-Elemente ersetzt wurden. Es könnte besser sein , es zu einem Verfahren zu verbinden , dass die Renditen die Daten als JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson
152

Ich habe Ajax Load verwendet, um dies zu tun:

$('#user_content').load('@Url.Action("UserDetails","User")');
Prasad
quelle
46
Im Allgemeinen denke ich, dass Sie besser mit dem Url.Action-Helfer arbeiten sollten, als den Pfad fest zu codieren. Dies wird unterbrochen, wenn sich Ihre Website in einem Unterverzeichnis und nicht im Stammverzeichnis befindet. Die Verwendung des Hilfsprogramms behebt dieses Problem und ermöglicht das Hinzufügen von Parametern mit dynamisch festgelegten Werten.
Tvanfosson
18
Sie können $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")') ausführen, um dies zu umgehen. Ich verwende diese Methode häufig, wenn ich das Javascript benötige, um auf die Querystring-Parameter zu klatschen am Ende der URL
Shawson
Ist in dieser Antwort UserDetailsein Name einer Aktion keine Teilansicht, oder?
Maxim V. Pavlov
4
@Prasad: Urls sollte immer ausgewertet werden @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )stattdessen tun Handprogrammierung .
Imad Alazani
3
@PKKG. @ Url.Action () wird nur in Razor ausgewertet. Dies funktioniert nicht, wenn OP ihren Code in eine separate js-Datei einfügen und darauf verweisen möchte.
Michael
60

@ Tvanfosson rockt mit seiner Antwort.

Ich würde jedoch eine Verbesserung innerhalb von js und eine kleine Controller-Überprüfung vorschlagen.

Wenn wir den @UrlHelfer verwenden, um eine Aktion aufzurufen, erhalten wir ein formatiertes HTML. Es wäre besser, den Inhalt ( .html) zu aktualisieren, nicht das eigentliche Element ( .replaceWith).

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, in denen der Inhalt mehrmals geändert werden kann.

Am Controller können wir die Aktion je nach Anforderer wiederverwenden:

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

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

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

Und dann im Skriptbereich 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 alles fany sjmansy zu machen, können Sie einen Einblendeffekt mit diesem CSS 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 :-)

Peter
quelle
Warum haben Sie jeweils funktioniert? Wie es funktioniert? Haben Sie so etwas wie: data-actionurl = "@ Url.Action (" details "," user ", new {id = Model.ID} data-actionurl =" Another Action "?
user3818229
Nein, jede Funktion durchläuft alle HTML-Elemente mit dem Attribut data-actionurl und füllt sie durch Aufrufen einer Ajax-Anforderung für die Aktionsmethode. Also mehrere <div class="renderaction fade-in" ...></div>Elemente.
Peter
9

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 Aktion aufzurufen und das gerenderte HTML anzuzeigen.

Chris Pietschmann
quelle
wie man das Zeitintervall einstellt, um aktualisierte Daten in dieser jQuery-Funktion zu aktualisieren
Neeraj Mehta
5

Verwenden Sie den 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);
        }
DevC
quelle
0

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");
        }
Ein Van
quelle
0

Wenn Sie auf einen dynamisch generierten Wert verweisen müssen, können Sie auch Abfragezeichenfolgenparameter nach der @ URL.Action 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);
    }
Fahrer Harrison
quelle