آموزش نحوه استفاده از Progressbar در ASP.net MVC

پاسخ هوش مصنوعی

برای نمایش یک Progressbar در ASP.NET MVC و به روزرسانی آن به صورت زنده در حین بارگذاری فایل، می توانید از AJAX و jQuery استفاده کنید. در ادامه مراحل انجام این کار تشریح می شود:

1. **ایجاد Progressbar در HTML:** ابتدا یک Progressbar در فایل View خود ایجاد کنید.

<div id="progressBar" style="width: 100%; background-color: #f3f3f3;">
    <div id="progress" style="width: 0%; height: 30px; background-color: #4caf50;"></div>
</div>
<div id="status"></div>

2. **نوشتن کد JavaScript برای AJAX:** حالا از jQuery برای انجام یک درخواست AJAX برای بارگذاری فایل و به روزرسانی Progressbar استفاده کنید.

$(document).ready(function() {
    $('#uploadButton').click(function() {
        var formData = new FormData($('#uploadForm')[0]);
        
        $.ajax({
            url: '/YourController/Upload', // مسیر اکشن کنترلر شما
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(event) {
                        if (event.lengthComputable) {
                            var percentComplete = (event.loaded / event.total) * 100;
                            $('#progress').css('width', percentComplete + '%');
                            $('#status').text(Math.round(percentComplete) + '% بارگذاری شده');
                        }
                    }, false);
                }
                return xhr;
            },
            success: function(data) {
                $('#status').text('بارگذاری کامل شد!');
            },
            error: function() {
                $('#status').text('خطا در بارگذاری فایل.');
            }
        });
    });
});

3. **ایجاد اکشن در کنترلر:** اکنون یک اکشن در کنترلر خود ایجاد کنید که فایل را بارگذاری کند. در اینجا می توانید از وضعیت بارگذاری و تعداد رکوردها استفاده کنید.

public ActionResult Upload(HttpPostedFileBase file) {
    if (file != null && file.ContentLength > 0) {
        // پردازش فایل و اضافه کردن رکوردها به دیتابیس
        // در اینجا می توانید تعداد رکوردها را پیگیری کنید
    }
    return Json(new { success = true });
}

با استفاده از این کدها، شما یک Progressbar ایجاد می کنید که در حین بارگذاری فایل، وضعیت بارگذاری را برای کاربر نمایش می دهد. با اضافه کردن به روزرسانی ها در کنترلر و تنظیم AJAX به درستی، می توانید به یک تجربه کاربری بهتری دست یابید.