web-dev-qa-db-ja.com

asp.net MVCで部分ビューを送信するときに読み込みスピナーを表示するにはどうすればよいですか？

「続行」をクリックすると部分ビューをロードするアプリケーションを作成しました。サーバーが少しハングすることがあるので、ユーザーが送信をクリックしたときに、ページが何かを実行していることを知らせるために、何らかの読み込みメッセージまたはスピナーを表示します。

これは単なる標準フォームですが、私の送信コードは次のようになります（例を表示できるようにフィールドが含まれています）。

                    <div class="form-group">
                    @Html.LabelFor(m => m.JointAdditionalIncomeSource, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        <div class="col-sm-4">
                            @Html.TextBoxFor(m => m.JointAdditionalIncomeSource, new { @class = "form-control", placeholder = "Additional Income Source" })
                            @Html.ValidationMessageFor(m => m.JointAdditionalIncomeSource)
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-sm-10">
                <div class="col-sm-4">
                    <input type="submit" value="Back" id="back" class="btn btn-default" />
                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                </div>
            </div>
        </div>

私はこれをする方法についてグーグルで周りを見回しました、そして今のところ運がありません。誰もがその例を持っている場合、jqueryは悪い方法ではありません。

アップデート：

これは動作していない私の現在のコードです。

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


<script>
    $('#continue').submit(function () {
        $('#LoanType').hide();
    });
</script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

<body>
    <!--If user has javascript disabled-->
    <noscript>
        <div style="position: fixed; top: 0px; left: 0px; z-index: 3000;
                                  height: 100%; width: 100%; background-color: #FFFFFF">
            <p style="margin-left: 10px">To continue using this application please enable Javascript in your browser.</p>
        </div>
    </noscript>

    <!-- WIZARD -->
    <div id="MyWizard" class="site-padding-top container">


        <div data-target="#step1" id="step1" class="app-bg">

            <div class="form-horizontal">
                <div id="LoanType">
                    <div class="divider-app">
                        <p>Loan Type</p>

                    </div>
                    @using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" }))
                    {
                        <div class="form-group">
                            @Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" })
                            <div class="col-sm-10">
                                <div class="col-sm-4">
                                    @Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" })
                                </div>
                            </div>
                        </div>

                        <div class="form-group" id="LoanTypeSubmit">
                            <div class="col-lg-offset-3 col-sm-10">
                                <div class="col-sm-4">

                                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                                </div>
                            </div>
                        </div>

                    }
                    <div id="divLoading"></div>
                </div>

コントローラの遅延が機能しています。

javascriptjqueryasp.netasp.net-mvc
9
TheDizzle

ここに完全なソリューションがあります-

あなたがこのようなajaxコントローラを持っているとしましょう-

    public ActionResult Ajax()
    {
        return View();
    }

次のajaxビューを提供します-

@{
    ViewBag.Title = "Ajax";
}

<h2>Ajax</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" }))
{
    <input type="submit" value="Load Rules" />
}

<div id="divLoading"></div>

<div id="Rules"></div>

次に、送信ボタンをクリックすると、次のコントローラーにヒットします。これには、部分的なビューの提供に5秒の遅延（長時間実行タスクのシミュレーション）があります-

    public ActionResult LoadRules(DDLModel model)
    {
        System.Threading.Thread.Sleep(5000);
        return PartialView("MyPartial");
    }

部分ビューは単純なビューです-

<div>
    This is Partial View
</div>

ここでは、ロードされていることを示すために、次のgifファイルを使用しました-

enter image description here

送信ボタンをクリックすると、進行状況が次のように表示されます-

enter image description here

サーバー側で5秒の遅延が完了すると、部分的なビューが表示されます-

enter image description here

21
ramiramilu