4

アクション メソッドが Razor ビュー エンジンを使用して MVC 3 で実行されているときに ajax 読み込みアイコンを表示するナビゲーション リンクを作成する方法について、私は広範囲に検索してきました。ローディング アイコンの追加に関する多くの情報を見つけましたが、それらはすべて現在のビュー内のデータの投稿に関連しているようです。

他のページでアクション メソッドを呼び出すためのアクション リンクを含む単純なメニュー ページがあり、それによってビューがレンダリングされます。OrdersController および Index アクション メソッドに移動する例を以下に示します。

Menu.cshtml

@Html.ActionLink("Orders", "Index", "Orders",null,new { id = "OrderLink" })<br />

Index アクションの処理中およびビューが返される前に ajax 読み込みアイコンを表示するように上記のリンクを変更しようとしています。

読み込みアイコンを含む div を作成し、共有の _Layout.cshtml ページに配置しました。

_Layout.cshtml

<div id="ajaxLoaderDiv" style="position:fixed; top:40%; left:45%; z-index:1234; display:none;">
    <img src="@Url.Content("~/Images/AjaxLoaderImg.gif")" alt="Loading..."class="ajax-loader" />
</div>

ajax 読み込みアイコンを試して表示するために、リンクを Ajax ActionLink に変更してみました。

Menu.cshtml

@Ajax.ActionLink("Orders", "Index", "Orders", new AjaxOptions { LoadingElementId="ajaxLoaderDiv" });<br />

これは、ajax Loading アイコンを数秒間表示するという意味で機能します。また、OrdersController の Index アクション メソッド内にブレークポイントを配置することもでき、ヒットします。ただし、アクション メソッドが完了すると、Orders\Index.cshtml はページにレンダリングされません。Menu\Index.cshtml ページにとどまっています。

Orders/Index.cshtml がビューをレンダリングすることになっていることはわかっています。

OrdersController.cs

public ActionResult Index()
{
    ....

return View(OrdersViewModel);
}

ここで何が間違っていますか？このビューは、レンダリングするのではなく、私の ajax 呼び出しに返されますか? この機能を取得するにはどうすればよいですか?

これについて間違った方法で行っている場合は、お知らせください。

リクエストを行うときに、リンクではなく、ターゲット ページのアクション メソッド内でこれを行う必要がありますか? おそらく、私が要求しているインデックスアクションメソッドのコードの最初の行として読み込みアイコンを表示し、ビューを返す直前に再び非表示にすることでしょうか?

JQueryの表示/非表示の組み合わせでこれを試してみませんか？

<script type="text/javascript">
    function showLoadingSpinner() {
        $("#ajaxLoaderDiv").show();
    };
    function hideLoadingSpinner() {
        $("#ajaxLoaderDiv").hide();
    };

</script>

事前にすべてのヘルプとアドバイスに感謝します

チャド

4

2 に答える 2

9

私の解決策:

自分で問題を解決しましたが、同様のことを試みている他の人のために解決策を投稿すると思いました.

menu.cshtml ページのリンクを、ajax リンクではなく @Html.ActionLink として保持しました。しかし、javacript を呼び出してスピナーを表示する onclick html 属性を追加しました。

menu.cshtml

@{
    ViewBag.Title = "Menu";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container" style="text-align:center">
    <div>
        @Html.ActionLink("Orders", "Index", "Orders", null, new { id = "OrderLink", onclick="showPageLoadingSpinner()" })
    </div>
</div>

_Layout.cshtml 部分ビューにスピナーのスクリプトがあります。これは、私の menu.cshtml ビューで参照されています: Layout = "~/Views/Shared/_Layout.cshtml";

以下は、ajax div とスクリプト参照を含む完全な _Layout.cshtml ページです。

_Layout.cshtml

<html>
<head>
    @Content.Script("jquery-1.5.1.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
</head>

<body>
    <div id="ajaxLoaderDiv" style="position:fixed; top:40%; left:45%; z-index:1234; display:none;">
    </div>
    <div class="container">
         @RenderBody()
    </div>
</body>
</html>

<script type="text/javascript">
function showPageLoadingSpinner() {
     $('#ajaxLoaderDiv').show();
     $('#ajaxLoaderDiv').append(
                '<img src="@Url.Content("~/Images/AjaxLoaderImg.gif")" alt="Loading..."class="ajax-loader" />'
     );
 }

 function hidePageLoadingSpinner() {
     setTimeout(function () {
         $('.ajax-loader').remove();
         $('#ajaxLoaderDiv').hide();
     }, 20000);
 }

</script>

menu.cshtmlページでリンクをクリックすると、アクションリンクが次のページに移動する前にjavascriptが実行されてスピナーが表示されるため、これは私にとってはうまくいきます。したがって、ナビゲートしているページがロードされている間、スピナーが表示されます。

新しいページの準備が整うと、レンダリングされて表示されます。送信された新しいページ (Orders/Index.cshtml) は ajax div を含む同じレイアウト ページを使用しますが、レイアウトによって設定された ajaxloader div プロパティ display:none を使用して新しいページを読み込みます。これにより、ページの読み込み中に表示された ajax スピナーが削除されます。

したがって、スピナーは新しいページがレンダリングされるときに常に削除されるため、JavaScript を呼び出してスピナーを非表示にする必要はありません。

これは不適切なアプローチであり、より良い方法を示すことに成功したと他の誰かが私に言わない限り、私はこれを答えとして受け入れるつもりです.

于 2013-12-11T17:20:31.180 に答える
0

アクション メソッドのシグネチャを次のように変更します。

public PartialViewResult Index()
{
    ....

return PartialView(OrdersViewModel);
}

また、Ajax.ActionLink を適切に機能させるには、目立たない ajax への参照を追加する必要があります。

スクリプト フォルダーにない場合を除き、nuget 経由で取得できます。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
于 2013-10-25T17:10:53.440 に答える