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文件中的一段代码：

$(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

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

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]属性标记Controller操作。

[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

我们隐藏主要内容，同时显示指标。然后我们在加载完所有内容后将它们交换掉。 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();
});

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

3 个答案:

HTML

CSS

的jQuery