PDA

View Full Version : آموزش: تعامل صحیح با Ajax و UpdatePanel


ahmad156
یک شنبه 22 تیر 1393, 20:24 عصر
سلام دوستان عزیز
در مورد مشکلات UpdatePanel و عدم استفاده از Jquery Ajax رو توی مشکلات خیلی از دوستان میشه دید.تصمیم گرفتم یه آموزش کامل در این رابطه به دوستان ارائه بدم.البته یه خرده وقتم محدوده ولی سعی میکنم آموزش کامل بشه.
در ابتدا مقدماتی در رابطه با Ajax ارائه میکنبم سپس وارد بحث کدنویسی اون میشیم.
اِیجکس (AJAX:Asynchronous JavaScript And XML)، مجموعه‌ای از استانداردها و فناوری‌های وب و به معني ترکيب نامتقارن جاوا اسکريپت و XML است و از سال 2005 توسط شخصی به نام Jesse James Garrett معرفی شد. در واقع Ajax چیزی به غیر از ترکیب چندین فناوری (که همه هم موجود می باشند) با یکدیگر نمیباشد و در کل چیز جدیدی نمی باشد.هسته اصلی Ajax شی ای به نام XMLHttpRequest می باشد.

مزایا:
1- نیازمند نصب هیچ نرم‌افزار الحاقی و اضافی روی مرورگر نیست.
2-کم کردن ترافیک بین Client و Server
3-کم شدن زمان پاسخگویی در نهایت بهتر شدن عملکرد و سرعت و احساس راحتی کاربر
4-متکی بودن به XML
5-رصد پردازش ها توسط افزونه هایی همچون firebug
6-پیاده سازی توسط کتابخانه های متن بازی همچون JQuery وPrototype و Scriptaculous و ....
7-اگر قسمتی از صفحه که با ajax کار میکنه خطا بده بقیه قسمت های صفحه دچار مشکل نمیشه

معایب:
1-هزینه بیشتر از لحاظ زمان و کدنویسی
2-امنیت کمتر به خاطر اینکه کدهای JavaScript توی Client باید load بشه
3-متکی بودن به JavaScript و امکان غیرفعال شدن آن در مرورگر
4-Search Engin ها مثل Google صفحات Ajax رو Index نمیکنه
5-بلااستفاده شدن دکمه های back و refresh
6-استفاده چند عملیات متفاوت در کنار هم در یک صفحه
7-پیچیده شدن کدها
8-دیباگ کردن کدها یه خرده مشکله
mortezagt
یک شنبه 22 تیر 1393, 21:12 عصر
مرسی
لطفا ادامه بده
ahmad156
دوشنبه 23 تیر 1393, 22:06 عصر
مطمئناً هر برنامه نویس دات نت تا اسم Ajax برده میشه یاد UpdatePanel میفته.آیا واقعاً استفاده از UpdatePanel درسته؟
تنها مزیت قابل ذکر UpdatePanel ، ساده گی استفاده و پیاده سازی اون هست که البته این چیز کمی نیست.ولی عیب اون یه خرده بیشتره:
1-فرستادن تمام محتویات درون UpdatePanel زمانی که تنها قسمتی اندکی ا ز محتویات اون رو میخواهیم Update کنیم
2- ناهماهنگی اون با کدهای JavaScript به خصوص بعد از Update شدن
3-سنگین شدن صفحه و لود شدن حجم زیادی کد
شما میتونین اینجا (http://www.wrox.com/WileyCDA/Section/Using-the-ASP-NET-AJAX-ScriptManager.id-305492.html)رو ببینین وقتی که ScriptManager رو به صفحه به خاطر UpdatePanel اضافه میکنین چه بلایی بر سر صفحه میاد و چقدر کدهای اضافی به صفحه الحاق میشه.یا اینجا (http://encosia.com/why-aspnet-ajax-updatepanels-are-dangerous/)رو هم میتونین چک کنین زمانی که حتی از لحاظ امنیتی هم میتونه مشکل ساز بشه. خیلی از مشکلات UpdatePanel به خاطر سربسته بودن اون و عدم تسلط شخص به اون ایجاد میشه
به شخصه ترجیح میدم تا جایی که امکان داره از UpdatePanel استفاده نکنم مگر در موارد زیر:
1-زمان کافی برای تحویل پروژه نداشته باشم
2-زمانی که Performance برنامه مهم نباشه
3-زمانی State کنترل ها در PostBack ها مهم باشه(مثلا مقادیر TextBox باقی بمونه این هم به خاطر اینه که ViewState ها هم با UpdatePanel ، آپدیت میشن)
4-نیاز به رخداد های طرف سرور باشه.مثلاً نیاز باشه تابع مربوط به Bind یه GridView رو فراخوانی کنیم
در ادامه(در صورت استقبال) پباده سازی Jquery Ajax رو با مثال و حالت های محتلف خواهم گفت
ahmad156
سه شنبه 24 تیر 1393, 19:12 عصر
ما از 4 طریق میتونیم از Jquery با Asp.net تعامل داشته باشیم:
1-صفحات aspx
2-httphandler ها
3-web method ها
4-web service ها
ما هر 4 مورد رو با انجام یه کار مشترک اون هم نشون دادن جزییات مشتری از جدول Northwind پیاده سازی میکنیم.
در ابتدا صفحه ما دارای یه DropDownList هست که نام مشتریان رو لیست میکنه.باید به ازای انتخاب هر کدوم جزییات اون نمایش داده بشه.


<%@ Page Language="C#‎‎‎‎‎‎‎‎‎" AutoEventWireup="true" CodeFile="Customer.aspx.cs" Inherits="Customer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

</head>
<body>
<form id="form1" runat="server">
<div id="SelectCustomers">
<asp:DropDownList ID="Customers" runat="server">
</asp:DropDownList>
</div>
<div id="CustomerDetails">
</div>
</form>
</body>
</html>

این هم از Code این صفحه:


using System;
using System.Data.SqlClient;

public partial class Customer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string connect = "Server=MyServer;Database=Northwind;Trusted_Connect ion=True";
string query = "SELECT CustomerID, CompanyName FROM Customers";
using (SqlConnection conn = new SqlConnection(connect))
{
using (SqlCommand cmd = new SqlCommand(query, conn))
{
conn.Open();
Customers.DataSource = cmd.ExecuteReader();
Customers.DataValueField = "CustomerID";
Customers.DataTextField = "CompanyName";
Customers.DataBind();
}
}
}
}

خب تا اینجای کار توی 4 مورد مشترک هست.
حالا مورد اول یعنی صفحات aspx رو پیاده سازی میکنیم
شما یه صفحه به نام FetchCustomer.aspx میسازین و توی PageLoad اون به صورت زیر عمل میکنین

protected void Page_Load(object sender, EventArgs e)
{
string connect = "Server=MIKE;Database=Northwind;Trusted_Connection= True";
string query = "SELECT CompanyName, Address, City, Region, PostalCode," +
"Country, Phone, Fax FROM Customers WHERE CustomerID = @CustomerID";
string id = Request.QueryString["CustomerID"];
if (id != null && id.Length == 5)
{
using (SqlConnection conn = new SqlConnection(connect))
{
using (SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("CustomerID", Request.QueryString["CustomerID"]);
conn.Open();
SqlDataReader rdr = cmd.ExecuteReader();
if (rdr.HasRows)
{
while (rdr.Read())
{
Response.Write("<p>");
Response.Write("<strong>" + rdr["CompanyName"].ToString() + "</strong><br />");
Response.Write(rdr["Address"].ToString() + "<br />");
Response.Write(rdr["City"].ToString() + "<br />");
Response.Write(rdr["Region"].ToString() + "<br />");
Response.Write(rdr["PostalCode"].ToString() + "<br />");
Response.Write(rdr["Country"].ToString() + "<br />");
Response.Write("Phone: " + rdr["Phone"].ToString() + "<br />");
Response.Write("Fax: " + rdr["Fax"].ToString() + "</p>");
}
}
}
}
}
else
{
Response.Write("<p>No customer selected</p>");
}
Response.End();
}



حالا شما در زمان تغییر در DropDownList باید CustomerID رو به صفحه FetchCustomer.aspx بفرستین و نتایج رو برای شما نمایش بده.ساده ترین روش به شکل زیر میشه.شما توی تابع change که در زمان تغییر در Select یا همون DropDownList ما صدا زده میشه تابع html رو صدا میزنیم.تابع html نتیجه برگشتی را درون CustomerDetails نمایش میده

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Customers').change(function() {
$.get("FetchCustomer.aspx",
{ CustomerID: "" + $('#Customers').val() + "" },
function(data) {
$('#CustomerDetails').html(data);
});
});
});
</script>
Peyman.Gh
چهارشنبه 25 تیر 1393, 01:08 صبح
-امنیت کمتر به خاطر اینکه کدهای JavaScript توی Client باید load بشه ؟
میشه درباره این جمله بیشتر توضیح دهید ؟!
ahmad156
چهارشنبه 25 تیر 1393, 01:59 صبح
البته این مورد کلی هست و شاید اتفاق نیفته.کلاً وقتی کد رو بازدیدکننده رویت کنه(که ما حالت بد رو در نظر میگیریم که شخص هکر باشه) به راحتی میتونه روند کار رو trace کنه.در ضمن به احتمال زیاد بعضی validation ها رو با Jquery انجام خواهیم داد که این مورد ، قابل اعتماد نیست.البته این خطر بالقوه هست نه بالفعل و اگر طرف کارش رو بدونه مشکلی ایجاد نمیکنه، وگرنه فیسبوک و گوگل اینقدر از ajax استفاده نمیکردن
Peyman.Gh
چهارشنبه 25 تیر 1393, 02:11 صبح
@ ahmad156 در کل جمله درستی (از نظر من) نمی باشد زیرا از نظر من چیز خاصی در کد های جاوا اسکریپت ما وجود ندارد و در بحث اعتبار سنجی هم راه کار های زیادی وجود دارد و من قانع نشدم که این یک عیب باشد.
موفق باشید.