locked
Excel import process in Asp.Net Mvc appears with the progress bar as much as the number of data in excel RRS feed

  • Question

  • User-2003602335 posted

    I want it to appear with the progress bar when the excel import process is completed in Asp.Net Mvc. The number of data I want in excel, the progress bar should progress as much as the number of data in excel. How can I do that? I have to solve it very quickly. Please can you help me?

    This is a snippet of my code:

    [HttpPost]
        public ActionResult Upload(FormCollection formCollection)
        {
    
            var mapList = new List<AWSServerless_Google_Geocoding_Mvc.Models.Map>();
            if (Request != null)
            {
                HttpPostedFileBase file = Request.Files["FileUpload"];
                if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName))
                {
                    string fileName = file.FileName;
                    string fileContentType = file.ContentType;
                    byte[] fileBytes = new byte[file.ContentLength];
                    var data = file.InputStream.Read(fileBytes, 0, Convert.ToInt32(file.ContentLength));
                    using (var package = new ExcelPackage(file.InputStream))
                    {
                        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
                        var currentSheet = package.Workbook.Worksheets;
                        var workSheet = currentSheet.First();
                        var noOfCol = workSheet.Dimension.End.Column;
                        var noOfRow = workSheet.Dimension.End.Row;
                        for (int rowIterator = 1; rowIterator <= noOfRow; rowIterator++)
                        {
                            var map = new AWSServerless_Google_Geocoding_Mvc.Models.Map();
    
                            map.UserID = null;
                            map.Name = null;
                            map.Latitude = workSheet.Cells[rowIterator, 3].Value.ToString();
                            map.Longitude = workSheet.Cells[rowIterator, 4].Value.ToString();
                            map.Address = workSheet.Cells[rowIterator, 5].Value.ToString();
    
                            mapList.Add(map);
                        }
                    }
                }
            }
            using (LocationDBEntities db = new LocationDBEntities())
            {
                foreach (var item in mapList)
                {
                    db.Map.Add(item);
                }
                db.SaveChanges();
    
            }
            return RedirectToAction("Index", "Home");
        }

    This is a snippet of my javascript code:

    var bar = $('.progress-bar');
    var percent = $('.percent');
    var status = $('#status');
    var files = $("#FileUpload").get(0).files;
    
    $('#Myform').ajaxForm({
        beforeSend: function () {
            $('#status').empty();
            var percentVal = '0%';
            $('.progress-bar').width(percentVal);
            $('.percent').html(percentVal);
        },
        uploadProgress: function (event, position, total, percentComplete) {
            for (var i = 0; i < files.length; i++) {
                var percentVal = percentComplete + '%';
                $('.progress-bar').width(percentVal);
                $('.percent').html(percentVal);
            }
        },
        complete: function (xhr) {
            if (xhr.success == true) {
                setTimeout(function () {// wait for 5 secs(2)
                    swal({
                        title: "Başarılı!",
                        text: "Kayıt Başarılı!",
                        type: "success",
                        showCancelButtonClass: "btn-primary",
                        confirmButtonText: "OK"
                    });
                    location.reload(); // then reload the page.(3)
                }, 5000);
            }
        }
    });

    Can somebody help me with this? Thanks :)

    Wednesday, June 24, 2020 9:08 AM

Answers

  • User1686398519 posted

    Hi emre.senturk,

    According to your needs, I modified your code, please refer to it.

    • Since you did not give the page layout code, I used the bootstrap progress bar style, you can modify it according to your own needs.
    • When I tested, I found that "xhr.success" was not defined, so I changed it to "xhr.status".
    • When you use swal, "location.reload();" should be placed in "then(() => {})".

    Controller

            public ActionResult Index()
            {
                return View();
            }
            [HttpPost]
            public ActionResult Upload()
            {
                var mapList = new List<WebApplication5.Models.Map>();
                if (Request != null)
                {
                    HttpPostedFileBase file = Request.Files["FileUpload"];
                    if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName))
                    {
                        string fileName = file.FileName;
                        string fileContentType = file.ContentType;
                        byte[] fileBytes = new byte[file.ContentLength];
                        var data = file.InputStream.Read(fileBytes, 0, Convert.ToInt32(file.ContentLength));
                        using (var package = new ExcelPackage(file.InputStream))
                        {
                            ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
                            var currentSheet = package.Workbook.Worksheets;
                            var workSheet = currentSheet.First();
                            var noOfCol = workSheet.Dimension.End.Column;
                            var noOfRow = workSheet.Dimension.End.Row;
                            for (int rowIterator = 1; rowIterator <= noOfRow; rowIterator++)
                            {
                                var map = new WebApplication5.Models.Map();
                                map.UserID = null;
                                map.Name = null;
                                map.Latitude = workSheet.Cells[rowIterator, 3].Value.ToString();
                                map.Longitude = workSheet.Cells[rowIterator, 4].Value.ToString();
                                map.Address = workSheet.Cells[rowIterator, 5].Value.ToString();
                                mapList.Add(map);
                            }
                        }
                    }
                }
                if (mapList.Count() != 0)
                {
                    using (MVCTestContext db = new MVCTestContext())
                    {
                        foreach (var item in mapList)
                        {
                            db.Map.Add(item);
                        }
                        db.SaveChanges();
    
                    }
                }
                return RedirectToAction("Index", "Excel");
            }

    Page

    @using (Html.BeginForm("Upload", "Excel", FormMethod.Post, new { enctype = "multipart/form-data", id = "Myform" }))
    {
        <input type="file" id="FileUpload" name="FileUpload" />
        <input type="submit" id="UploadBtn" class="btn btn-danger" value="Upload" />
    }
    <div class="progress" style="display: none">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div id="status"></div>
    @section scripts{
        <script src="~/Scripts/jquery.form.min.js"></script>
        <script src="~/Scripts/sweetalert.min.js"></script>
        <script>
            $('#UploadBtn').click(function () {
                if ($("#FileUpload").get(0).files.length == 0) return false;
                var status = $('#status');
                $('#Myform').ajaxForm({
                    beforeSend: function () {
                        $('#status').empty();
                        $('.progress-bar').width("0%");
                        $('.progress-bar').html("0%");
                        $(".progress").css("display", "block");
                        var percentVal = '0%';
                        $('.progress-bar').width(percentVal);
                        $('.percent').html(percentVal);
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentComplete = parseInt((event.loaded / event.total) * 100);
                        var percentVal = percentComplete + '%';
                        $('.progress-bar').width(percentVal);
                        $('.progress-bar').html(percentVal);
                        $('#status').text("uploading");
                    },
                    complete: function (xhr) {
                        if (xhr.status == 200) {
                            setTimeout(function () {// wait for 5 secs(2)
                                swal({
                                    title: "Başarılı!",
                                    text: "Kayıt Başarılı!",
                                    type: "success",
                                    showCancelButtonClass: "btn-primary",
                                    confirmButtonText: "OK"
                                }).then(() => {
                                    location.reload(); // then reload the page.(3)
                                });
                            }, 5000);
                            $('#status').text("success");
                        }
                    }
                });
            });
        </script>
    }

    Here is the result.

     

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 25, 2020 9:57 AM