بسم الله الرحمن الرحیم

در این مقاله به مطالب زیر می پردازیم:

• Ajax چیست؟

• مزایای AJAX

• معایب AJAX

• Asp.Net AJAX چیست؟

• کنترل ها در Asp.Net AJAX

• Validation ها در ASP.NET AJAX

• آپلود همزمان چند فایل و تصویر به صورت Ajax در Asp.Net Core

بسم الله الرحمن الرحیم

در این مقاله به مطالب زیر می پردازیم:

• Ajax چیست؟

• مزایای AJAX

• معایب AJAX

• Asp.Net AJAX چیست؟

• کنترل ها در Asp.Net AJAX

• Validation ها در ASP.NET AJAX

• آپلود همزمان چند فایل و تصویر به صورت Ajax در Asp.Net Core

----------------------------------------------------------------------------------------------

Ajax چیست؟

Ajax در دات نت

AJAX مخفف جاوا اسکریپت و XML است. Ajax مبتنی بر یک تکنیک وب و ترکیبی از تکنیک های رایج مانند HTML / XHTML، CSS، XML / XSLT، Object Model Document (DOM)، جاوا اسکریپت و شیء XMLHttpRequest برای ایجاد برنامه های Rich Internet (RIA) است.

ایجکس به کاربر اجازه می دهد با استفاده از یک وب سرور به صورت یکپارچه، بدون استفاده از افزونه ارتباط برقرار کند. این تعامل ناهمزمان از کاربر با سرور وب با کمک شیء XMLHttpRequest موجود در مرورگرها امکان پذیر است. بعبارتی اهمیت آشنایی با Ajax، ارائه تجربه‌ کاربری بهتری از برنامه‌های وب، به مصرف کنندگان نهایی آن می‌باشد. به این ترتیب می‌توان درخواست‌های غیرهمزمانی (asynchronous) را با فرمت XML یا Json به سرور ارسال کرد و سپس نتیجه نهایی را که حجم آن نسبت به یک صفحه کامل بسیار کمتر است، به کاربر ارائه داد.

مزایای AJAX

1. از آنجا که AJAX  بر اساس XML و جاوا اسکریپت است می توان گفت که مستقل از پلت فرم است. به این معنی است که می تواند با هر مرورگر مورد استفاده قرار گیرد.
2. AJAX برنامه شما را کاربر پسند تر، سریع تر و تعاملی تر می کند.
3. با استفاده از AJAX، اسکریپت جاوا اسکریپت به طور مستقیم با استفاده از XMLHttpRequest با سرور ارتباط برقرار می کند و می تواند بدون استفاده از بارگذاری مجدد صفحه، داده ها را با سرور مبادله کند.
4. AJAX از انتقال داده های ناسازگار (درخواست HTTP) بین مرورگر و وب سرور استفاده می کند. به این طریق به صفحات وب اجازه میدهد که بتوانند به جای تمام اطلاعات، اطلاعات کمتری را نیز از سرور درخواست کنند.
5. ایجکس اتصال از را دور به سرور را به حداقل می رساند.

معایب AJAX

1. AJAX مبتنی بر جاوا اسکریپت است و مرورگرهای مختلف، جاوا اسکریپت را به شیوه ای متفاوت انجام می دهند. از این رو برنامه شما ممکن است در مرورگرهای مختلف، متفاوت رفتار کند. همچنین، گاهی اوقات شما نیاز به نوشتن کد خاص مرورگر برای اجرای برنامه خود دارید.
2. اگر جاوا اسکریپت در مرورگر غیرفعال باشد، پس AJAX قادر نخواهد بود هیچ کاری انجام دهد.
3. دشوار است که یک bookmark از صفحه وب را بخواهید به یک صفحه پویا تغییر دهید.

Asp.Net AJAX چیست؟

ASP.NET AJAX فرمت Asp.Net است که مایکروسافت آن را برای ایجاد برنامه های کاربردی پویا، محرک، کاربر پسند و تعاملی توسعه داده است. ASP.NET AJAX دارای کتابخانه AJAX خود و کنترلهای AJAX برای توسعه برنامه های کاربردی غنی از وب است که با استفاده از پسوند ناهمزمان ارتباط برقرار می کنند.

Basic Controls of ASP.NET AJAX (کنترل ها در Asp.Net AJAX)

• ScriptManager

ScriptManager تمام منابع ASP.NET AJAX را در یک صفحه وب مدیریت می کند. این کتابخانه AJAX را به مرورگر ارائه می کند و از رندر صفحه جزئی پشتیبانی می کند. همچنین مدیریت آپلود صفحات جزئی و دسترسی به روش سرویس وب را فراهم می کند. بدون مدیر اسکریپت، ما نمی توانیم از کنترل های AJAX در صفحه وب استفاده کنیم.

• ScriplManagerProxy

یک صفحه می تواند تنها یک کنترل ScriptManager داشته باشد. اگر برنامه شما یک سناریوی صفحه Master-Content داشته باشد و MasterPage دارای کنترل ScriptManager است، شما می توانید از کنترل ScriptManagerProxy برای اضافه کردن اسکریپت های مختلف به صفحات محتوا استفاده کنید.

گاهی اوقات ممکن است مواردی وجود داشته باشد که شما با استفاده از کنترل ScriptManagerProxy لازم نباشد از AJAX در هر صفحه وب استفاده کنید و سپس می توانید ویژگی های AJAX را به صفحات وب خاص اضافه کنید. ScriptManager در صفحه اصلی، کتابخانه AJAX را بر روی هر صفحه ای که از MasterPage حاصل می شود بارگذاری می کند، حتی اگر آنها که مورد نیاز نیستند، که منجر به اتلاف منابع شوند.

• Timer

کنترل تایمر برای انجام پسوندها در فواصل زمانی تعریف شده استفاده می شود. شما همچنین می توانید کنترل تایمر را با استفاده از کنترل UpdatePanel برای فعال کردن و به روز رسانی بخشی از صفحه در یک بازه تعریف شده استفاده کنید. شما همچنین می توانید کنترل تایمر را برای ارسال کل صفحه استفاده کنید.

<asp:scriptmanager id="ScriptManager1" runat="server">
 <asp:updatepanel id="UpdatePanel1" runat="server" updatemode="Conditional">
 <contenttemplate>
 <asp:timer id="Timer1" interval="120000" ontick="Timer1_Tick" runat="server"></asp:timer>
 </contenttemplate>
</asp:updatepanel>




</asp:scriptmanager>

• UpdatePanel

کنترل UpdatePanel بخشی از یک صفحه وب را مشخص می کند که می تواند به طور جزئی براساس شرایط به روز شود. شما همچنین می توانید یک یا چند کنترل UpdatePanel را در صفحه وب اضافه کنید. کنترل UpdatePanel با استفاده از کتابخانه AJAX برای پشتیبانی از رندر جزئی صفحه مورد استفاده قرار می گیرد.

• UpdateProgress

شما می توانید یک کنترل UpdateProgress را برای نشان دادن پیشرفت به روز رسانی جزئی در کل صفحه استفاده کنید. همچنین می توانید کنترل UpdateProgress را برای هر کنترل UpdatePanel اضافه کنید. شما می توانید طرح پیش فرض و محتوا کنترل UpdateProgress را سفارشی کنید تا جذاب تر شود.

Validation ها در ASP.NET AJAX

• FilteredTextBoxExtender

این به شما اجازه می دهد تا اطلاعات ورودی را به یک جعبه متن فیلتر کنید.

• MaskedEditExtender and MaskedEditValidator

این کاربر را محدود می کند تا تنها یک الگوی خاصی از کاراکترها را در یک TextBox وارد کند.

• ValidatorCalloutExtender

این به اعتبار سنجی های ASP.NET متصل است تا پیام های خطا را به عنوان ابزار ToolTip به صورت balloon نشان دهند.

• NoBot

این از spam / bot بواسطه  پر کردن فرم های ورودی به صورت خودکار توسط هر کد یا کد ابزار جلوگیری می کند. این از تست عمومی تورینگ کاملاً اتوماتیک استفاده می کند تا اطمینان حاصل شود که پاسخ توسط هر ابزار تولید نمی شود.

• PasswordStrengthExtender

اندازه متن کلمه عبور را در جعبه متن مشخص می کند.

آپلود همزمان چند فایل و تصویر به صورت Ajax در Asp.Net Core

کد منبع:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Net.Http.Headers;
 
namespace MvcAspCore.Controllers
{
    public class UploadFileController : Controller
    {
        private IHostingEnvironment hostingEnv;
        public UploadFileController(IHostingEnvironment env)
        {
            // for upload File
            this.hostingEnv = env;
        }
 
        #region UploadFiles Ajax
        [HttpGet]        
        public IActionResult GetUploadFilesAjax()
        {
            return View("UploadFilesAjax");
        }
 
        [HttpPost]        
        public IActionResult UploadFilesAjax()
        {
            long size = 0;
            var files = Request.Form.Files;
            foreach (var file in files)
            {
                var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                filename = hostingEnv.WebRootPath + $@"\{filename}";
                size += file.Length;
                using (FileStream fs = System.IO.File.Create(filename))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
            }
            string message = $"{files.Count} file(s) / { size}bytes uploaded successfully!";
            return Json(message);
        }
        #endregion
    }
}

کد View

@{
    ViewData["Title"] = "Upload Ajax";
}
 
<form method="post" enctype="multipart/form-data">
    <input type="file" id="files" name="files" multiple/>
    <input type="button" id="upload" value="Upload Selected Files"/>
</form>

کد Jquery

@section Scripts {
    <script type="text/javascript">
        $(document)
            .ready(function() {
                $("#upload")
                    .click(function(evt) {
                        var fileUpload = $("#files").get(0);
                        var files = fileUpload.files;
                        var data = new FormData();
                        for (var i = 0; i < files.length; i++) {
                            data.append(files[i].name, files[i]);
                        }
                        $.ajax({
                            type: "POST",
                            url: "/UploadFile/UploadFilesAjax",
                            contentType: false,
                            processData: false,
                            data: data,
                            success: function(message) {
                                alert(message);
                            },
                            error: function() {
                                alert("There was error uploading files!");
                            }
                        });
                    });
            });
    </script>
}

"موفق باشید"

منتشر شده در سایت ABLY