Question

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

我的ActionResult Index方法有两个参数。我如何在我的javascript中定义它。
点击提交按钮后，我想要显示动画图像，然后在处理完成后停止
我明白我必须以某种方式隐藏div。不知道怎么做。

请协助。以下是我的代码。

    @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.
            }

Answer 1

之前我使用过Knockout.js，发现它非常干净简单。请在此处查看：http://knockoutjs.com/

您的网页看起来像这样：

Knockout ViewModel javascript文件 -

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脚本）

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

希望有所帮助。祝你好运！

Mvc：在将大型Excel文件加载到数据库时显示动画gif进度

1 个答案: