Question

我有一个非常简单的加载微调器，当用户在视图中提交表单时显示：

装载机的HTML

<div id="loading">
<img src="~/img/loading-image.gif"/>
<br/>
<span id="loading-text">Upload can take several minutes.</span>
</div>

装载机的CSS

#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
text-align: center;
}

#loading-text {
font-weight: bold;
margin-top: 15px;
}

装载机的Javascript

$('#run-button').click(function() {
    $('#loading').show();
});

上传

@using (Html.BeginForm("UploadValidationTable", "OutstandingCredit", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="fileupload fileupload-new" id="upload-container" data-provides="fileupload">
    <span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span>
    <span class="fileupload-exists">Change</span><input type="file" name="csvFile" id="csvFile" /></span>
    <span class="fileupload-preview"></span>
    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>

    <button type="submit" id="run-button" class="btn btn-info">Run</button>
</div>

if (TempData["Success"] != null)
{
<div>
    <label id="success">@TempData["Success"]</label>
</div>
}
else if(TempData["Error"] != null)
{
<div>
    <label id="error">@TempData["Error"]</label>
</div>
}

}

正在执行控制器操作时正在显示加载程序。该操作可能需要几分钟，因为有很多数据库调用：

控制器操作

        [HttpPost]
public ActionResult UploadValidationTable(HttpPostedFileBase csvFile)
{
    var inputFileDescription = new CsvFileDescription
    {
        SeparatorChar = ',',
        FirstLineHasColumnNames = true
    };
    var cc = new CsvContext();
    var filePath = uploadFile(csvFile.InputStream);
    var model = cc.Read<Credit>(filePath, inputFileDescription);

    try
    {
        var entity = new TestEntities();
        foreach (var item in model)
        {
            var tc = new TemporaryCsvUpload
            {
                Id = item.Id,
                CreditInvoiceAmount = item.CreditInvoiceAmount,
                CreditInvoiceDate = item.CreditInvoiceDate,
                CreditInvoiceNumber = item.CreditInvoiceNumber,
                CreditDeniedDate = item.CreditDeniedDate,
                CreditDeniedReasonId = item.CreditDeniedReasonId,
                CreditDeniedNotes = item.CreditDeniedNotes
            };
            entity.TemporaryCsvUploads.Add(tc);

            var idMatches = entity.Authorizations.ToList().Where(x => x.Id == tc.Id);

            foreach (var number in idMatches)
            {
                number.CreditInvoiceDate = tc.CreditInvoiceDate;
                number.CreditInvoiceNumber = tc.CreditInvoiceNumber;
                number.CreditInvoiceAmount = tc.CreditInvoiceAmount;
                number.CreditDeniedDate = tc.CreditDeniedDate;
                number.CreditDeniedReasonId = tc.CreditDeniedReasonId;
                number.CreditDeniedNotes = tc.CreditDeniedNotes;
            }
        }
        entity.SaveChanges();
        entity.Database.ExecuteSqlCommand("TRUNCATE TABLE TemporaryCsvUpload");

        TempData["Success"] = "Updated Successfully";

    }
    catch (LINQtoCSVException)
    {
        TempData["Error"] = "Upload Error: Ensure you have the correct header fields and that the file is of .csv format.";
    }

    return View("Upload");
}

此控制器操作将.csv文件导入临时表，然后填写ids匹配的现有表中的行。

如何在控制器操作完成后再次隐藏div？谢谢！

Answer 1

你可以做几件事......但这里是简单的逻辑

在 layout.cshtml
中

@RenderSection("JavaScript", required: false)

在您的视图中

@section JavaScript
{
    @Html.Raw(ViewBag.message)
}

在您的控制器中

ViewBag.message = @"<script type='text/javascript' language='javascript'>$('#loading').hide();</script>";

Answer 2

如果您将微调器放在视图中并默认隐藏它，您的控制器操作将返回该视图的新副本，并隐藏微调器。

或者，您可以在表单上使用某些事件，即onSuccess或onFailure：

+0x44a2

控制器操作完成时隐藏div

2 个答案: