Wie kann ich eine Teilansicht in die Ansicht laden?

74

Ich bin sehr verwirrt mit dieser Teilansicht ...

Ich möchte eine Teilansicht in meine Hauptansicht laden ...

Hier ist das einfache Beispiel ...

Ich lade Index.cshtml der Aktion Homecontroller Index als Hauptseite.

in index.cshtml erstelle ich einen Link über

@Html.ActionLink("load partial view","Load","Home")

In HomeController füge ich eine neue Aktion mit dem Namen hinzu

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

in _LoadView.cshmtl habe ich gerade eine

<div>
    Welcome !!
</div>

ABER, wenn das Projekt ausgeführt wird, wird index.cshtml zuerst gerendert und zeigt mir den Link "Teilansicht laden" ... wenn ich darauf klicke, wird eine neue Seite aufgerufen, auf der die Begrüßungsnachricht von _LoadView.cshtml in die Datei index.cshtml gerendert wird .

Was kann falsch sein?

Hinweis: Ich möchte keine Seite über AJAX laden oder Ajax.ActionLink nicht verwenden

patel.milanb
quelle

Antworten:

154

Wenn Sie die Teilansicht direkt in die Hauptansicht laden möchten, können Sie den Html.ActionHelfer verwenden:

@Html.Action("Load", "Home")

Wenn Sie die Aktion Laden nicht ausführen möchten, verwenden Sie den HtmlPartialAsync-Helfer:

@await Html.PartialAsync("_LoadView")

Wenn Sie verwenden möchten Ajax.ActionLink, ersetzen Sie Ihre Html.ActionLinkdurch:

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

und natürlich müssen Sie einen Halter in Ihre Seite aufnehmen, auf dem der Teil angezeigt wird:

<div id="result"></div>

Vergessen Sie auch nicht:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

in Ihrer Hauptansicht, um Ajax.*Helfer zu aktivieren . Und stellen Sie sicher, dass unauffälliges Javascript in Ihrer web.config aktiviert ist (dies sollte standardmäßig sein):

<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Darin Dimitrov
quelle
funktioniert gut ... das heißt, wenn ich es mit @ Html.ActionLink verwenden möchte, fungiert seine Goona als normale Anforderung und öffnet die pariale Ansicht auf einer neuen Seite? ...
patel.milanb
1
@ patel.milanb, genau. Html.ActionLink rendert einen normalen Anker in HTML, der einfach eine GET-Anforderung an die angegebene URL ausführt und den Browser darauf umleitet. Da Sie auf die Aktion Laden hingewiesen haben, die nur einen Teil zurückgibt, wird der Browser umgeleitet und zeigt diesen Teil an.
Darin Dimitrov
Oh mein! Vielen Dank, dass Sie dies gefragt und beantwortet haben! Ich habe stundenlang versucht, dies zum Laufen zu bringen, ohne die Syntax richtig zu verstehen. In den letzten ein oder zwei Stunden (plus Pausen) habe ich versucht, diese Version von Darin zum Laufen zu bringen, aber ich habe die Zeile "Nicht vergessen, einzuschließen" weggelassen und konnte nicht glauben, dass dies den Unterschied zwischen dem Laden ausmachen würde die ganze Seite und das Laden in die div (ich habe einen Fehler erwartet, keine Änderung der Anzeige), aber es tat.
Dronz
1
Hallo, in meinem Szenario möchte ich zwischen Kurzansicht und erweiterter Ansicht wechseln. Ich habe eine Ajax.ActionLinkin der UpdateTargetIdKurzansicht platziert und die ID eines übergeordneten Divs festgelegt. Wenn ich jetzt auf den Link klicke, ersetzt das Ajax-Ergebnis die gesamte Seite.
Shimmy Weitzhandler
1
Fantastische Antwort. Vielen Dank an @DarinDimitrov für solch einen perfekten. Ich war mir sicher, dass du es warst, bevor ich deinen Namen sah. :)
Mikayil Abdullayev
15

Ich hatte genau das gleiche Problem wie Leniel. Ich habe hier vorgeschlagene Korrekturen und ein Dutzend anderer Orte ausprobiert. Die Sache, die schließlich für mich funktionierte, war einfach hinzuzufügen

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

zu meinem Layout ...

Scott
quelle
Ich verbringe auch Stunden damit, dieses Problem zu lösen. In meiner Standard-MVC4-Vorlage für "Basic MVC Application" habe ich @ Scripts.Render ("~ / bundles / jquery"), aber nicht @ Scripts.Render ("~ / bundles / jqueryval"). Also füge ich einfach die zweite hinzu und Teilansichten werden auf derselben Seite anstatt auf einer neuen Seite gerendert. Vielen Dank.
user808128
Selbst für mich hat es nicht funktioniert, bis ich diese beiden Importe importiert habe.
Niraj
5

Wenn Sie dies mit einem @Html.ActionLink()tun, wird das Laden der PartialView als normale Anforderung behandelt, wenn Sie auf ein Ankerelement klicken, dh eine neue Seite mit der Antwort der PartialViewResult-Methode laden.
Wenn Sie es sofort laden möchten, verwenden Sie @Html.RenderPartial("_LoadView")oder @Html.RenderAction("Load").
Wenn Sie dies bei Benutzerinteraktion tun möchten (dh auf einen Link klicken), müssen Sie AJAX -> verwenden@Ajax.ActionLink()

Hauptbyte
quelle
Die obige Lösung funktioniert einwandfrei. Wenn ich sie also mit @ Html.ActionLink verwenden möchte, fungiert ihre Goona als normale Anforderung und öffnet die pariale Ansicht auf einer neuen Seite. Ich möchte nur meinen Geist mit der Teilansicht
klären
5

Für mich funktionierte dies, nachdem ich die AJAX Unobtrusive-Bibliothek über NuGet heruntergeladen hatte:

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

Fügen Sie in der Ansicht die Verweise auf jquery und AJAX Unobtrusive hinzu:

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

Als nächstes wollen wir mit Ajax ActionLink und div die Ergebnisse rendern:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>
Stefan Vlad
quelle
Ich hatte ein Tutorial auf Youtube verfolgt, um dies zu implementieren, und ich hatte das nicht installiert Microsoft.jQuery.Unobtrusive.Ajax. Dies trotz der Tatsache, dass ich jquery.unobstrusive-ajax.min.js installiert hatte. Danke, du hast mir viel Kopfschmerzen erspart.
Dev
2

Wenn Sie den Inhalt Ihrer Teilansicht in Ihre Ansicht einfügen möchten, können Sie ihn verwenden

@Html.Partial("PartialViewName")

oder

{@Html.RenderPartial("PartialViewName");}

Wenn Sie eine Serveranforderung stellen und die Daten verarbeiten möchten, und dann die Teilansicht an Ihre Hauptansicht zurückgeben möchten, die mit den Daten gefüllt ist, die Sie verwenden können

...
    @Html.Action("Load", "Home")
...

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

Wenn Sie möchten, dass der Benutzer auf den Link klickt und dann die Daten der Teilansicht auffüllt, können Sie Folgendes verwenden:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)
Jaimin Dave
quelle
1

Kleine Woche zu den oben genannten

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>
3d cad berater
quelle
1

RenderParital ist besser für die Leistung zu verwenden.

{@Html.RenderPartial("_LoadView");}
maxspan
quelle