web-dev-qa-db-ja.com

ビュー内に部分ビューをロードする方法

私はこの部分的なビューと非常に混同しています...

メインビュー内に部分ビューをロードしたい...

ここに簡単な例があります...

Homecontroller IndexアクションのIndex.cshtmlをメインページとしてロードしています。

index.cshtmlでリンクを作成しています

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

homeControllerに新しいアクションを追加しています

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

_LoadView.cshmtlで私はちょうど持っています

<div>
    Welcome !!
</div>

しかし、プロジェクトを実行すると、index.cshtmlが最初にレンダリングされ、「Load Partial View」リンクが表示されます...クリックすると、_LoadView.cshtmlからindex.cshtmlにウェルカムメッセージがレンダリングされる新しいページに移動します。

何が悪いのでしょうか？

注：AJAXからページをロードしたくない、またはAjax.ActionLinkを使用したくない

asp.net-mvcasp.net-mvc-3razorasp.net-mvc-partialview
70
patel.milanb

メインビュー内に部分ビューを直接ロードする場合は、Html.Actionヘルパーを使用できます。

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

または、ロードアクションを実行したくない場合は、HtmlPartialのheplerを使用します。

@Html.Partial("_LoadView")

Ajax.ActionLinkを使用する場合は、Html.ActionLinkを次のように置き換えます。

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

そしてもちろん、パーシャルが表示されるページにホルダーを含める必要があります：

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

含めることも忘れないでください：

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

メインビューでAjax.*ヘルパーを有効にします。そして、控えめなjavascriptがweb.configで有効になっていることを確認します（デフォルトで有効になっているはずです）：

<add key="UnobtrusiveJavaScriptEnabled" value="true" />
148
Darin Dimitrov

私はレニエルとまったく同じ問題を抱えていました。ここで提案されている修正と、他の多くの場所を試しました。最終的に私のために働いたのは、単に追加することでした

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

私のレイアウトに...

16
Scott

私にとっては、AJAX控えめなライブラリをNuGetでダウンロードした後、これは機能しました。

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

ビューにjqueryとAJAX Unobtrusiveへの参照を追加するより：

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

次に、Ajax ActionLinkおよびdivが結果をレンダリングしたい場合：

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

<div id="toUpdate"></div>
5
Stefan Vlad

@Html.ActionLink()でそれを行うと、アンカー要素をクリックしたとき、つまりPartialViewResultメソッドの応答で新しいページをロードするとき、PartialViewのロードは通常のリクエストとして処理されます。
すぐにロードする場合は、@Html.RenderPartial("_LoadView")または@Html.RenderAction("Load")を使用します。
ユーザーインタラクション（リンクのクリックなど）を行う場合は、AJAX-> @Ajax.ActionLink()を使用する必要があります。

5
Major Byte

RenderParitalはパフォーマンスのために使用するのが適切です。

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

上記への小週

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

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

ビュー内に部分ビューのコンテンツを追加する場合は、使用できます

@Html.Partial("PartialViewName")

または

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

サーバーをリクエストしてデータを処理し、そのデータで満たされたメインビューに部分ビューを返す場合は、使用できます

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

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

ユーザーがリンクをクリックしてから、部分ビューのデータを入力するようにしたい場合は、次を使用できます。

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