2

計算に時間がかかる操作が時々あります。操作の計算中に、すべてを覆う一種の灰色のレイヤーやロード画面などを表示できるようにしたいと考えています。しかし、私は率直に言って、それを行う方法がわかりません。

私は MVC4 を使用して MVC アプリを構築しています。私は jQuery から始めて、あらゆる提案を受け入れています。どうすればそれを行うことができますか？

編集

これが私が構築しているページのサンプルです。

<h2>Load cards</h2>

<script type="text/javascript">
    $(document).ready(function () {
        $("form").submit(function (event) {
            event.preventDefault();

            alert("event prevented"); // Code goes here
            //display loading
            $("#loadingDialog").dialog("open");

            alert("dialog opened"); // Never reaches here.

            $.ajax({
                type: $('#myForm').attr('method'),
                url: $('#myForm').attr('action'),
                data: $('#myForm').serialize(),
                accept: 'application/json',
                dataType: "json",
                error: function (xhr, status, error) {
                    //handle error
                    $("#loadingDialog").dialog("close");
                },
                success: function (response) {
                    $("#loadingDialog").dialog("close");
                }
            });
            alert("ajax mode ended");
        });
    });
</script>

@using (Html.BeginForm())
{
    <div class="formStyle">
        <div class="defaultBaseStyle bigFontSize">
            <label>
                Select a Set to import from:
            </label>
        </div>
        <div class="defaultBaseStyle baseFontSize">
            Set: @Html.DropDownList("_setName", "--- Select a Set")<br/>    
        </div>
        <div id="buttonField" class="formStyle">
            <input type="submit" value="Create List" name="_submitButton" class="createList"/><br/>
        </div>
    </div>
}

これが私のjavascriptファイルからのコードのスニペットです:

$(document).ready(function ()
{
    $(".createList").click(function() {
        return confirm("The process of creating all the cards takes some time. " +
            "Do you wish to proceed?");
    });
}

おまけとして（必須ではありませんが）、できればユーザー確認後に表示してほしいです。そうでなければ、このコードを置き換えてもかまいません。

編集

以下のRobの提案に従って、これが私のコントローラーメソッドです。

[HttpPost]
public JsonResult LoadCards(string _submitButton, string _cardSetName)
{


    return Json(true);
}

そして、これが「古い」 ActionResult メソッドです。

[HttpPost]
public ActionResult LoadCards(string _submitButton, string _setName)
{
    // Do Work

    PopulateCardSetDDL();
    return View();
}

現時点では、コードが Json メソッドに到達することはありません。そこにある ajax メソッドに入ります (更新されたコードを参照) が、これを機能させる方法がわかりません。

4

3 に答える 3

0

ページのベアボーンをロードするビューを作成してから、AJAX 要求を発行してページ データをロードすることができます。これにより、ローディング ホイールを表示したり、ページを灰色でレンダリングしたりして、戻ってきたときにその灰色のページをメイン データで上書きすることができます。

これは私たちのアプリケーションで行う方法ですが、おそらくもっと良い方法があります...そうでない場合は、コードを投稿します!

編集:使用するコードは次のとおりです。

コントローラーのアクション方法:

[HttpGet]
public ActionResult Details()
{
    ViewBag.Title = "Cash Details";
    return View();            
}

[HttpGet]
public async Task<PartialViewResult> _GetCashDetails()
{
    CashClient srv = new CashClient();
    var response = await srv.GetCashDetails();
    return PartialView("_GetCashDetails", response);
}

詳細ビュー:

<div class="tabs">
<ul>
    <li>Cash Enquiry</li>
</ul>
<div id="About_CashEnquiryLoading" class="DataCell_Center PaddedTB" @CSS.Hidden>
    @Html.Image("ajax-loader.gif", "Loading Wheel", "loadingwheel")
</div>
<div id="About_CashEnquiryData"></div>
   <a class="AutoClick" @CSS.Hidden data-ajax="true" data-ajax-method="GET" 
      data-ajax-mode="replace" data-ajax-update="#About_CashEnquiryData" 
      data-ajax-loading="#About_CashEnquiryLoading" data-ajax-loading-duration="10"
      href="@Url.Action("_GetCashDetails", "Home")"></a>
</div>

カスタム Javascript:

$(document).ready(function () {
    //  Fire any AutoClick items on the page
    $('.AutoClick').each(function () {
        $(this).click();
    });
});
于 2013-07-17T19:49:04.523 に答える