6

処理に数秒かかる可能性がある ActionResult リクエスト中に、AJAX 読み込みアイコンを表示したいと考えています。

これを達成するための最良のアプローチは何ですか？

ビルドされた検証に合格した後にのみアイコンを表示したい (私は MVC3、EF Code First を使用しているため、検証は自動的にページに配置されます)。

ActionResult 中にさらに検証/例外が発生する可能性があります。その場合、メッセージがユーザーに表示され、読み込み中のアイコンが再び消えるようにしたいと思います。

4

3 に答える 3

12

リンクを Ajax アクション リンクとして定義し、回転する GIF の ID をページのどこかに指定します。

<div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)

またはそれがフォームの場合：

@using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}
于 2011-06-24T10:39:26.443 に答える
3

次のように画像を div タグに入れます。

<div id="busydiv" style="display:none;"><img src="busything.gif" /></div>

次に、次のようにリンクを作成します。

@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)

またはフォームでこれを行います：

@using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))

ここのドキュメントに従って、不要な AjaxOptions を明らかに省略します: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

于 2011-06-24T13:42:43.170 に答える
1

ちょうど私の2セント：

Chris によって投稿されたソリューションは有効で機能しますが、以下の 2 つのJavaScriptライブラリへの参照を追加する必要があります。順序が重要であることに注意してください。

<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

バンドルとこれらすべての nu-get パッケージがプリロードされた MVC アプリケーションを作成する場合、これはおそらく問題にはなりませんが、私のように空の ASP.NET MVC アプリケーションを作成すると、問題が発生する可能性があります。

于 2016-07-17T08:27:46.770 に答える