C# Mvc：在将大型excel文件加载到数据库时显示动画gif以查看进度

我正在将一个大的excel文件加载到数据库中。我希望我的用户看到正在进行的活动。我开始了，但不知道如何继续

我的ActionResult索引方法有两个参数。如何在javascript中定义这一点

单击submit按钮，我希望动画图像显示出来，然后在处理完成后停止

我知道我得把潜水艇藏起来。不知道怎么做

请帮忙。下面是我的代码

    @model SampleTemplate.Models.ResultViewModel

    @{
        ViewBag.Title = "Index";
    }

    <h2>File upload section</h2>

    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="uploadSection">

            <div id="divloading">
                <p style="position:absolute; top:30%; left:45%;color: Red;">
                    Excel file in process, please wait...<img src="../../Images/animated.gif" />
                </p>
            </div>
            <div>
                <p class="headerSection">Select script</p>
                <p>
                <select name = "genericId">
                        <option value="12.1">12_1_flat_goods</option>
                        <option value="12.2">12_2_mats_bm</option>                             
                </select>
                  </p>                                      
            </div>
            <div id="spacebetween">
                <p class="headerSection">Path to source file: </p>
                <p class="spacebelow"><input type="file"  name="file"  value="" /> </p>  
                <p><button id="submi" name="Submit" onclick="JavascriptFunction();">Submit</button></p>              
            </div>       
        </div>    

    }

    <script type="text/javascript" language="javascript">
        function JavascriptFunction() {
            var url = '@Url.Action("","Home")';
            $("#divLoading").show();

        }
    </script>

    ...Here is my method

     [HttpPost]
            public ActionResult Index(HttpPostedFileBase file, ResultViewModel resModel)
            {
                //code to upload excel file goes here. No need to show this.
            }

@model SampleTemplate.Models.ResultViewModel
@{
ViewBag.Title=“Index”；
}
文件上载部分
@使用（Html.BeginForm（“Index”，“Home”，FormMethod.Post，new{enctype=“multipart/formdata”}））
{

Excel文件正在处理中，请稍候。。。

选择脚本

12件1件扁平货物
12_2_垫(bm)

源文件的路径：


提交

}
函数JavascriptFunction（）{
var url='@url.Action（“，“Home”）；
$（“#divLoading”）.show（）；
}
…这是我的方法
[HttpPost]
公共操作结果索引（HttpPostedFileBase文件、ResultViewModel resModel）
{
//上传excel文件的代码在这里。无需显示。
}

我以前使用过Knockout.js，发现它非常简洁。 在这里查看：

您的页面将如下所示：

敲除ViewModelJavaScript文件-

function TestViewModel() {
    var self = this;
    self.itemsToDisplay = ko.observableArray([]);

    //this property can be used to hold the bool for when you first hit the upload button
    self.uploadStarted = ko.observable(false); // when page is loaded, this is false

    //this is a property that will hold the bool value to show/hide the gif after the upload has started
    self.uploadCompleted = ko.observable(false); // when page is loaded this is false

    ko.applyBindings(self);
};

然后回到你的观点-

（注意：您需要在视图中引用knockout.js脚本）

//您的gif图像参考将转到此处
//仅当uploadCompleted为false且uploadStarted为true时才会显示
上传
var viewModel=newtestviewmodel（）；
//对控制器方法进行ajax调用以上载内容
//成功后，将加载的属性设置为true以隐藏gif
$（“#上载按钮”）。单击（函数（）{
viewModel.uploadStarted（true）；
$j.ajax({
类型：“POST”，
url:“../home/Index”，
数据：ko.toJSON（{file:file，resModel:model}），
contentType:“应用程序/json”，
成功：功能（数据）{
//控制器将返回数据中的值
//更新viewModel属性
viewModel.itemsToDisplay（数据）；
viewModel.uploadCompleted（真）；
viewModel.uploadStarted（false）；
}
});
});

希望有帮助。 祝你好运

-->您可能想看看Jquery UI blocker，它是一个非常好用的插件

<div data-bind="visible: !uploadCompleted() && uploadStarted()">
    // your gif image reference will go here 
    // it will only be displayed when uploadCompleted is false and uploadStarted is true
</div>
<button type="button" id="uploadButton" name="Submit">Upload</button>

<script type="text/javascript">
    var viewModel = new TestViewModel();

    // make an ajax call to your controller method to upload your content
    // on success set your loaded property to true to hide your gif
    $('#uploadButton').click(function() {
        viewModel.uploadStarted(true);

        $j.ajax({
            type: "POST",
            url: "../home/Index",
            data: ko.toJSON({ file: file, resModel: model}),
            contentType: "application/json",
            success: function (data) {
                // your controller will return your values in data

                // update your viewModel properties
                viewModel.itemsToDisplay(data);
                viewModel.uploadCompleted(true);
                viewModel.uploadStarted(false);
            }
         });
     });
</script>