加载/请-等待弹出的MVC视图 [英] Loading/Please-Wait Pop-Up in MVC View

问题描述

我已经开发使用MVC架构的Web应用程序。我的控制器需要一些时间来处理输入，将其发送到服务器，然后返回到视图。我希望有一个加载/请-等待那种弹出来显示和退出时自动返回的ActionResult的看法。在我的控制器所对应的部分看起来是这样的：

  [HttpPost] [STAThread]
    公众的ActionResult指数（DropDownModel模型）
    {        BillingToolInterface_1.Program P =新BillingToolInterface_1.Program（州，billtype，经常性预算，paytype，IA，西班牙语，退伍​​军人，地位，最不发达国家，速度，调整，billtemplate，readtype，服务器1，服务器，选择，paramcheck）;         //上面的步骤需要像15秒内把服务器结果
//DataJoin.Connector.data。我想在此期间，要被显示的对话框。
        model.Message = DataJoin.Connector.data;
        返回查看（模型）;
    }
 

解决方案

您可以使用这样的提交表单：

  @using（Ajax.BeginForm（指数，控制器，空，新AjaxOptions {列举HTTPMethod =POST，LoadingElementId =请-WAIT}，{新 -  - 如果需要，一些HTML  - }））
 

这将显示请稍候消息，直到回调结束。该请，等待可能会出现一些标记，如：

 ＆LT; D​​IV ID =请等待的风格=显示：无;＆GT;
    ＆LT; D​​IV CLASS =模式＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =微调＆GT;加载...＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

该标记的CSS可能是（不是最好的CSS，但工程）：

 ＃请等待
{
    位置：绝对的;
    左：0;
    顶部：0;
    宽度：100％;
    高度：100％;
}    ＃请等待.modal
    {
        的z-index：1999;
        左：0;
        顶部：0;
        宽度：100％;
        高度：100％;
        不透明度：0.5;
        -moz-不透明：0.5;
        背景色：黑色;
        保证金左：0;
    }    ＃请等待.spinner
    {
        的z-index：2000;
        填充顶：20像素;
        填充左：20像素;
        背景：＃E5E5E5 URL（loading.gif）不重复15px的中心;
        宽度：120像素;
        高度：40像素;
        边界：2px的固体＃666;
        字体重量：大胆的;
        文本对齐：中心;
        位置：相对;
        保证金左：自动;
        保证金右：自动;
        顶部：35％;
        显示：块;
    }
 

I have developed a web application using MVC architecture. My controller takes some time to process input, send it to the server and return it back to the view. I want a Loading/Please-wait kind of pop-up to be shown and exited automatically when the ActionResult returns the view. The corresponding part in my controller looks like this:

[HttpPost][STAThread]
    public ActionResult Index(DropDownModel model)
    {

        BillingToolInterface_1.Program p = new BillingToolInterface_1.Program(state, billtype, recurring, budget, paytype, IA, spanish, veteran, status, LDC, rate, adjustments, billtemplate, readtype, server1, server2, choice, paramcheck);

         //above step takes like 15 seconds to put the server result in       
//DataJoin.Connector.data. I want a dialog to be displayed during this time. 




        model.Message = DataJoin.Connector.data; 


        return View(model);
    }

解决方案

You can use something like this to submit your form:

@using (Ajax.BeginForm("Index", "Controller", null, new AjaxOptions {HttpMethod = "POST", LoadingElementId = "please-wait"}, new {-- some html if needed --}))

That will show the please wait message until the callback finishes. The please-wait could be some markup like:

<div id="please-wait" style="display: none;">
    <div class="modal"></div>
    <div class="spinner">Loading...</div>
</div>

The css for that markup could be (not the best css but works):

#please-wait
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

    #please-wait .modal
    {
        z-index: 1999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        -moz-opacity: 0.5;
        background-color: black;
        margin-left: 0;
    }

    #please-wait .spinner
    {
        z-index: 2000;
        padding-top: 20px;
        padding-left: 20px;
        background: #E5E5E5 url("loading.gif") no-repeat 15px center;
        width: 120px;
        height: 40px;
        border: 2px solid #666;
        font-weight: bold;
        text-align: center;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 35%;
        display: block;
    }

这篇关于加载/请-等待弹出的MVC视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！