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

本文关键字：加载 屏幕 显示 任何东 | 更新日期: 2023-09-27 18:23:50

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

我正在使用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方法（请参阅更新的代码），但我不知道如何实现这一点。

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

我们隐藏主要内容，同时显示一个指示符。然后我们在所有东西都装好后把它们换掉。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();
});

首先，您需要让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/

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

然后，在控制器中，只需确保返回的是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
}

您可以尝试创建视图来加载页面的基本内容，然后发出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();
    });
});
相关文章：