Mvc: show animated gif for progress while loading big excel file to database

Question

I am loading a big excel file to the database. I want my users to see that there is an activity going on. I started but didn't know how to proceed.

1. My ActionResult Index method has two parameters. How do I define this in my javascript.

2. On the click of the submit button I want the animated image to show and then stop when processing is complete

3. I understand I have to hide the div somehow. Not sure how to do this.

Please assist. Here is my code below.

    @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

I have used Knockout.js for this before, and found it to be really clean and simple. Check it out here: http://knockoutjs.com/

Your page would look something like this:

Knockout ViewModel javascript file -

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

Then back in your View -

(Note: You will need to reference the knockout.js script in your View)

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

Hope that helps. Best of luck!