مهدی عادلی فر
بنیانگذار توسینسو و برنامه نویس

آموزش کار با Ajax در ASP.NET Web Form به زبان ساده

چگونه از ASP.NET Web Form برای کار با Ajax استفاده کنیم؟ در این مطلب قصد دارم که نحوه پیاده سازی ajax در Asp.net web form رو شرح دهم. امروزه توی اکثر سایت های استفاده از ajax بسیار رایج است و بسیاری از طراحان وب سایت ها در مواقعی که فقط باید یک قسمت از صفحه تغییر کند نه این که به صفحه دیگر برویم ترجیح می دهند که به جای refresh شدن صفحه سایت فقط همان قسمتی که باید تغییر کند توسط سایت درخواست شود و کل صفحه refresh نشود.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
  1. Update Panel
  2. JQuery Ajax

این کار با استفاده از تکنیک ajax انجام می شود. به این شکل که یک متد از زبان سمت سرور (مانند PHP یا Asp.Net) را توسط جاوا اسکریپت اجرا شود و نتیجه اجرای آن نمایش داده شود. در هر کدام از زبان های طراحی وب روشی برای استفاده از ajax وجود دارد که ما در این مطلب فقط به asp.net web forms می پردازیم. البته با ظهور Asp.Net MVC شاید استفاده از Asp.Net web forms کمرنگ تر شده باشد. ولی هنوز در بسیاری از سایت ها و شرکت ها مانند سایت مایکروسافت این تکنولوژی هنوز در حال استفاده است. روش های گوناگونی برای استفاده از Ajax در Asp.Net WebForms وجود دارد که توضیح می دهیم.

Update Panel

Update Panel امکانی است که خود Asp.Net webform به عنوان یک کنترل یا component در ویژوال استودیو قرار داده است. نحوه کار کردن این کنترل به این شکل است که کاربر آن را در داخل صفحه خود قرار می دهد. سپس کنترل هایی را که قرار است از ajax استفاده کند را در داخل Update Panel قرار می دهد. و در هنگام اجرای برنامه کنترل های مورد نظر بدون نیاز به refresh شدن صفحه آپدیت می شوند. آموزش استفاده از این کنترل در مثال زیر توضیح داده شده است. برای شروع یک پروژه از نوع Asp.Net Web Forms Application در ویژوال استودیو ایجاد می کنیم.

وب سایت توسینسو

پس از این کار یک پروژه Asp.Net Web Form برای شما ایجاد خواهد شد. حال باید در صفحه Default.aspx محتویات داخل تگ

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

را پاک می کنیم. سپس از داخل نوار از قسمت Ajax Extensions یک کنترل Update Panel به داخل تگ بالا می کشیم تا کد Aspx آن تولید شود. نتیجه این کار تولید یک کد به شکل زیر خواهد بود:

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
   
<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
</asp:Content>

سپس یک تگ خالی ContentTemplate در داخل آن قرار می دهیم. حال در داخل این کنترل دو عدد یک کنترل TextBox و یک کنترل Button اضافه می کنیم. دقت داشته باشید که برای اضافه کردن این کنترل ها می توانید آن ها را از داخل نوار ابزار به داخل کد خود بکشید تا کد مورد نظرشان تولید شود. ما در این مثال قصد داریم که وقتی بر روی دکمه کلیک کردیم تابعی از درون C# اجرا شود و نتیجه آن بدون این که صفحه refresh شود در داخل textbox نمایش داده شود.

برای این کار مقدار OnClick این دکمه را باید مقدار دهی نماییم. بنابراین مقدار onclick را برابر نام تابعی قرار می دهیم که در C# خواهیم نوشت. ما نام تابع را ShowDate قرار داده ایم. دقت داشته باشید که برای TextBox باید یک Id در نظر بگیرید تا بتوان در داخل برنامه به آن دسترسی داشت. در نهایت کد داخل تگ content ما به شکل زیر خواهد شد.

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="dateText" runat="server" ></asp:TextBox>
            <br/>
            <asp:Button ID="Button1" OnClick="ShowDate" runat="server" Text="Show Date" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

حال به داخل فایل Default.aspx.cs رفته و یک تابع ShowDate ایجاد می کنیم و کد زیر را در درون آن می نویسیم.

protected void ShowDate(object sender, EventArgs e)
        {
            dateText.Text = DateTime.Now.ToString();
        }

حال برنامه را اجرا می کنیم. در صفحه ای که لود می شود وقتی روی دکمه کلیک می کنیم می بینیم که بدون این که صفحه refresh شود مقدار داخل text box تغییر می کند و زمان جاری را نمایش می دهد. کنترل Update Panel کنترل خوبی است برای این که کار Ajax را سریعتر انجام بدهد. ولی در بعضی مواقع مانند آپلود مشکلاتی برای آن پیش می آید مشکلاتی پیش می آید. راه حل اصولی و بهتری برای این کار وجود دارد که در ادامه به شرح آن می پردازیم.

وب سایت توسینسو

JQuery Ajax

راه دیگری که برای این کار وجود دارد و مختص این تکنولوژی نیست و می توان از آن برای اکثر زبان های توسعه اپلیکیشن های وب استفاده کرد استفاده از JQuery می باشد. برای استفاده از این روش باید کمی با زبان javascript و فریمورک jquery آشنا باشید. در ادامه نحوه به کار بردن این روش را توضیح خواهیم داد. برای شروع کار شما باید فریمورک jquery را روی پروژه خود نصب کرده باشید. معمولا در پروژه های Asp.Net WebForm فریمورک jquery از قبل نصب شده است.

برای این که مطمئن شوید که این فریمورک نصب شده است باید در پنل solution explorer پوشه Scripts را باز کنید تا فایل های مربوط به jquery را در آن ملاحظه نمایید.حال در قالب یک مثال می خواهیم نحوه پیاده سازی Ajax را با استفاده از این روش توضیح دهیم.در همان پروژه ای که در مثال قبل داشتیم یک تگ div به آن اضافه می کنیم و در داخل این تگ div دو تگ input مانند شکل زیر اضافه می کنیم و ویژگی های آن را مانند شکل زیر تنظیم می نماییم.

<div>
        <input type="text" id="txtName"/>
        <br/>
        <input type="button" id="sendButton" value="Send" onclick="sendToServer()"/>
    </div>

همان گونه که در کد بالا مشاهده می کنید input دوم یک دکمه می سازد که برای رویداد کلیک آن یک تابع به نام sendToServer قرار داده شده است. این تابع یک تابع javascript می باشد که باید آن را پیاده سازی کنیم. برای پیاده سازی آن بعد از تگ div که تعریف کردیم و قبل از پایان تگ

</asp:Content>

باید اسکریپت های خود را بنویسیم. برای این کار ابتدا jquery را به برنامه اضافه می کنیم و سپس به نوشتن تابع خود می پردازیم. در پیاده سازی تابع ما از تابع ajax استفاده کرده ایم. این تابع عملیات ajax را در خود دارد. کد جاوااسکریپت ما برای این تابع به شرح زیر می باشد.

<script src="Scripts/jquery-1.8.2.js"></script>
    <script>
        
        function sendToServer() {
            var name = $('#txtName').val();

            $.ajax({
                type: "Post",
                url: "Default.aspx/SayHello",
                data: "{'name':'" + name + "'}",
                contentType: "application/json; charset=utf-8",
                success: function (a) {
                    
                    var data = a.d;
                    $('#txtName').val(data);
                },
                error: function() {
                    alert("There is an error");
                }

            });
        }
    </script>

همانطور که در کد دیده می شود. در خط اول فریمور jquery را به صفحه اضافه کرده ایم و در ادامه به تعریف تابع پرداخته ایم. نحوه عملکرد این تابع به این شکل است که نام را از input اول که یک text است دریافت می کند و با استفاده از تابع ajax به عنوان ورودی تابع به شکل json به تابع مورد نظر که SayHello نام دارد ارسال می کنیم. سپس اگر نتیجه اجرای تابع موفقیت آمیز بود نتیجه اجرای تابع را در همان input نمایش می دهیم. و در صورت خطا یک پیام خطا به کاربر نشان داده می شود. برای ارسال پارامتر تابع باید در قسمت data مربوط به تابع ajax به صورت json اول نام پارامتر در تابع را به همان شکل بین تک کوتیشن ' ' قرار می دهیم و به دنبال آن مقدار همان پارامتر مورد نظر را می آوریم. برای نام تابع هم باید آدرس url آن را در قسمت url قرار می دهیم.

بعد از این که کد های مورد نظر را در صفحه Default.aspx انجام دادیم. باید به نوشتن تابع C# برای این کار بپردازیم. به این منظور در همین صفحه با زدن کلید f7 به صفحه Default.aspx.cs می رویم. در این صفحه که به زبان C# است باید یک تابع به نام SayHello بنویسیم که از داخل کد جاوا اسکریپت ما فراخوانی شود. دقت داشته باشید که این تابع حتما باید از نوع public و static معرفی گردد. همچنین برای این که بتوان این تابع را با استفاده از ajax فراخوانی کرد باید برای آن از attribute به نام WebMethod استفاده کنیم. کد مربوط به این تابع به شرح زیر است:

[WebMethod]
        public static string SayHello(string name)
        {
            return "Hello " + name;
        }

همان طور که در کد بالا دیده می شود این تابع یک پارامتر ورودی به نام name دارد که در صفحه Default.aspx مقدار دهی شده است و همچنین این تابع مقدار بازگشتی String دارد که از آن در داخل کد جاوا اسکریپت صفحه استفاده می شود. حال وقتی این صفحه را اجرا می کنیم با تایپ مقداری در داخل text مورد نظر و کلیک بر روی دکمه Send مقدار آن تغییر خواهد کرد بدون این که صفحه شما refresh شود.روش دوم ajax در همه تکنولوژی ها مورد استفاده قرار می گیرد و بسیار رایج است و به راحتی می توان آن را مدیریت کرد. توسینسو باشید


مهدی عادلی فر
مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.

نظرات