使用任何东西显示加载屏幕

Question

有时我的操作需要一段时间来计算。我希望能够在操作计算时显示一些东西，比如一种覆盖一切的灰色层，或者一个加载屏幕。但坦率地说，我不知道该怎么做。

我正在使用 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 文件中的一个 sn-p 代码：

$(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 方法（请参阅更新的代码），但我不知道如何解决这个问题。

Answer 1

我们隐藏主要内容，同时显示一个指标。然后我们在加载完所有内容后将它们换掉。 jsfiddle

HTML

<div>
    <div class="wilma">Actual content</div>
    <img class="fred" src="http://harpers.org/wp-content/themes/harpers/images/ajax_loader.gif" />
</div>

CSS

.fred {
    width:50px;
}
.wilma {
    display: none;
}

jQuery

$(document).ready(function () {
    $('.fred').fadeOut();
    $('.wilma').fadeIn();
});

Answer 2

首先你想让 jQuery “拦截”表单发布。然后，您将让 jQuery 负责使用 ajax 发布表单数据：

$("form").submit(function (event) {
    event.preventDefault();

    //display loading
    $("#loadingDialog").dialog("open");

    $.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");
        }
    });
});

关于 $.ajax() 方法的更多信息在这里：http://api.jquery.com/jQuery.ajax/

您可以使用 jquery 对话框来显示您的消息：http://jqueryui.com/dialog/

还有其他方法可以显示加载消息。它可以像使用带有加载图像 (http://www.ajaxload.info/) 和一些文本的 div 一样简单，然后使用 jQuery 到 .show() 和 .hide() div。

然后，在您的控制器中，只需确保您返回的是 JsonResult 而不是视图。请务必使用[HttpPost] 属性标记控制器操作。

[HttpPost]
public JsonResult TestControllerMethod(MyViewModel viewModel)
{
    //do work
    return Json(true);//this can be an object if you need to return more data
}

Answer 3

您可以尝试创建视图以加载页面的准系统，然后发出 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();
    });
});