- استفاده از WCF Proxy
- استفاده از ChannelFactory
قصد دارم طی یک مقایسه کوتاه این دو روش را بررسی کنیم:
WCF Proxy:
Proxy در واقع یک کلاس CLR است که به عنوان نماینده یک اینترفیس که از نوع Service Contract است مورد استفاده قرار میگیرد. یا به زبان ساده تر، یک Proxy در واقع نماینده Service Contract ای که سمت سرور پیاده سازی شده است در سمت کلاینت خواهد بود. Proxy تمام متد یا Operation Contractهای سمت سرور را داراست به همراه یک سری متدها و خواص دیگر برای مدیریت چرخه طول عمر سرویس، هم چنین اطلاعات مربوط به وضعیت سرویس و نحوه اتصال آن به سرور. ساخت Proxy به دو روش امکان پذیر است:
- با استفاده از امکانات AddServiceReference موجود در Visual Studio. کافیست از پنجره معروف زیر با استفاده از یک URL سرویس مورد نظر را به پروژه سمت کلاینت خود اضافه نمایید
همچنین میتوانید از قسمت Advanced نیز برای تنظیمات خاص مورد نظر خود(مثل تولید کد برای متدهای Async یا تعیین نوع Collectionها در هنگام انتقال داده و ...) استفاده نمایید.
- با استفاده از SvcUtil.exe . کاربرد svcutil.exe در موارد Metadata Export، Service Validtation، XmlSerialization Type Generator و Metadata Download و ... خلاصه میشود. با استفاده از Vs.Net Command Promptو svcutil میتوان به سرویس مورد نظر دسترسی داشت.مثال
svcutil.exe /language:vb /out:generatedProxy.vb /config:app.config http://localhost:8000/ServiceModelSamples/service
ChannelFactory:
ChannelFactory یک کلاس تعبیه شده در دات نت میباشد که به وسیله یک اینترفیس که به عنوان تعاریف سرویس سمت سرور است یک نمونه از سرویس مورد نظر را برای ما خواهد ساخت. اما به خاظر داشته باشید از این روش زمانی میتوان استفاده کرد که دسترسی کامل به سمت سرور و کلاینت داشته باشید.
برای آشنایی با نحوه پیاده سازی به این روش نیز میتوانید از این مقاله کمک بگیرید.
مثال:
public static TChannel CreateChannel() { IBookService service; var endPointAddress = new EndpointAddress( "http://localhost:7000/service.svc" ); var httpBinding = new BasicHttpBinding(); ChannelFactory<TChannel> factory = new ChannelFactory<TChannel>( httpBinding, endPointAddress ); instance= factory.CreateChannel(); return instance; }
در نتیجه برای ساخت یک سرویس به روش ChannelFactory باید مراحل زیر را طی نمایید:
- یک نمونه از WCF Binding بسازید
- یک نمونه از کلاس EndPointAddress به همراه آدرس سرویس مورد نظر در سمت سرور بسازید(البته میتوان این مرحله را نادیده گرفت و آدرس سرویس را مستقیما به نمونه ChannelFactory به عنوان پارامتر پاس داد)
- یک نمونه از کلاس ChannelFactory یا استفاده از EndPointAddress بسازید
- با استفاده از ChannelFactory یک نمونه از Channel مورد نظر را فراخوانی نمایید(فراخوانی متد CreateChannel)
تفاوتهای دو روش
Proxy | ChannelFactory |
فقط نیاز به یک URL برای ساخت سرویس مورد نظر دارد. بقیه مراحل توسط ابزارهای مرتبط انجام خواهد شد | شما نیاز به دسترسی مستقیم به اسمبلی حاوی Service Contract پروژه خود دارید. |
استفاده از این روش بسیار آسان و ساده است | پیاده سازی آن پیچیدگی بیشتر دارد |
فهم مفاهیم این روش بسیار راحت است | نیاز به دانش اولیه از مفاهیم WCF برای پیاده سازی دارد |
زمانی که میزان تغییرات در کلاسهای مدل و Entityها زیاد باشد این روش بسیار موثر است.(مدیریت تغییرات در WCF) | زمانی که اطمینان دارید که مدل و entityها پروژه زیاد تغییر نخواهند کرد و از طرفی نیاز به کد نویسی کمتر در سمت کلاینت دارید، این روش موثرتر خواهد بود |
فقط به اینترفیس هایی که دارای ServiceContractAttribute هستند دسترسی خواهیم داشت. | به تمام اینترفیسهای تعریف شده در بخش Contracts دسترسی داریم. |
فقط به متدهای که دارای OperationContractAttribute هستند دسترسی خواهیم داشت. | به تمام متدهای عمومی سرویس دسترسی داریم. |
آیا میتوان از روش AddServiceReference تعبیه شده در Vs.Net، برای ساخت ChannelFactory استفاده کرد؟
بله! کافیست هنگام ساخت سرویس، در پنجره AddServiceReference از قسمت Advanced وارد برگه تنظیمات شوید. سپس تیک مربوط به قسمت های Reused Type in referenced assemblies و Reused Types in specified referenced assemblies را بزنید. بعد از لیست پایین، اسمبلیهای مربوط به Domain Model و هم چنین Contractهای سمت سرور را انتخاب نمایید. در این حالت شما از روش Channel Factory برای ساخت سرویس WCF استفاده کرده اید.
این مطلب در ادامهی مطالب آزمونهای واحد یا unit testing است.
نوشتن آزمون واحد برای کلاسهایی که با یک سری از الگوریتمها ، مسایل ریاضی و امثال آن سر و کار دارند، ساده است. عموما این نوع کلاسها وابستگی خارجی آنچنانی ندارند؛ اما در عمل کلاسهای ما ممکن است وابستگیهای خارجی بسیاری پیدا کنند؛ برای مثال کار با دیتابیس، اتصال به یک وب سرویس، دریافت فایل از اینترنت، خواندن اطلاعات از انواع فایلها و غیره.
مطابق اصول آزمایشات واحد، یک آزمون واحد خوب باید ایزوله باشد. نباید به مرزهای سیستمهای دیگر وارد شده و عملکرد سیستمهای خارج از کلاس را بررسی کند.
این مثال ساده را در نظر بگیرید:
فرض کنید برنامه شما قرار است از یک وب سرویس لیستی از آدرسهای IP یک کشور خاص را دریافت کند و در یک دیتابیس محلی آنها را ذخیره نماید. به صورت متداول این کلاس باید اتصالی را به وب سرویس گشوده و اطلاعات را دریافت کند و همچنین آنها را خارج از مرز کلاس در یک دیتابیس ثبت کند. نوشتن آزمون واحد برای این کلاس مطابق اصول مربوطه غیر ممکن است. اگر کلاس آزمون واحد آنرا تهیه نمائید، این آزمون، integration test نام خواهد گرفت زیرا از مرزهای سیستم باید عبور نماید.
همچنین یک آزمون واحد باید تا حد ممکن سریع باشد تا برنامه نویس از انجام آن بر روی یک پروژه بزرگ منصرف نگردد و ایجاد این اتصالات در خارج از سیستم، بیشتر سبب کندی کار خواهند شد.
برای این ایزوله سازی روشهای مختلفی وجود دارند که در ادامه به آنها خواهیم پرداخت:
روش اول: استفاده از اینترفیسها
با کمک یک اینترفیس میتوان مشخص کرد که یک قطعه از کد "چه کاری" را قرار است انجام دهد؛ و نه اینکه "چگونه" باید آنرا به انجام رساند.
یک مثال ساده از خود دات نت فریم ورک، اینترفیس IComparable است:
public static string GetComparisonText(IComparable a, IComparable b)
{
if (a.CompareTo(b) == 1)
return "a is bigger";
if (a.CompareTo(b) == -1)
return "b is bigger";
return "same";
}
اکنون با توجه به این توضیحات، برای ایزوله کردن ارتباط با دیتابیس و وب سرویس در مثال فوق، میتوان اینترفیسهای زیر را تدارک دید:
public interface IEmailSource
{
IEnumerable<string> GetEmailAddresses();
}
public interface IEmailDataStore
{
void SaveEmailAddresses(IEnumerable<string> emailAddresses);
}
الف) به این صورت تنها مشخص میشود که چه کاری را قصد داریم انجام دهیم و کاری به پیاده سازی آن نداریم.
ب) ساخت کلاس بدون وجود یا دسترسی به یک دیتابیس میسر میشود. این مورد خصوصا در یک کار تیمی که قسمتهای مختلف کار به صورت همزمان در حالت پیشرفت و تهیه است حائز اهمیت میشود.
ج) با توجه به اینکه در اینجا به پیاده سازی توجهی نداریم، میتوان از این اینترفیسها جهت تقلید دنیای واقعی استفاده کنیم. (که در اینجا mocking نام گرفته است)
جهت تقلید رفتار و عملکرد این دو اینترفیس، به کلاسهای تقلید زیر خواهیم رسید:
public class MockEmailSource : IEmailSource
{
public IEnumerable<string> EmailAddressesToReturn { get; set; }
public IEnumerable<string> GetEmailAddresses()
{
return EmailAddressesToReturn;
}
}
public class MockEmailDataStore : IEmailDataStore
{
public IEnumerable<string> SavedEmailAddresses { get; set; }
public void SaveEmailAddresses(IEnumerable<string> emailAddresses)
{
SavedEmailAddresses = emailAddresses;
}
}
ادامه دارد ....
سؤال: مرورگر چه زمانی از کش محلی خودش استفاده خواهد کرد (بدون ارسال درخواستی به سرور) و چه زمانی مجددا از سرور درخواست دریافت مجدد این عنصر کش شده را میکند؟
برای پاسخ دادن به این سؤال نیاز است با مفهومی به نام Conditional Requests (درخواستهای شرطی) آشنا شد که در ادامه به بررسی آن خواهیم پرداخت.
درخواستهای شرطی
مرورگرهای وب دو نوع درخواست شرطی و غیر شرطی را توسط پروتکل HTTP و HTTPS ارسال میکنند. دراینجا، زمانی یک درخواست غیرشرطی ارسال میشود که نسخهی ذخیره شدهی محلی منبع مورد نظر، مهیا نباشد. در این حالت، اگر منبع درخواستی در سرور موجود باشد، در پاسخ ارسالی خود وضعیت 200 یا HTTP/200 OK را باز میگرداند. اگر هدرهای دیگری نیز مانند کش کردن منبع در اینجا تنظیم شده باشند، مرورگر نتیجهی دریافتی را برای استفادهی بعدی ذخیره خواهد کرد.
در بار دومی که منبع مفروضی درخواست میگردد، مرورگر ابتدا به کش محلی خود نگاه خواهد کرد. همچنین در این حالت نیاز دارد که بداند این کش معتبر است یا خیر؟ برای بررسی این مورد ابتدا هدرهای ذخیره شده به همراه منبع، بررسی میشوند. پس از این بررسی اگر مرورگر به این نتیجه برسد که کش محلی معتبر است، دیگر درخواستی را به سرور ارسال نخواهد کرد.
اما در آینده اگر مدت زمان کش شدن تنظیم شده توسط هدرهای مرتبط، منقضی شده باشد (برای مثال با توجه به max-age هدر کش شدن منبع)، مرورگر هنوز هم درخواست کاملی را برای دریافت نسخهی جدید منبع مورد نیاز، به سرور ارسال نمیکند. در اینجا ابتدا یک conditional request را به وب سرور ارسال میکند (یک درخواست شرطی). این درخواست شرطی تنها دارای هدرهای If-Modified-Since و یا If-None-Match است و هدف از آن سؤال پرسیدن از وب سرور است که آیا این منبع خاص، در سمت سرور اخیرا تغییر کردهاست یا خیر؟ اگر پاسخ سرور خیر باشد، باز هم از همان کش محلی استفاده خواهد شد و مجددا درخواست کاملی برای دریافت نمونهی جدیدتر منبع مورد نیاز، به سرور ارسال نمیگردد.
پاسخی که سرور جهت مشخص سازی عدم تغییر منابع خود ارسال میکند، با هدر HTTP/304 Not Modified مشخص میگردد (این پاسخ هیچ body خاصی نداشته و فقط یک سری هدر است). اما اگر منبع درخواستی اخیرا تغییر کرده باشد، پاسخ HTTP/200 OK را در هدر بازگشت داده شده، به مرورگر بازخواهد گرداند (یعنی محتوا را مجددا دریافت کن).
چه زمانی مرورگر درخواستهای شرطی If-Modified-Since را به سرور ارسال میکند؟
اگر یکی از شرایط ذیل برقرار باشد، مرورگر حتی اگر تاریخ کش شدن منبع ویژهای به 10 سال بعد تنظیم شده باشد، مجددا یک درخواست شرطی را برای بررسی اعتبار کش محلی خود به سرور ارسال میکند:
الف) کش شدن بر اساس هدر خاصی به نام vary صورت گرفتهاست (برای مثال بر اساس id یا نام یک فایل).
ب) اگر نحوهی هدایت به صفحهی جاری از طریق META REFRESH باشد.
ج) اگر از طریق کدهای جاوا اسکریپتی، دستور reload صفحه صادر شود.
د) اگر کاربر دکمهی refresh را فشار دهد.
ه) اگر قسمتی از صفحه توسط پروتکل HTTP و قسمتی دیگر از آن توسط پروتکل HTTPS ارائه شود.
و ... اگر بر اساس هدر تاریخ مدت زمان کش شدن منبع، زمان منقضی شدن آن فرا رسیده باشد.
مدیریت درخواستهای شرطی در ASP.NET MVC
تا اینجا به این نکته رسیدیم که قرار دادن ویژگی Output cache بر روی یک اکشن متد، الزاما به معنای کش شدن آن تا مدت زمان تعیین شده نخواهد بود و مرورگر ممکن است (در یکی از 6 حالت ذکر شده فوق) توسط ارسال هدر If-Modified-Since ، سعی در تعیین اعتبار کش محلی خود کند و اگر پاسخ 304 را از سرور دریافت نکند، حتما نسبت به دریافت مجدد و کامل آن منبع اقدام خواهد کرد.
سؤال: چگونه میتوان هدر If-Modified-Since را در ASP.NET MVC مدیریت کرد؟
پاسخ: اگر از فیلتر OutputCache استفاده میکنید، به صورت خودکار هدر Last-Modified را اضافه میکند؛ اما این مورد کافی نیست.
در ادامه یک کنترلر و اکشن متد GetImage آنرا ملاحظه میکنید که تصویری را از مسیر app_data/images خوانده و بازگشت میدهد. همچنین این تصویر بازگشت داده شده را نیز با توجه به OutputCache آن به مدت یک ماه کش میکند.
using System.IO; using System.Web.Mvc; namespace MVC4Basic.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } const int AMonth = 30 * 86400; [OutputCache(Duration = AMonth, VaryByParam = "name")] public ActionResult GetImage(string name) { name = Path.GetFileName(name); var path = Server.MapPath(string.Format("~/app_data/images/{0}", name)); var content = System.IO.File.ReadAllBytes(path); return File(content, "image/png", name); } } }
<img src="@Url.Action("GetImage","Home", new { name = "test.png"})"/>
بار اول که صفحهی اول برنامه درخواست میشود، یک چنین هدرهایی رد و بدل خواهند شد (توسط ابزارهای توکار مرورگر وب کروم تهیه شدهاست؛ همان دکمهی F12 معروف):
Remote Address:127.0.0.1:5656 Request URL:http://localhost:10419/Home/GetImage?name=test.png Request Method:GET Status Code:200 OK Response Headers Cache-Control:public, max-age=2591916 Expires:Sat, 31 May 2014 12:45:55 GMT Last-Modified:Thu, 01 May 2014 12:45:55 GMT
در همین حال اگر صفحه را ریفرش کنیم (فشردن دکمهی F5)، اینبار هدرهای حاصل چنین شکلی را پیدا میکنند:
Remote Address:127.0.0.1:5656 Request URL:http://localhost:10419/Home/GetImage?name=test.png Request Method:GET Status Code:304 Not Modified Request Headers If-Modified-Since:Thu, 01 May 2014 12:45:55 GMT
در ادامه بجای اینکه صفحه را ریفرش کنیم، یکبار دیگر در نوار آدرس آن، دکمهی Enter را فشار خواهیم داد تا آدرس موجود در آن (ریشه سایت) مجددا در حالت معمولی دریافت شود.
Remote Address:127.0.0.1:5656 Request URL:http://localhost:10419/Home/GetImage?name=test.png Request Method:GET Status Code:200 OK (from cache)
مشکل! مرورگر را ببندید، تا کار دیباگ برنامه خاتمه یابد. مجددا برنامه را اجرا کنید. مشاهده خواهید کرد که ... اجرای برنامه در Break point قرار گرفته در سطر اول متد GetImage متوقف میشود. چرا؟! مگر قرار نبود تا یک ماه دیگر کش شود؟! هدر رد و بدل شده نیز Status Code:200 OK کامل است (که سبب دریافت کامل فایل میشود).
Remote Address:127.0.0.1:5656 Request URL:http://localhost:10419/Home/GetImage?name=test.png Request Method:GET Status Code:200 OK Request Headers If-Modified-Since:Thu, 01 May 2014 12:45:55 GMT
using System; using System.IO; using System.Net; using System.Web.Mvc; namespace MVC4Basic.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } const int AMonth = 30 * 86400; [OutputCache(Duration = AMonth, VaryByParam = "name")] public ActionResult GetImage(string name) { name = Path.GetFileName(name); var path = Server.MapPath(string.Format("~/app_data/images/{0}", name)); var lastWriteTime = System.IO.File.GetLastWriteTime(path); this.Response.Cache.SetLastModified(lastWriteTime.ToUniversalTime()); var header = this.Request.Headers["If-Modified-Since"]; if (!string.IsNullOrWhiteSpace(header)) { DateTime isModifiedSince; if (DateTime.TryParse(header, out isModifiedSince) && isModifiedSince > lastWriteTime) { return new HttpStatusCodeResult(HttpStatusCode.NotModified); } } var content = System.IO.File.ReadAllBytes(path); return File(content, "image/png", name); } } }
برای امتحان آن همانطور که عنوان شد فقط کافی است یکبار مرورگر خود را کاملا بسته و مجددا برنامه را اجرا کنید.
Remote Address:127.0.0.1:5656 Request URL:http://localhost:10419/Home/GetImage?name=test.png Request Method:GET Status Code:304 Not Modified Request Headers If-Modified-Since:Thu, 01 May 2014 13:43:32 GMT
موارد کاربرد
اکثر فید خوانهای معروف نیز ابتدا هدر If-Modified-Since را ارسال میکنند و سپس (اگر چیزی تغییر کرده بود) محتوای فید شما را دریافت خواهند کرد. بنابراین برای کاهش بار برنامه و هچنین کاهش میزان انتقال دیتای سایت، مدیریت آن در حین ارائه محتوای پویای فیدها نیز بهتر است صورت گیرد. همچنین هر جایی که قرار است فایلی به صورت پویا به کاربران ارائه شود؛ مانند مثال فوق.
تبدیل این کدها به روش سازگار با ASP.NET MVC
ما در اینجا رسیدیم به یک سری کد تکراری if و else که باید در هر اکشن متدی که OutputCache دارد، تکرار شود. روش AOP وار آن در ASP.NET MVC، تبدیل این کدها به یک فیلتر با قابلیت استفادهی مجدد است:
[AttributeUsage(AttributeTargets.Method, AllowMultiple = false)] public sealed class SetIfModifiedSinceAttribute : ActionFilterAttribute { public string Parameter { set; get; } public string BasePath { set; get; } public override void OnActionExecuting(ActionExecutingContext filterContext) { var response = filterContext.RequestContext.HttpContext.Response; var request = filterContext.RequestContext.HttpContext.Request; var path = getPath(filterContext); if (string.IsNullOrWhiteSpace(path)) { response.StatusCode = (int)HttpStatusCode.NotFound; filterContext.Result = new EmptyResult(); return; } var lastWriteTime = File.GetLastWriteTime(path); response.Cache.SetLastModified(lastWriteTime.ToUniversalTime()); var header = request.Headers["If-Modified-Since"]; if (string.IsNullOrWhiteSpace(header)) return; DateTime isModifiedSince; if (DateTime.TryParse(header, out isModifiedSince) && isModifiedSince > lastWriteTime) { response.StatusCode = (int)HttpStatusCode.NotModified; response.SuppressContent = true; filterContext.Result = new EmptyResult(); } } string getPath(ActionExecutingContext filterContext) { if (!filterContext.ActionParameters.ContainsKey(Parameter)) return string.Empty; var name = filterContext.ActionParameters[Parameter] as string; if (string.IsNullOrWhiteSpace(name)) return string.Empty; var path = Path.GetFileName(name); path = filterContext.HttpContext.Server.MapPath(string.Format("{0}/{1}", BasePath, path)); return !File.Exists(path) ? string.Empty : path; } }
و برای استفاده از آن خواهیم داشت:
[SetIfModifiedSince(Parameter = "name", BasePath = "~/app_data/images/")] [OutputCache(Duration = AMonth, VaryByParam = "name")] public ActionResult GetImage(string name) { name = Path.GetFileName(name); var path = Server.MapPath(string.Format("~/app_data/images/{0}", name)); var content = System.IO.File.ReadAllBytes(path); return File(content, "image/png", name); }
خلاصهی بحث
چون فیلتر OutputCache در ASP.NET MVC، هدر If-Modified-Since را پردازش نمیکند (از این جهت که پردازش آن برای نمونه در مثال فوق وابسته به منطق خاصی است و عمومی نیست)، اگر با هر بار گشودن سایت خود مشاهده کردید، تصاویر پویایی که قرار بوده یک ماه کش شوند، دوباره از سرور درخواست میشوند (البته به ازای هرباری که مرورگر از نو اجرا میشود و نه در دفعات بعدی که صفحات سایت با همان وهلهی ابتدایی مرور خواهند شد)، نیاز است خودتان دسترسی کار پردازش هدر If-Modified-Since را انجام داده و سپس status code 304 را در صورت نیاز، ارسال کنید.
و در حالت عمومی، طراحی سیستم caching محتوای پویای شما بدون پردازش هدر If-Modified-Since ناقص است (تفاوتی نمیکند که از کدام فناوری سمت سرور استفاده میکنید).
برای مطالعه بیشتر
Understanding Conditional Requests and Refresh
Use If-Modified-Since header in ASP.NET
Make your browser cache the output of an HttpHandler
304 Your images from a database
Conditional GET
Website Performance with ASP.NET - Part4 - Use Cache Headers
ASP.NET MVC 304 Not Modified Filter for Syndication Content
به نظر من jQuery به چندین دلیل از کتابخانه MS Ajax و ملحقات آن مهمتر است و باید به آن پرداخته شود:
1- دانش شما قابل انتقال است. اگر روزی به PHP یا JSP یا موارد مشابه دیگری مهاجرت کردید، دانش jQuery شما باز هم قابل استفاده خواهد بود.
2- این کتابخانه بسیار سبکتر و کم حجم تر از MS Ajax است. (حجم آن کمتر از نصف است(+))
3- تقریبا از اکثر فریم ورکهای جاوا اسکریپتی موجود سریعتر است. (+)
4- پشتیبانی آن از مرورگرهای مختلف بینظیر است. لازم نیست عمر گرانمایه را صرف این کنید که چرا این اسکریپت در فایرفاکس کار میکنه اما در IE خیر.
5- کوهی از افزونههای مختلف برای آن موجود است. (jQuery plugin را در گوگل جستجو کنید)
6- استفاده از آن، میزان کد جاوا اسکریپتی را که باید نوشت تا حد بسیار قابل ملاحظهای کاهش میدهد، که در نهایت سبب ایجاد کدی خواناتر در مدت زمانی کمتر میگردد.
7- کدنویسی با jQuery از کد نویسی JavaScript ایی خالص بسیار سادهتر است. افرادی که تا دیروز حتی طرف جاوا اسکریپت هم نمیرفتند، امروزه پلاگینهای jQuery مینویسند.
8- مستندات کاملی داشته به همراه مثالهایی بسیار کاربردی.
9- به دلیل استفاده شدن از آن در پلتفرمهای مختلف، مثالهای کاربردی بیشتری داشته، همچنین منابع آموزشی پر محتواتری را نیز میتوان در این رابطه یافت. (میتوان tutorial های مربوط به php را مشاهده و آنها را به ASP.Net تبدیل کرد و صرفا منحصر به یک عده و یک پلتفرم نیست)
10- خلاقیت شما را نکشته و از شما فردی که هیچگونه درکی نسبت به عملیات اجکسی رخ داده ندارد، نخواهد ساخت. (MS Ajax برای ASP.Net یک شاهکار است. چند عدد محصور کننده را استفاده کنید، برنامه نویسی شما با روش سابق "هیچ" تفاوتی نخواهد داشت. مسلما این توانمندی تیم مایکروسافت را نمایش میدهد، نه توانمندی من و شما را! اما اگر نیاز به کمی ابتکار وجود داشت اینجا است که گیر خواهید افتاد و موارد 6 و 7 و 9 ذکر شده، jQuery را بر این کتابخانه مقدم خواهد ساخت)
11- با آمدن ASP.Net MVC تمایل به استفاده از jQuery به شدت افزایش یافته که نمود آنرا در وبلاگهای مطرح در این زمینه میتوان مشاهده کرد (اکثر مطالب ارسالی این روزهای بلاگهای ASP.Net حول و حوش ASP.Net MVC و jQuery است).
حرکت دادن المانها در صفحه
ابتدا قطعه کد HTML زیر را درنظر بگیرید:
<body> <h2>Flavors</h2> <ul class="flavors"> <li>chocolate</li> <li>strawberry</li> <li>vanilla</li> </ul> <h2>Types</h2> <ul class="types"> <li>frozen yogurt</li> <li>custard</li> <li>Italian ice</li> </ul> <ul class="unassigned"> <li>rocky road</li> <li>gelato</li> </ul> </body>
<body> <h2>Types</h2> <ul class="types"> <li>frozen yogurt</li> <li>Italian ice</li> <li>custard</li> <li>gelato</li> </ul> <h2>Flavors</h2> <ul class="flavors"> <li>chocolate</li> <li>vanilla</li> <li>rocky road</li> <li>strawberry</li> </ul> <ul class="unassigned"> </ul> </body>
حرکت دادن المانها توسط jQuery
var $flavors = $('.flavors'); var $chocolate = $flavors.find('li').eq(0); var $vanilla = $flavors.find('li').eq(2); $chocolate.after($vanilla);
در ادامه میخواهیم لیست types را به همراه عنوان آن، به قبل از لیست flavors منتقل کنیم:
var $typesHeading = $('h2').eq(1); $typesHeading.prependTo('body'); $typesHeading.after($('.types'));
سپس در لیست unassigned ابتدا rocky road آنرا یافته و به بالای strawberry در لیست flavors اضافه میکنیم. همچنین gelato آنرا نیز یافته و به انتهای لیست types اضافه خواهیم کرد:
var $unassigned = $('.unassigned'); var $rockyRoad = $unassigned.find('li').eq(0); var $gelato = $unassigned.find('li').eq(1); $vanilla.after($rockyRoad); $gelato.appendTo($('.types'));
حرکت دادن المانها توسط جاوا اسکریپت خالص (سازگار با IE 8.0 به بعد)
در ابتدا میخواهیم المان vanilla را به قبل از المان strawberry حرکت دهیم. برای اینکار میتوان از متد استاندارد insertBefore استفاده کرد:
var flavors = document.querySelector('.flavors'); var strawberry = flavors.children[1]; var vanilla = flavors.children[2]; flavors.insertBefore(vanilla, strawberry);
سپس کار انتقال عنوان لیست types و خود آن به قبل از لیست flavors صورت میگیرد:
var headings = document.querySelectorAll('h2'); var flavorsHeading = headings[0]; var typesHeading = headings[1]; var typesList = document.querySelector('.types'); document.body.insertBefore(typesHeading, flavorsHeading); document.body.insertBefore(typesList, flavorsHeading);
در آخر میخواهیم آیتمهای لیست unassigned را به لیستهای مرتبط با آنها انتقال دهیم:
flavors.insertBefore(document.querySelector('.unassigned > li'), strawberry); document.querySelector('.types').appendChild(document.querySelector('.unassigned > li'));
در سطر دوم، چون هم اکنون المان rocky road از لیست unassigned حذف شدهاست، متد querySelector فراخوانی شده، اولین عنصر لیست یا همان gelato را بازگشت میدهد. این المان را توسط متد appendChild به انتهای لیست types اضافه خواهیم کرد. متد appendChild نیز همانند متد insertBefore نیاز به یک والد دارد که همان عنصری است که قرار است المانها به آن افزوده شوند.
کپی کردن المانها
<ol class="numbers"> <li>one</li> <li>two</li> </ol>
// deep clone: return value is an exact copy $('.numbers').clone();
و در جاوا اسکریپت خالص (سازگار با IE 8.0 به بعد) برای کپی کردن المانها دو روش shallow و deep وجود دارد:
// shallow clone: return value is an empty <ol> document.querySelector('.numbers').cloneNode(); // deep clone: return value is an exact copy of the tree document.querySelector('.numbers').cloneNode(true);
باید دقت داشت که متد cloneNode آنچه را که مشاهده میکنید یا همان اصل markup را کپی میکند. بنابراین اگر از طریق جاوا اسکریپت تغییراتی را در آن شیء داده باشید در متد cloneNode لحاظ نمیشود.
بدیهی است المانهای clone شده تا زمانیکه با متدهایی مانند insertBefore و یا appendChild به صفحه اضافه نشوند، در صفحه نمایان نخواهند شد.
ایجاد و حذف المانها
فرض کنید میخواهیم به لیست flavors مثال ابتدای بحث، دو مورد جدید را اضافه کنیم.
روش افزودن المانهای جدید توسط جیکوئری:
var $flavors = $('.flavors'); // add two new flavors $('<li>pistachio</li>').appendTo($flavors); $('<li>neapolitan</li>').appendTo($flavors);
// remove the "gelato" type $('.types li:last').remove();
روش افزودن المانهای جدید توسط جاوا اسکریپت خالص:
var flavors = document.querySelector('.flavors'); // add two new flavors flavors.insertAdjacentHTML('beforeend', '<li>pistachio</li>') flavors.insertAdjacentHTML('beforeend', '<li>neapolitan</li>')
// remove the "gelato" type document.querySelector('.types li:last-child').remove();
روش دیگر انجام اینکار به صورت زیر توسط متد removeChild است:
var gelato = document.querySelector('.types li:last-child'); // remove the "gelato" type gelato.parentNode.removeChild(gelato);
کار با المانهای متنی
در جیکوئری متد ()text آن امکان دریافت محتوای متنی و همچنین به روز رسانی آنرا میسر میکند:
$('.types li').eq(1).text('italian ice');
در جاوا اسکریپت خالص، دو خاصیت textContent و همچنین innerText برای خواندن و یا به روز رسانی محتوای متنی عناصر مورد استفاده قرار میگیرند. برای مثال معادل قطعه کد جیکوئری فوق که از متد text استفاده میکند با جاوا اسکریپت خالص به صورت زیر است:
document.querySelectorAll('.types li')[1].textContent = 'italian ice';
خاصیت innerText هرچند بر روی اینترفیس HTMLElement تعریف شدهاست، اما جزء هیچکدام از استانداردهای وب نیست؛ ولی توسط تمام مرورگرهای امروزی پشتیبانی میشود. در این حالت به روز رسانی متن توسط آن با خاصیت textContent دقیقا یکی است؛ اما خروجی آن برعکس حالتهای قبل، متن رندر شدهی المانها را بازگشت میدهد. برای مثال در اینجا شامل فاصلههای پیش از این المانها در markup نمیشود.
برای مثال این قسمتی از خروجی خاصیت textContent است:
Flavors chocolate vanilla rocky road strawberry
Flavors chocolate vanilla rocky road strawberry
گاهی از اوقات از سرور قطعهای کد HTML ایی را دریافت میکنیم (که هنوز به صورت المان یا المانهای DOM در نیامدهاست) و در سمت کلاینت میخواهیم آنرا به قسمتی از صفحه اضافه کنیم. روش انجام اینکار در jQuery به صورت زیر است:
var container = '<h2>Containers</h2><ul><li>cone</li><li>cup</li></ul>'; $('<div>').html(container).appendTo('body');
روش دریافت محتوای رشتهای HTML قابل ارسال به سرور نیز به صورت زیر است:
var contents = $('body').html();
var div = document.createElement('div'); div.innerHTML = container; document.body.appendChild(div);
روش خواندن این محتوای نهایی نیز به صورت زیر است:
var contents = document.body.innerHTML;
(function ($, undefined) { $.fn.extend({ 'rtlColResizable': function (options) { var defaults = { //Default values for the plugin's options here }; options = $.extend(defaults, options); var isMouseButtonPressed; var $resizingElement = undefined; var resizingElementStartWidth; var mouseCursorStartX; var isCursorInResizingPosition; var addResizingCursorStyle = function ($element) { $element.css({ 'cursor': 'col-resize', 'user-select': 'none', '-o-user-select': 'none', '-ms-user-select': 'none', '-moz-user-select': 'none', '-khtml-user-select': 'none', '-webkit-user-select': 'none', }); }; var removeResizingCursorStyle = function ($element) { $element.css({ 'cursor': 'default', 'user-select': 'text', '-o-user-select': 'text', '-ms-user-select': 'text', '-moz-user-select': 'text', '-khtml-user-select': 'text', '-webkit-user-select': 'text', }); }; var canResize = function (e) { return (e.offsetX || e.clientX - $(e.target).offset().left) < 10; }; return this.each(function () { var opts = options; var tableColumns = $(this).find('th'); tableColumns.filter(':not(:last-child)').mousedown(function (e) { $resizingElement = $(this); isMouseButtonPressed = true; mouseCursorStartX = e.pageX; resizingElementStartWidth = $resizingElement.width(); }); tableColumns.mousemove(function (e) { if (canResize(e)) { addResizingCursorStyle($(e.target)); isCursorInResizingPosition = true; } else if (!isMouseButtonPressed) { removeResizingCursorStyle($(e.target)); isCursorInResizingPosition = false; } if (isCursorInResizingPosition && isMouseButtonPressed) { $resizingElement.width(resizingElementStartWidth + (mouseCursorStartX - e.pageX)); } }); $(document).mouseup(function () { if (isMouseButtonPressed) { removeResizingCursorStyle($resizingElement); isMouseButtonPressed = false; } }); }); } }); })(jQuery);
<!DOCTYPE html> <html> <head> <title>rtlColResizable Sample</title> </head> <body> <table id="myTable"> <thead> <tr> <th>ستون1</th> <!-- نام ستونها را حتما در این تگ باید تعریف کنید --> <th>ستون2</th> <th>ستون3</th> </tr> </thead> <tr> <td>داده مربوط به ستون 1</td> <td>داده مربوط به ستون 2 </td> <td>داده مربوط به ستون 3</td> </tr> </table> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.rtlColResizable.js"></script> <script> $('table#myTable').rtlColResizable(); </script> </body> </html>
امروز داشتم یک سری از پلاگینهای jQuery را مرور میکردم، مورد زیر به نظرم واقعا حرفهای اومد و کمبود آن هم در بین کنترلهای استاندارد ASP.Net محسوس است:
Masked Input Plugin
استفاده از آن به صورت معمولی بسیار ساده است. فقط کافی است اسکریپتهای jQuery و سپس این افزونه به هدر صفحه اضافه شوند و بعد هم مطابق صفحه usage آن عمل کرد.
خیلی هم عالی! ولی این شیوهی متداول کار در ASP.Net نیست. آیا بهتر نیست این مجموعه را تبدیل به یک کنترل کنیم و از این پس به سادگی با استفاده از Toolbox ویژوال استودیو آنرا به صفحات اضافه کرده و بدون درگیر شدن با دستکاری سورس html صفحه، از آن استفاده کنیم؟ بهعبارتی دیگر یکبار باید با جزئیات درگیر شد، آنرا بسته بندی کرد و سپس بارها از آن استفاده نمود. (مفاهیم شیءگرایی)
برای اینکار، یک پروژه جدید ایجاد ASP.Net server control را آغاز نمائید (به نام MaskedEditCtrl).
به صورت پیش فرض یک قالب استاندارد ایجاد خواهد شد که کمی نیاز به اصلاح دارد. نام کلاس را به MaskedEdit تغییر خواهیم داد و همچنین در قسمت ToolboxData نیز نام کنترل را به MaskedEdit ویرایش میکنیم.
برای اینکه مجبور نشویم یک کنترل کاملا جدید را از صفر ایجاد کنیم، خواص و تواناییهای اصلی این کنترل را از TextBox استاندارد به ارث خواهیم برد. بنابراین تا اینجای کار داریم:
namespace MaskedEditCtrl
{
[DefaultProperty("MaskFormula")]
[ToolboxData("<{0}:MaskedEdit runat=server></{0}:MaskedEdit>")]
[Description("MaskedEdit Control")]
public class MaskedEdit : TextBox
{
از ASP.Net 2.0 به بعد، امکان قرار دادن فایلهای اسکریپت و یا تصاویر همراه یک کنترل، درون فایل dll آن بدون نیاز به توزیع مجزای آنها به صورت WebResource مهیا شده است. برای این منظور اسکریپتهای jQuery و افزونه mask edit را به پروژه اضافه نمائید. سپس به قسمت خواص آنها (هر دو اسکریپت) مراجعه کرده و build action آنها را به Embedded Resource تغییر دهید (شکل زیر):
از این پس با کامپایل پروژه، این فایلها به صورت resource به dll ما اضافه خواهند شد. برای تست این مورد میتوان به برنامه reflector مراجعه کرد (تصویر زیر):
پس از افزودن مقدماتی اسکریپتها و تعریف آنها به صورت resource ، باید آنها را در فایل AssemblyInfo.cs پروژه نیز تعریف کرد (به صورت زیر).
[assembly: WebResource("MaskedEditCtrl.jquery.min.js", "text/javascript")]
[assembly: WebResource("MaskedEditCtrl.jquery.maskedinput-1.1.4.pack.js", "text/javascript")]
پس از آن نوبت به افزودن این اسکریپتها به صورت خودکار در هنگام نمایش کنترل است. برای این منظور داریم:
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
//adding .js files
if (!Page.ClientScript.IsClientScriptIncludeRegistered("jquery_base"))
{
string scriptUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"MaskedEditCtrl.jquery.min.js");
Page.ClientScript.RegisterClientScriptInclude("jquery_base", scriptUrl);
}
if (!Page.ClientScript.IsClientScriptIncludeRegistered("edit_ctrl"))
{
string scriptUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"MaskedEditCtrl.jquery.maskedinput-1.1.4.pack.js");
Page.ClientScript.RegisterClientScriptInclude("edit_ctrl", scriptUrl);
}
if (!Page.ClientScript.IsStartupScriptRegistered("MaskStartup" + this.ID))
{
// Form the script to be registered at client side.
StringBuilder sbStartupScript = new StringBuilder();
sbStartupScript.AppendLine("jQuery(function($){");
sbStartupScript.AppendLine("$(\"#" + this.ClientID + "\").mask(\"" + MaskFormula + "\");");
sbStartupScript.AppendLine("});");
Page.ClientScript.RegisterStartupScript(typeof(Page),
"MaskStartup" + this.ID, sbStartupScript.ToString(), true);
}
}
نکته جاوا اسکریپتی: علت استفاده از this.ClientID جهت معرفی نام کنترل جاری این است که هنگامیکه کنترل توسط یک master page رندر شود، ID آن توسط موتور ASP.Net کمی تغییر خواهد کرد. برای مثال myTextBox به ctl00_ContentPlaceHolder1_myTextBox تبدیل خواهد شد و اگر صرفا this.ID ذکر شده باشد دیگر دسترسی به آن توسط کدهای جاوا اسکریپت مقدور نخواهد بود. بنابراین از ClientID جهت دریافت ID نهایی رندر شده توسط ASP.Net کمک میگیریم.
در اینجا MaskFormula مقداری است که هنگام افزودن کنترل به صفحه میتوان تعریف کرد.
[Description("MaskedEdit Formula such as 99/99/9999")]
[Bindable(true), Category("MaskedEdit"), DefaultValue(0)]
public string MaskFormula
{
get
{
if (ViewState["MaskFormula"] == null) ViewState["MaskFormula"] = "99/99/9999";
return (string)ViewState["MaskFormula"];
}
set { ViewState["MaskFormula"] = value; }
}
نکته مهم: در اینجا حتما باید از view state جهت نگهداری مقدار این خاصیت استفاده کرد تا در حین post back ها مقادیر انتساب داده شده حفظ شوند.
اکنون پروژه را کامپایل کنید. برای افزودن کنترل ایجاد شده به toolbox میتوان مطابق تصویر عمل کرد:
نکته: برای افزودن آیکون به کنترل (جهت نمایش در نوار ابزار) باید: الف) تصویر مورد نظر از نوع bmp باشد با اندازه 16 در16 pixel . ب) باید آنرا به پروژه افزود و build action آن را به Embedded Resource تغییر داد. سپس آنرا در فایل AssemblyInfo.cs پروژه نیز تعریف کرد (به صورت زیر).
[assembly: System.Web.UI.WebResource("MaskedEditCtrl.MaskedEdit.bmp", "img/bmp")]
جهت دریافت سورس کامل و فایل بایناری این کنترل، اینجا کلیک کنید.
معرفی DNTBreadCrumb
this.AddBreadCrumb(new BreadCrumb { Title = categoryname.Title, Order = 1, Url = Url.Action("Index", "ProductList", new { catid = categoryname.Id }), ForceUrl = true }); this.AddBreadCrumb(new BreadCrumb { Title = result.Title, Order = 2, ForceUrl = false });
در این مقاله با ادیتور VS Code کار میکنیم. بعد از نصب آن، از منوی Terminal، گزینهی New Terminal را کلیک کنید تا پنجرهی PowerShell نمایش داده شود؛ برای سرعت و دقت بیشتر در برنامههای vue.js ای. با دستور زیر vue cli را نصب میکنیم (فقط یک مرتبه و برای برنامههای بعدی vue.jsای، نیازی به اجرای این دستور نداریم):
npm install -g @vue/cli
جهت راه اندازی یک برنامهی پیش فرض Vue.js ای، کافیست دستور زیر را اجرا نماییم تا پکیجهای مورد نیاز، به همراه کانفیگ اولیه (Zero config) برای ما ایجاد شوند:
vue create movie-app
بعد از ایجاد برنامه در vs code، از طریق منوی File، گزینه Open Folder را کلیک کرده و پوشه برنامهای را که ایجاد کردیم، Select Folder میکنیم. ساختار اولیهی برنامهی ایجاد شده، به شکل زیر میباشد:
نیازمندیهای مثال جاری
A) برای گرفتن اطلاعات مورد نمایش در مثال جاری، از سایت omdbapi.com استفاده میکنیم که با دریافت یک api key آن بصورت رایگان، میتوانیم web serviceهای آن را Call نماییم.
B) از vuetify برای ui استفاده میکنیم که بصورت Material Design و دارای کامپوننتهای غنی میباشد؛ ضمن اینکه RTL را هم پشتیبانی میکند.
برای نصب آن در Terminal دستور زیر را اجرا میکنیم:
vue add vuetify
سپس جهت تست و صحت افزوده شدن و کانفیگ درست، با دستور زیر برنامه را اجرا میکنیم:
npm run serve
بعد از اجرای دستور فوق، روی گزینه زیر ctrl+click میکنیم تا نتیجه کار در مرورگر قابل رویت باشد:
نمایش صفحه زیر نشان دهندهی درستی انجام کار تا اینجا است:
نکته: جهت استفاده از امکان RTL کافیست در فایل vuetify.js واقع در پوشهی plugins، تغییرات زیر را انجام دهیم. در مثال جاری بدلیل اینکه اطلاعات انگلیسی میباشند، از نسخه LTR آن استفاده میکنیم؛ هر چند یکسری api فارسی نیز موجود میباشد که میتوان از آنها استفاده نمود.
import Vue from 'vue' import Vuetify from 'vuetify/lib' import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md', rtl: true })
C) نصب vue-router : جهت انجام routeهای تودرتو ، مپ کردن کامپوننت ها با آدرسی مشخص، کار با پارامتر و HTML5 History API مورد استفاده قرار میگیرد. برای نصب آن، دستور زیر را اجرا میکنیم:
npm install vue-router
برای نوشتن routeهای مورد نیاز، یک فولدر را با نام router، در پوشه src برنامه ایجاد میکنیم و یک فایل جاوا اسکریپتی را در آن با نام index.js، میسازیم (این ساختار برای مدیریت بهتر پروژه میباشد):
درون فایل index.js، محتویات زیر را طبق مستندات آن قرار میدهیم:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
جهت استفاده از این router، نیاز است تا در نمونهی وهله سازی شدهی vue برنامه بکار گرفته شود. فایل main.js را باز کنید و خط زیر را در قسمت بالای برنامه وارد کنید:
import router from './router'
اکنون محتویات فایل main.js بشکل زیر میباشد:
import Vue from 'vue' import './plugins/vuetify' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')
D) نصب axios : برای انجام درخواستهای HTTP و عملیات ایجکس در vue.js ترجیحا بهتر است از axios که یک کتابخانهی محبوب میباشد و کار با آن ساده است، استفاده شود. برای نصب آن، دستور زیر را اجرا میکنیم:
npm install axios
E) نصب vuex : کتابخانهای جهت مدیریت حالت (state management) برای vue.js میباشد و مشابه آن Flux و Redux برای React میباشند. برای نصب، دستور زیر را اجرا میکنیم:
npm install vuex
برای بکارگیری آن یک فولدر را با نام store در پوشهی src برنامه ایجاد میکنیم و یک فایل جاوا اسکریپتی را در آن با نام index.js میسازیم (این ساختار برای مدیریت بهتر پروژه میباشد). درون فایل index.js، محتویات زیر را طبق مستندات آن و ^ قرار میدهیم.
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store()
برای استفاده و کانفیگ آن، محتویات فایل main.js را بشکل زیر تغییر دهید:
import Vue from 'vue' import './plugins/vuetify' import App from './App.vue' import router from './router' import {store} from './store' Vue.config.productionTip = false new Vue({ render: h => h(App), store, router }).$mount('#app')
نکته: برای اجرای برنامه و دریافت پکیجهای مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
npm install