Teilansicht mit jQuery in ASP.NET MVC rendern

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?

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>

Ich habe Ajax Load verwendet, um dies zu tun:

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

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

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

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.

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

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