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

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

我正在使用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>
}

作为奖励，这不是强制性的，如果可能的话，我希望在用户确认后显示。否则，我不介意替换此代码

编辑

根据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方法查看更新的代码，但我不知道如何实现这一点。

您可以尝试创建视图来加载页面的基本内容，然后发出ajax请求来加载页面数据。这将使您能够显示加载轮，或者让您以灰色呈现页面，当灰色页面返回时，主数据将覆盖该页面

我们在应用程序中就是这样做的，但是可能有更好的方法。。。 如果不是，我会发布一些代码

编辑：以下是我们使用的代码：

控制器动作方法：

---

首先，您需要让jQuery截取表单post。然后让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方法的更多信息，请参见：

您可以使用jquery对话框显示消息：

还有其他显示加载消息的方法。它可以简单到使用一个带有加载图像和一些文本的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
}

---

我们隐藏主要内容，同时显示指示器。然后我们在加载所有内容后交换它们

HTML jQuery

---

看看我喜欢jQuery的插件。在演示中没有消息的阻止可能对您有效。您如何向服务器发布？jQuery AJAX还是一篇普通的帖子？我只需要向用户显示一些东西，告诉他嘿，等等，它正在加载，而下面的操作正在执行。最好的方法是使用jQuery的$.AJAX方法发布到服务器。您可以连接一个javascript函数，以便在文章之前和之后调用。这样，您可以显示/隐藏装载模式或状态消息。我会看看是否能为您找到一个好的示例。@Herve为了响应您的更新，我更改了jquery选择器。如果您想给表单指定一个特定的ID，那么可以使用myFormId。请确保该表单是您页面上唯一的表单。好的，我将尝试此表单并给出结果。我已经更新了帖子，以便您可以看到我迄今为止所做的工作。事情还没有发生。调试时您是否看到任何javascript错误？您正在调用$loadingDialog.dialog。。。在调用open之前初始化对话框的选项？我很感兴趣，这就是我想要实现的。请参阅更新的代码，了解到目前为止我所做的工作。

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

$(document).ready(function () {
    //  Fire any AutoClick items on the page
    $('.AutoClick').each(function () {
        $(this).click();
    });
});

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

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

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

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

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