- در نمونه بحث جاری کنترل بیشتری بر روی رویدادها خواهید داشت. مثلا قسمت xhr.status == 403 و هدایت کاربر به صفحه لاگین در صورت منقضی شدن اعتبارسنجی آن.
- Ajax.BeginForm برای کار کردن حتما نیاز به submit button داره. در مطلب جاری از یک span هم میتونید استفاده کنید و مشکلی نداره.
- در Ajax.BeginForm آنچنان کنترلی بر روی پردازش نهایی خروجی اکشن متد ندارید. مثلا در اینجا عنوان شد که اگر خروجی JSON بود و اگر دارای فیلد مشخصی با مقدار مشخصی بود نیاز است کار خاصی انجام شود. در حالت jQuery Ajax مستقیم، پردازش JSON سادهتر است.
- موارد دیگری مانند raphaeljs ، draw.io (^) ، WireIt و jGraph هم برای رسم گراف هستند.
- بله. باید کمی به jQuery Ajax آشنا باشید. میتونید اشیایی رو که قرار هست در صفحه ترسیم بشن به صورت آرایهای از اشیاء جاوا اسکریپتی تعریف کنید. هر شیء دارای source و target است به علاوه مختصات x و y. نهایتا برای ارسال آن به سرور از طریق jQuery Ajax خواهید داشت:
JSON.stringify(whole_object)
1) فراموش میکنیم تا اسکریپت اصلی jQuery را به درستی پیوست و مسیردهی کنیم.
2) مسیر Generic handler دیگری را ذکر میکنیم.
3) مسیرهای تصاویری را که Image slider باید نمایش دهد، کاملا بیربط ذکر میکنیم.
4) خروجی JSON نامربوطی را بازگشت میدهیم.
5) یکبار هم یک استثنای عمدی دستی را در بین کدها قرار خواهیم داد.
و ... بعد سعی میکنیم با استفاده از Firebug عیوب فوق را یافته و اصلاح کنیم؛ تا به یک برنامه قابل اجرا برسیم.
معرفی برنامهای که کار نمیکند!
یک برنامه ASP.NET Empty web application را آغاز کنید. سپس سه پوشه Scripts، Content و Images را به آن اضافه نمائید. در این پوشهها، اسکریپتهای نمایش دهنده تصاویر، Css آن و تصاویری که قرار است نمایش داده شوند، قرار میگیرند:
سپس یک فایل default.aspx و یک فایل OrbitHandler.ashx را نیز به پروژه با محتویات ذیل اضافه کنید: (در این دو فایل، 5 مورد مشکل ساز یاد شده لحاظ شدهاند)
محتویات فایل OrbitHandler.ashx.cs مطابق کدهای ذیل است:
using System.Collections.Generic; using System.IO; using System.Web; using System.Web.Script.Serialization; namespace OrbitWebformsTest { public class Picture { public string Title { set; get; } public string Path { set; get; } } public class OrbitHandler : IHttpHandler { IList<Picture> PicturesDataSource() { var results = new List<Picture>(); var path = HttpContext.Current.Server.MapPath("~/Images"); foreach (var item in Directory.GetFiles(path, "*.*")) { var name = Path.GetFileName(item); results.Add(new Picture { Path = /*"Images/" + name*/ name, Title = name }); } return results; } public void ProcessRequest(HttpContext context) { var items = PicturesDataSource(); var json = /*new JavaScriptSerializer().Serialize(items)*/ string.Empty; throw new InvalidDataException("همینطوری"); context.Response.ContentType = "text/plain"; context.Response.Write(json); } public bool IsReusable { get { return false; } } } }
همچنین کدهای صفحه ASPX ایی که قرار است (به ظاهر البته) از این Generic handler استفاده کند به نحو ذیل است:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OrbitWebformsTest._default" %> <!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></title> <link href="Content/orbit-1.2.3.css" rel="stylesheet" type="text/css" /> <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery.orbit-1.2.3.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="featured"> </div> </form> <script type="text/javascript"> $(function () { $.ajax({ url: "Handler.ashx", contentType: "application/json; charset=utf-8", success: function (data) { $.each(data, function (i, b) { var str = '<img src="' + b.Path + '" alt="' + b.Title + '"/>'; $("#featured").append(str); }); $('#featured').orbit(); }, dataType: "json" }); }); </script> </body> </html>
مراحل عیب یابی برنامهای که کار نمیکند!
ابتدا برنامه را در فایرفاکس باز کرده و سپس افزونه Firebug را با کلیک بر روی آیکن آن، بر روی سایت فعال میکنیم. سپس یکبار بر روی دکمه F5 کلیک کنید تا مجددا مراحل بارگذاری سایت تحت نظر افزونه Firebug فعال شده، طی شود.
اولین موردی که مشهود است، نمایش عدد 3، کنار آیکن فایرباگ میباشد. این عدد به معنای وجود خطاهای اسکریپتی در کدهای ما است.
برای مشاهده این خطاها، بر روی برگه Console آن کلیک کنید:
بله. مشخص است که مسیر دهی فایل jquery-1.5.1.min.js صحیح نبوده و همین مساله سبب بروز خطاهای اسکریپتی گردیده است. برای اصلاح آن سطر زیر را در برنامه تغییر دهید:
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
مجددا دکمه F5 را فشرده و سایت را با تنظیمات جدید اجرا کنید. اینبار در برگه Console و یا در برگه شبکه فایرباگ، خطای یافت نشدن Generic handler نمایان میشوند:
برای رفع آن به فایل default.aspx مراجعه و بجای معرفی Handler.ashx، نام OrbitHandler.ashx را وارد کنید.
مجددا دکمه F5 را فشرده و سایت را با تنظیمات جدید اجرا کنید.
اگر به برگه کنسول دقت کنیم، بروز استثناء در کدها تشخیص داده شده و همچنین در برگه Response پاسخ دریافتی از سرور، جزئیات صفحه خطای بازگشتی از آن نیز قابل بررسی و مشاهده است.
اینبار به فایل OrbitHandler.ashx.cs مراجعه کرده و سطر throw new InvalidDataException را حذف میکنیم. در ادامه برنامه را کامپایل و مجددا اجرا خواهیم کرد.
با اجرای مجدد سایت، تبادل اطلاعات صحیحی با فایل OrbitHandler.ashx برقرار شده است، اما خروجی خاصی قابل مشاهده نیست. بنابراین بازهم سایت کار نمیکند.
برای رفع این مشکل، متد ProcessRequest را به نحو ذیل تغییر خواهیم داد:
public void ProcessRequest(HttpContext context) { var items = PicturesDataSource(); var json = new JavaScriptSerializer().Serialize(items); context.Response.ContentType = "text/plain"; context.Response.Write(json); }
بله. تمام تنظیمات به نظر درست هستند، اما در برگه شبکه فایرباگ تعدادی خطای 404 و یا «یافت نشد»، مشاهده میشوند. مشکل اینجا است که مسیرهای بازگشت داده شده توسط متد Directory.GetFiles، مسیرهای مطلقی هستند؛ مانند c:\path\images\01.jpg و جهت نمایش در یک وب سایت مناسب نمیباشند. برای تبدیل آنها به مسیرهای نسبی، اینبار کدهای متد تهیه منبع داده را به نحو ذیل ویرایش میکنیم:
IList<Picture> PicturesDataSource() { var results = new List<Picture>(); var path = HttpContext.Current.Server.MapPath("~/Images"); foreach (var item in Directory.GetFiles(path, "*.*")) { var name = Path.GetFileName(item); results.Add(new Picture { Path = "Images/" + name, Title = name }); } return results; }
اینبار اگر برنامه را اجرا کنیم، بدون مشکل کار خواهد کرد.
بنابراین در اینجا مشاهده کردیم که اگر «برنامهای مبتنی بر jQuery کار نمیکند»، چگونه باید قدم به قدم با استفاده از فایرباگ و امکانات آن، به خطاهایی که گزارش میدهد و یا مسیرهایی را که یافت نشد بیان میکند، دقت کرد تا بتوان برنامه را عیب یابی نمود.
سؤال مهم: اجرای کدهای jQuery Ajax فوق، چه تغییری را در صفحه سبب میشوند؟
اگر به برگه اسکریپتها در کنسول فایرباگ مراجعه کنیم، امکان قرار دادن breakpoint بر روی سطرهای کدهای جاوا اسکریپتی نمایش داده شده نیز وجود دارد:
در اینجا همانند VS.NET میتوان برنامه را در مرورگر اجرا کرده و تگهای تصویر پویای تولید شده را پیش از اضافه شدن به صفحه، مرحله به مرحله بررسی کرد. به این ترتیب بهتر میتوان دریافت که آیا src بازگشت داده شده از سرور فرمت صحیحی دارد یا خیر و آیا به محل مناسبی اشاره میکند یا نه. همچنین در برگه HTML آن، عناصر پویای اضافه شده به صفحه نیز بهتر مشخص هستند:
وبلاگها ، سایتها و مقالات ایرانی (داخل و خارج از ایران)
- محاسبه کاربران آنلاین در ASP.NET
- نحوه جابجایی tempdb در SQL Server 2005 و ضرورت آن
- Firefox فارسی در دست تهیه
- تست نرمافزار در Agile Software Development
- محافظت از فرمهای اینترنتی با ریکپچا
- تبادل NTFS و رجیستری
- غیر فعال کردن اشتراک درایوهای مخفی در ویندوز
- تحت نظر قرار دادن پوشههای سیستمی در سی شارپ
- نحوه استفاده از jQuery در ASP.Net
- پلاگین کیبورد مجازی فارسی برای jQuery
- بکارگیری ویژگیهای CSS3 در طراحی وب
- ۹ قابلیت پنهان گوگل که باید بدانید
- فیدبرنر و گوگل
- پشتیبانی چیست و چگونه باید انجام شود
- دانشآموزان ایرانی در IT از معلمان خود باسوادترند
- امنیت وبلاگ وردپرس خود را بالا ببرید
- سرعت تبدیل اعداد انگلیسی به فارسی
- آیا پنگوئن میتواند پنجره را بشکند؟ و نصیحت لینوکسی
- دل پر خون کاربران از عملکرد وزارت ICT در حوزه اینترنت
- انتخاب افقی قسمتی از کد!
Visual Studio
ASP. Net
- از سیر تا پیاز نحوهی کارکرد سشن در ASP.Net
- آشنایی با برنامه Fiddler
- jQuery, JSON, and ASP.NET
- ASP کلاسیک مرده است!
- دستکاری ظاهر شیرپوینت با استفاده از jQuery
- بررسی سایت whitehouse.gov
طراحی و توسعه وب
- ایجاد گوشههای گرد
- استفاده از فایرفاکس برای غلط یابی یک صفحه وب
- کتابخانه DateJs (و اگر وقت کردید سری به این پست بزنید)
- 45 تکنیک JQuery
- نحوه نمایش لینکهای خود را بهبود بخشید
- Formy CSS Form Framework
- Top list of ajax upload scripts
اسکیوال سرور
- به روز رسانی سوم اس کیوال سرور 2008 ، لیست موارد فیکس شده، دریافت
- طراحی جدید سایت اس کیوال سرور 2008
- آشنایی با لاگ فایلها در SQL Server
- تولید اعداد منحصربفرد در اس کیوال سرور
- از sp_detach_db استفاده نکنید!
سی شارپ
عمومی دات نت
- UTF8Encoding.Default != Encoding.UTF8
- مقایسه Nhibernate و Linq
- مقایسه Entity Framework و LINQ to SQL
- بررسی اندازه یک رشته در دات نت
- مونو و Android
- Google Maps for Windows Forms
- برگههای تقلب دات نت
- دایرکتوری کتاب خانههای ثبت وقایع در دات نت
ویندوز
مسایل اجتماعی و انسانی برنامه نویسی
- اثر رکود اقتصادی بر بازار کار برنامه نویسی
- دلایل استعفای تعدادی از کارمندان گوگل
- تهیهی برنامههایی با مقیاس گسترده در چند روز بجای چند هفته
- از دست همکاران خود خسته شدهاید؟!
- هنر مصاحبه کردن
متفرقه
استفاده از bower در visual studio
What Happened to Bower
Library Manager: Client-side content manager for web apps
Library Manager (LibMan) in Visual Studio 2017 (15.7) How to restore client side libraries in ASP.NET Core projects
آشنایی با Bower
What Happened to Bower
Library Manager: Client-side content manager for web apps
Library Manager (LibMan) in Visual Studio 2017 (15.7) How to restore client side libraries in ASP.NET Core projects
https://github.com/MehdiSaeedifar/IrisStore
همچنین نمونهی آنلاین آنرا میتوانید در فروشگاه آیریس مشاهده کنید.
در ادامه برخی از قابلیتهای این سیستم را مشاهده میکنید:
جست و جو با قابلیت دسته بندی نتایج
به هنگام جست و جو، لیستی از موارد پیشنهادی به صورت دسته بندی شده نمایش داده میشود.
جست و جوی پیشرفته کالاها
جست و جو بر اساس قیمت، گروه، کلمات کلیدی و مرتب سازی نتایج انجام میگیرد. همچنین نتایج جست و جو بدون رفرش شدن صفحه و به صورت AJAX ای به همراه تغییر URL صفحه صورت میگیرد.
نمایش نمودار تغییرات قیمت
امکان نمایش نمودار تغییرات قیمت کالا در بازهی زمانی نیز پیش بینی شده است.
ویرایش اطلاعات به صورت inline
امکان ویرایش قیمت و تاریخ به صورت inline وجود دارد.
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
کارهایی که باید انجام شود:
- پیاده سازی سبد خرید و خرید آنلاین
تصویر پنل مدیریت
تصویر صفحهی اصلی:
همچنین به راحتی میتوان با طراحی قالب جدیدی، از این سیستم برای کاری غیر از فروشگاه اینترنتی استفاده کرد؛ سایتهای زیر نمونههای آنلاین دیگری از این سیستم هستند:
- http://www.petrapars.ir
- http://www.ava-tarh.ir
در نهایت فهرستی از کتاب خانهها و فناوریهای استفاده شده و همچنین مقالات مرتبط با این پروژه را قرار دادهام.
کتابخانهها و فریم ورکهای سمت سرور:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
لطفا برای طرح سؤالات و پیشنهادات خود و جهت مدیریت بهتر آنها، از قسمت اختصاصی این پروژه در سایت استفاده نمائید.
فروشگاه IrisStore
https://github.com/MehdiSaeedifar/IrisStore
همچنین نمونهی آنلاین آنرا میتوانید در فروشگاه آیریس مشاهده کنید.
در ادامه برخی از قابلیتهای این سیستم را مشاهده میکنید:
جست و جو با قابلیت دسته بندی نتایج
به هنگام جست و جو، لیستی از موارد پیشنهادی به صورت دسته بندی شده نمایش داده میشود.
جست و جوی پیشرفته کالاها
جست و جو بر اساس قیمت، گروه، کلمات کلیدی و مرتب سازی نتایج انجام میگیرد. همچنین نتایج جست و جو بدون رفرش شدن صفحه و به صورت AJAX ای به همراه تغییر URL صفحه صورت میگیرد.
نمایش نمودار تغییرات قیمت
امکان نمایش نمودار تغییرات قیمت کالا در بازهی زمانی نیز پیش بینی شده است.
ویرایش اطلاعات به صورت inline
امکان ویرایش قیمت و تاریخ به صورت inline وجود دارد.
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
تصویر پنل مدیریت
تصویر صفحهی اصلی:
همچنین به راحتی میتوان با طراحی قالب جدیدی، از این سیستم برای کاری غیر از فروشگاه اینترنتی استفاده کرد؛ سایتهای زیر نمونههای آنلاین دیگری از این سیستم هستند:
- http://www.petrapars.ir
- http://www.ava-tarh.ir
در نهایت فهرستی از کتاب خانهها و فناوریهای استفاده شده و همچنین مقالات مرتبط با این پروژه را قرار دادهام.
کتابخانهها و فریم ورکهای سمت سرور:
فریمورکهای CSS:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
$.ajax({ url: "/login", // web.config --> appConfiguration -> tokenPath data: { grant_type: "refresh_token", refresh_token: refreshToken }, type: 'POST', // POST `form encoded` data contentType: 'application/x-www-form-urlencoded' })
doRefreshToken(refreshToken: string): Observable<any> { const body = new HttpParams() .set('grant_type', "refresh_token") .set('refresh_token', refreshToken); return this.http.post('/login', body.toString(), { headers: new HttpHeaders() .set('Content-Type', 'application/x-www-form-urlencoded') } ); }