javascript - Controller Action 完成时隐藏 div

Question

我有一个非常简单的加载微调器，它会在用户在 View 中提交表单时显示:

加载程序的 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>
}

}

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

Controller 操作

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

此 Controller 操作将一个 .csv 文件导入一个临时表，然后填充现有表中 ID 匹配的行。

当 Controller Action 完成时，如何再次隐藏 div？谢谢!

Answer 1

如果您将微调器放在 View 中并默认隐藏它，您的 Controller 操作将返回该 View 的新副本，微调器已隐藏。

或者，您可以在表单上使用一些事件，例如 onSuccess 或 onFailure:

@using (Ajax.BeginForm("MyControllerAction",
    routeValues: null,
    ajaxOptions: new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        HttpMethod     = "POST",
        UpdateTargetId = "myDiv",
        OnSuccess = "refresh()",
        OnBegin = "showProgressBar()",
        OnFailure = "hideProgressBar()",
    },
    htmlAttributes: new
    {
        id     = "myForm"
    }
))