Wie kann ich eine Teilansicht in die Ansicht laden?

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

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

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

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

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>

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

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>

RenderParital ist besser für die Leistung zu verwenden.

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