نظرات اشتراک‌ها
چرا از آنگولار به ری اکت + ری داکس سوئیچ کردم!
چند نکته‌ی مهم
- قسمت‌های نفرت انگیز نظرات این شخص حذف و ویرایش شدند.
- بحث فنی مشکلی ندارد. منتها مشکل این افراد بحث فنی نیست.
- بجای کمک و همکاری، بررسی می‌کنند شما در سایت مشغول به چه کاری هستید، مثلا چندتا مطلب در مورد انگیولار منتشر کرده‌اید، بلافاصله شروع می‌کنند به سمپاشی در این مورد خاص. یعنی این افراد مطلقا به دنبال بحث آزاد نیستند. به دنبال صدمه زدن هستند. اینجا بحث فریم ورک خاصی هم مطرح نیست. شما شروع کنید در مورد مثلا Vue.js مطلب بنویسید؛ یک ماه بعدش شروع می‌کنند به سمپاشی در این مورد خاص. شروع کنید در مورد NET Core. مطلب تهیه کنید، بلافاصله تخریب این مورد را شروع می‌کنند.
- اینجا یک جمع هست و حضور در آن مستلزم درک چارچوب آن و هماهنگ شدن با آن است یا ترک این سایت؛ نه یک گوشه ایستادن و مدام سمپاشی کردن.
- شعور حضور در یک جمع حکم می‌کند، در این سایت که اساسا مایکروسافتی هست، مدام خصوصا در مورد کارهای سورس باز آن، زمانیکه مجوز این کارها بر اساس مجوزهای رسمی و پذیرفته شده‌ی دنیای سورس باز است، نفرت پراکنی نشود.
- احتمالا بر اساس منطق این شخص، تمام کارهای سورس بازی که ما تا الان انجام دادیم «کثیف» (قسمت‌هایی که حذف شدند) و بر مبنای تئوری توطئه هستند.
- اگر سابقه‌ی این افراد نفرت پراکن را بررسی کنید، به هیچ پروژه‌ی سورس باز به درد بخوری نخواهید رسید. فقط به دنبال توهین، صدمه زدن، نا امید کردن و از بین بردن انرژی مثبت افراد خصوصا فعال سایت هستند.
 
نتیجه‌ی گیری: اگر خیری ندارید، شر نرسانید. اینجا یک جمع در اساس مایکروسافتی هست. یا با آن هماهنگ شوید، یا آن‌را ترک کنید.
مسیرراه‌ها
Entity framework code-first
شروع به کار با EF Code first

برای تکمیل بحث نیاز است تغییرات انجام شده از نگارش 4 به 6 را نیز مد نظر داشته باشید:


آشنایی با مباحث Migrations



آشنایی با تنظیمات نگاشت‌ها به دو روش استفاده از ویژگی‌ها و Fluent API



اعتبارسنجی و بررسی استثناءها



ردیابی تغییرات



استفاده از SQL خام و بانک‌های اطلاعاتی متفاوت

      نکات مهم کوئری نویسی در EF



      استفاده از EF در WPF


      لایه بندی پروژه‌های EF Code first



      پروژ‌ه‌های انجام شده با EF Code first

       
      اشتراک‌ها
      فایل security.txt مخصوص وب سایت‌ها چیست؟

      The main purpose of security.txt is to help make things easier for companies and security researchers when trying to secure platforms. Thanks to security.txt, security researchers can easily get in touch with companies about security issues. 

      فایل security.txt مخصوص وب سایت‌ها چیست؟
      مطالب
      توزیع یک اپلیکیشن ASP.NET MVC 5 روی Windows Azure
      این مقاله به شما نشان می‌دهد چگونه یک اپلیکیشن وب ASP.NET MVC 5 بسازید که کاربران را قادر می‌سازد با اطلاعات Facebook یا Google احراز هویت شده و به سایت وارد شوند. همچنین این اپلیکیشن را روی Windows Azure توزیع (Deploy) خواهید کرد.
      می توانید بصورت رایگان یک حساب کاربری Windows Azure بسازید. اگر هم Visual Studio 2013 را ندارید، بسته SDK بصورت خودکار Visual Studio 2013 for Web را نصب می‌کند. پس از آن می‌توانید به توسعه رایگان اپلیکیشن‌های Azure بپردازید، اگر می‌خواهید از Visual Studio 2012 استفاده کنید به این مقاله مراجعه کنید. این مقاله نسبت به لینک مذکور بسیار ساده‌تر است.
      این مقاله فرض را بر این می‌گذارد که شما هیچ تجربه ای در کار با Windows Azure ندارید. در انتهای این مقاله شما یک اپلیکیشن مبتنی بر داده (data-driven) و امن خواهید داشت که در فضای رایانش ابری اجرا می‌شود.
      چیزی که شما یاد می‌گیرید:
      • چطور یک اپلیکیشن وب ASP.NET MVC 5 بسازید و آن را روی یک وب سایت Windows Azure منتشر کنید.
      • چگونه از OAuth، OpenID و سیستم عضویت ASP.NET برای ایمن سازی اپلیکیشن خود استفاده کنید.
      • چگونه از API جدید سیستم عضویت برای مدیریت اعضا و نقش‌ها استفاده کنید.
      • چگونه از یک دیتابیس SQL برای ذخیره داده‌ها در Windows Azure استفاده کنید.
      شما یک اپلیکیشن مدیریت تماس (Contact Manager) ساده خواهید نوشت که بر پایه ASP.NET MVC 5 بوده و از Entity Framework برای دسترسی داده استفاده می‌کند. تصویر زیر صفحه ورود نهایی اپلیکیشن را نشان می‌دهد.

      توجه: برای تمام کردن این مقاله به یک حساب کاربری Windows Azure نیاز دارید، که بصورت رایگان می‌توانید آن را بسازید. برای اطلاعات بیشتر به Windows Azure Free Trial مراجعه کنید.

      در این مقاله:

      • برپایی محیط توسعه (development environment)
      • برپایی محیط Windows Azure
      • ایجاد یک اپلیکیشن ASP.NET MVC 5
      • توزیع اپلیکیشن روی Windows Azure
      • افزودن یک دیتابیس به اپلیکیشن
      • افزودن یک OAuth Provider
      • استفاده از Membership API
      • توزیع اپلیکیشن روی Windows Azure
      • قدم‌های بعدی


      برپایی محیط توسعه

      برای شروع Windows Azure SDK for .NET را نصب کنید. برای اطلاعات بیشتر به Windows Azure SDK for Visual Studio 2013 مراجعه کنید. بسته به اینکه کدام یک از وابستگی‌ها را روی سیستم خود دارید، پروسه نصب می‌تواند از چند دقیقه تا نزدیک دو ساعت طول بکشد. توسط Web Platform می‌توانید تمام نیازمندی‌های خود را نصب کنید.

      هنگامی که این مرحله با موفقیت به اتمام رسید، تمام ابزار لازم برای شروع به کار را در اختیار دارید.


      برپایی محیط Windows Azure

      در قدم بعدی باید یک وب سایت Windows Azure و یک دیتابیس بسازیم.
      ایجاد یک وب سایت و دیتابیس در Windows Azure

      وب سایت Windows Azure شما در یک محیط اشتراکی (shared) میزبانی می‌شود، و این بدین معنا است که وب سایت‌های شما روی ماشین‌های مجازی (virtual machines) اجرا می‌شوند که با مشتریان دیگر Windows Azure به اشتراک گذاشته شده اند. یک محیط میزبانی اشتراکی گزینه ای کم هزینه برای شروع کار با رایانش‌های ابری است. اگر در آینده ترافیک وب سایت شما رشد چشم گیری داشته باشد، می‌توانید اپلیکیشن خود را طوری توسعه دهید که به نیازهای جدید پاسخگو باشد و آن را روی یک ماشین مجازی اختصاصی (dedicated VMs) میزبانی کنید. اگر معماری پیچیده‌تری نیاز دارید، می‌توانید به یک سرویس Windows Azure Cloud مهاجرت کنید. سرویس‌های ابری روی ماشین‌های مجازی اختصاصی اجرا می‌شوند که شما می‌توانید تنظیمات آنها را بر اساس نیازهای خود پیکربندی کنید.
      Windows Azure SQL Database یک سرویس دیتابیس رابطه ای (relational) و مبتنی بر Cloud است که بر اساس تکنولوژی‌های SQL Server ساخته شده. ابزار و اپلیکیشن هایی که با SQL Server کار می‌کنند با SQL Database نیز می‌توانند کار کنند.

      • روی Web Site  و سپس Custom Create  کلیک کنید.

      • در مرحله Create Web Site  در قسمت URL  یک رشته وارد کنید که آدرسی منحصر بفرد برای اپلیکیشن شما خواهد بود. آدرس کامل وب سایت شما، ترکیبی از مقدار این فیلد و مقدار روبروی آن است.

      • در لیست Database گزینه Create  a free 20 MB SQL Database  را انتخاب کنید.
      • در لیست Region  همان مقداری را انتخاب کنید که برای وب سایت تان انتخاب کرده اید. تنظیمات این قسمت مشخص می‌کند که ماشین مجازی (VM) شما در کدام مرکز داده (data center) خواهد بود.
      • در قسمت DB Connection String Name  مقدار پیش فرض DefaultConnection  را بپذیرید.
      • دکمه فلش پایین صفحه را کلیک کنید تا به مرحله بعد، یعنی مرحله Specify Database Settings  بروید.
      • در قسمت Name  مقدار ContactDB  را وارد کنید (تصویر زیر).
      • در قسمت Server  گزینه New SQL Database Server  را انتخاب کنید. اگر قبلا دیتابیس ساخته اید می‌توانید آن را از کنترل dropdown انتخاب کنید.
      • مقدار قسمت Region  را به همان مقداری که برای ایجاد وب سایت تان تنظیم کرده اید تغییر دهید.
      • یک Login Name  و Password  مدیر (administrator) وارد کنید. اگر گزینه  New SQL Database server را انتخاب کرده اید، چنین کاربری وجود ندارد و در واقع اطلاعات یک حساب کاربری جدید را وارد می‌کنید تا بعدا هنگام دسترسی به دیتابیس از آن استفاده کنید. اگر دیتابیس دیگری را از لیست انتخاب کرده باشید، اطلاعات یک حساب کاربری موجود از شما دریافت خواهد شد. در مثال این مقاله ما گزینه Advanced  را رها می‌کنیم. همچنین در نظر داشته باشید که برای دیتابیس‌های رایگان تنها از یک Collation می‌توانید استفاده کنید.

      دکمه تایید پایین صفحه را کلیک کنید تا مراحل تمام شود.

      تصویر زیر استفاده از یک SQL Server و حساب کاربری موجود (existing) را نشان می‌دهد.

      پرتال مدیریتی پس از اتمام مراحل، به صفحه وب سایت‌ها باز می‌گردد. ستون Status نشان می‌دهد که سایت شما در حال ساخته شدن است. پس از مدتی (معمولا کمتر از یک دقیقه) این ستون نشان می‌دهد که سایت شما با موفقیت ایجاد شده. در منوی پیمایش سمت چپ، تعداد سایت هایی که در اکانت خود دارید در کنار آیکون Web Sites نمایش داده شده است، تعداد دیتابیس‌ها نیز در کنار آیکون SQL Databases نمایش داده می‌شود.


      یک اپلیکیشن ASP.NET MVC 5 بسازید

      شما یک وب سایت Windows Azure ساختید، اما هنوز هیچ محتوایی در آن وجود ندارد. قدم بعدی ایجاد یک اپلیکیشن وب در ویژوال استودیو و انتشار آن است. ابتدا یک پروژه جدید بسازید.

      نوع پروژه را ASP.NET Web Application انتخاب کنید.

      نکته: در تصویر بالا نام پروژه "MyExample" است اما حتما نام پروژه خود را به "ContactManager" تغییر دهید. قطعه کدهایی که در ادامه مقاله خواهید دید نام پروژه را ContactManager فرض می‌کنند.

      در دیالوگ جدید ASP.NET نوع اپلیکیشن را MVC انتخاب کنید و دکمه Change Authentication را کلیک کنید.

      گزینه پیش فرض Individual User Accounts را بپذیرید. برای اطلاعات بیشتر درباره متدهای دیگر احراز هویت به این لینک مراجعه کنید. دکمه‌های OK را کلیک کنید تا تمام مراحل تمام شوند.


      تنظیم تیتر و پاورقی سایت

      • فایل Layout.cshtml_   را باز کنید. دو نمونه از متن "My ASP.NET MVC Application" را با عبارت "Contact Manager" جایگزین کنید.
      • عبارت "Application name" را هم با "CM Demo" جایگزین کنید.
      اولین Action Link را ویرایش کنید و مقدار Home را با Cm جایگزین کنید تا از CmController استفاده کند.


      اپلیکیشن را بصورت محلی اجرا کنید

      اپلیکیشن را با Ctrl + F5 اجرا کنید. صفحه اصلی باید در مرورگر پیش فرض باز شود.

      اپلیکیشن شما فعلا آماده است و می‌توانید آن را روی Windows Azure توزیع کنید. بعدا دیتابیس و دسترسی داده نیز اضافه خواهد شد.


      اپلیکیشن را روی Windows Azure منتشر کنید

      در ویژوال استودیو روی نام پروژه کلیک راست کنید و گزینه Publish را انتخاب کنید. ویزارد Publish Web باز می‌شود.
      در قسمت Profile روی Import کلیک کنید.

      حال دیالوگ Import Publish Profile نمایش داده می‌شود.

      یکی از متدهای زیر را استفاده کنید تا ویژوال استودیو بتواند به اکانت Windows Azure شما متصل شود.

      • روی Sign In کلیک کنید تا با وارد کردن اطلاعات حساب کاربری وارد Windows Azure شوید.
      این روش ساده‌تر و سریع‌تر است، اما اگر از آن استفاده کنید دیگر قادر به مشاهده Windows Azure SQL Database یا Mobile Services در پنجره Server Explorer نخواهید بود.
      • روی Manage subscriptions کلیک کنید تا یک management certificate نصب کنید، که دسترسی به حساب کاربری شما را ممکن می‌سازد.
      در دیالوگ باکس Manage Windows Azure Subscriptions به قسمت Certificates بروید. سپس Import را کلیک کنید. مراحل را دنبال کنید تا یک فایل subscription را بصورت دانلود دریافت کنید (فایل‌های publishsettings.) که اطلاعات اکانت Windows Azure شما را دارد.

      نکته امنیتی: این فایل تنظیمات را بیرون از پوشه‌های سورس کد خود دانلود کنید، مثلا پوشه Downloads. پس از اتمام عملیات Import هم این فایل را حذف کنید. کاربر مخربی که به این فایل دسترسی پیدا کند قادر خواهد بود تا سرویس‌های Windows Azure شما را کاملا کنترل کند.
      برای اطلاعات بیشتر به How to Connect to Windows Azure from Visual Studio مراجعه کنید.
      در دیالوگ باکس Import Publish Profile وب سایت خود را از لیست انتخاب کنید و OK را کلیک کنید.

      در دیالوگ باکس Publish Web روی Publish کلیک کنید.

      اپلیکیشن شما حالا در فضای ابری اجرا می‌شود. دفعه بعد که اپلیکیشن را منتشر کنید تنها فایل‌های تغییر کرده (یا جدید) آپلود خواهند شد.


      یک دیتابیس به اپلیکیشن اضافه کنید

      در مرحله بعد یک دیتابیس خواهیم ساخت تا اپلیکیشن ما بتواند اطلاعات را نمایش دهد و ویرایش کند. برای ایجاد دیتابیس و دسترسی به داده‌ها از Entity Framework استفاده خواهیم کرد.


      کلاس‌های مدل Contacts را اضافه کنید

      در پوشه Models پروژه یک کلاس جدید ایجاد کنید.

      نام کلاس را به Contact.cs تغییر دهید و دکمه Add را کلیک کنید.

      کد فایل Contact.cs را با قطعه کد زیر مطابقت دهید.

      using System.ComponentModel.DataAnnotations;
      using System.Globalization;
      namespace ContactManager.Models
      {
          public class Contact
          {
              public int ContactId { get; set; }
              public string Name { get; set; }
              public string Address { get; set; }
              public string City { get; set; }
              public string State { get; set; }
              public string Zip { get; set; }
              [DataType(DataType.EmailAddress)]
              public string Email { get; set; }
          }
      }

      این کلاس موجودیت Contact را در دیتابیس معرفی می‌کند. داده هایی که می‌خواهیم برای هر رکورد ذخیره کنیم تعریف شده اند، بعلاوه یک فیلد Primary Key که دیتابیس به آن نیاز دارد.


      یک کنترلر و نما برای داده‌ها اضافه کنید

      ابتدا پروژه را Build کنید (Ctrl + Shift+ B). این کار را باید پیش از استفاده از مکانیزم Scaffolding انجام دهید.
      یک کنترلر جدید به پوشه Controllers اضافه کنید.

      در دیالوگ باکس Add Scaffold گزینه MVC 5 Controller with views, using EF را انتخاب کنید.

      در دیالوگ Add Controller نام "CmController" را برای کنترلر وارد کنید. (تصویر زیر.)

      در لیست Model گزینه (Contact (ContactManager.Models را انتخاب کنید.

      در قسمت Data context class گزینه (ApplicationDbContext (ContactManager.Models را انتخاب کنید. این ApplicationDbContext هم برای اطلاعات سیستم عضویت و هم برای داده‌های Contacts استفاده خواهد شد.

      روی Add کلیک کنید. ویژوال استودیو بصورت خودکار با استفاده از Scaffolding متدها و View‌های لازم برای عملیات CRUD را فراهم می‌کند، که همگی از مدل Contact استفاده می‌کنند.


      فعالسازی مهاجرت ها، ایجاد دیتابیس، افزودن داده نمونه و یک راه انداز

      مرحله بعدی فعال کردن قابلیت Code First Migrations است تا دیتابیس را بر اساس الگویی که تعریف کرده اید بسازد.
      از منوی Tools گزینه Library Package Manager و سپس Package Manager Console را انتخاب کنید.

      در پنجره باز شده فرمان زیر را وارد کنید.

      enable-migrations

      فرمان enable-migrations یک پوشه با نام Migrations می سازد و فایلی با نام Configuration.cs را به آن اضافه می‌کند. با استفاده از این کلاس می‌توانید داده‌های اولیه دیتابیس را وارد کنید و مهاجرت‌ها را نیز پیکربندی کنید.

      در پنجره Package Manager Console فرمان زیر را وارد کنید.

      add-migration Initial

      فرمان add-migration initial فایلی با نام data_stamp> initial> ساخته و آن را در پوشه Migrations ذخیره می‌کند. در این مرحله دیتابیس شما ایجاد می‌شود. در این فرمان، مقدار initial اختیاری است و صرفا برای نامگذاری فایل مهاجرت استفاده شده. فایل‌های جدید را می‌توانید در Solution Explorer مشاهده کنید.

      در کلاس Initial متد Up جدول Contacts را می‌سازد. و متد Down (هنگامی که می‌خواهید به وضعیت قبلی بازگردید) آن را drop می‌کند.

      حال فایل Migrations/Configuration.cs را باز کنید. فضای نام زیر را اضافه کنید.

      using ContactManager.Models;

      حال متد Seed را با قطعه کد زیر جایگزین کنید.

      protected override void Seed(ContactManager.Models.ApplicationDbContext context)
      {
          context.Contacts.AddOrUpdate(p => p.Name,
             new Contact
             {
                 Name = "Debra Garcia",
                 Address = "1234 Main St",
                 City = "Redmond",
                 State = "WA",
                 Zip = "10999",
                 Email = "debra@example.com",
             },
              new Contact
              {
                  Name = "Thorsten Weinrich",
                  Address = "5678 1st Ave W",
                  City = "Redmond",
                  State = "WA",
                  Zip = "10999",
                  Email = "thorsten@example.com",
              },
              new Contact
              {
                  Name = "Yuhong Li",
                  Address = "9012 State st",
                  City = "Redmond",
                  State = "WA",
                  Zip = "10999",
                  Email = "yuhong@example.com",
              },
              new Contact
              {
                  Name = "Jon Orton",
                  Address = "3456 Maple St",
                  City = "Redmond",
                  State = "WA",
                  Zip = "10999",
                  Email = "jon@example.com",
              },
              new Contact
              {
                  Name = "Diliana Alexieva-Bosseva",
                  Address = "7890 2nd Ave E",
                  City = "Redmond",
                  State = "WA",
                  Zip = "10999",
                  Email = "diliana@example.com",
              }
              );
      }

      این متد دیتابیس را Seed می‌کند، یعنی داده‌های پیش فرض و اولیه دیتابیس را تعریف می‌کند. برای اطلاعات بیشتر به Seeding and Debugging Entity Framework (EF) DBs مراجعه کنید.

      در پنجره Package Manager Console فرمان زیر را وارد کنید.

      update-database

      فرمان update-database مهاجرت نخست را اجرا می‌کند، که دیتابیس را می‌سازد. بصورت پیش فرض این یک دیتابیس SQL Server Express LocalDB است.

      حال پروژه را با CTRL + F5 اجرا کنید.

      همانطور که مشاهده می‌کنید، اپلیکیشن داده‌های اولیه (Seed) را نمایش می‌دهد، و لینک هایی هم برای ویرایش، حذف و مشاهده جزئیات رکورد‌ها فراهم می‌کند. می‌توانید داده‌ها را مشاهده کنید، رکورد جدید ثبت کنید و یا داده‌های قبلی را ویرایش و حذف کنید.


      یک تامین کننده OAuth2 و OpenID اضافه کنید

      OAuth یک پروتکل باز است که امکان authorization امن توسط یک متد استاندارد را فراهم می‌کند. این پروتکل می‌تواند در اپلیکیشن‌های وب، موبایل و دسکتاپ استفاده شود. قالب پروژه ASP.NET MVC internet از OAuth و OpenID استفاده می‌کند تا فیسبوک، توییتر، گوگل و حساب‌های کاربری مایکروسافت را بعنوان تامین کنندگان خارجی تعریف کند. به سادگی می‌توانید قطعه کدی را ویرایش کنید و از تامین کننده احراز هویت مورد نظرتان استفاده کنید. مراحلی که برای اضافه کردن این تامین کنندگان باید دنبال کنید، بسیار مشابه همین مراحلی است که در این مقاله دنبال خواهید کرد. برای اطلاعات بیشتر درباره نحوه استفاده از فیسبوک بعنوان یک تامین کننده احراز هویت به Create an ASP.NET MVC 5 App with Facebook and Google OAuth2 and OpenID Sign-on مراجعه کنید.
      علاوه بر احراز هویت، اپلیکیشن ما از نقش‌ها (roles) نیز استفاده خواهد کرد تا از authorization پشتیبانی کند. تنها کاربرانی که به نقش canEdit تعلق داشته باشند قادر به ویرایش اطلاعات خواهند بود (یعنی ایجاد، ویرایش و حذف رکورد ها).
      فایل App_Start/Startup.Auth.cs را باز کنید. توضیحات متد app.UseGoogleAuthentication را حذف کنید.
      حال اپلیکیشن را اجرا کنید و روی لینک Log In کلیک کنید.
      زیر قسمت User another service to log in روی دکمه Google کلیک کنید. اطلاعات کاربری خود را وارد کنید. سپس Accept را کلیک کنید تا به اپلیکیشن خود دسترسی کافی بدهید (برای آدرس ایمیل و اطلاعات پایه).
      حال باید به صفحه ثبت نام (Register) هدایت شوید. در این مرحله می‌توانید در صورت لزوم نام کاربری خود را تغییر دهید. نهایتا روی Register کلیک کنید.


      استفاده از Membership API

      در این قسمت شما یک کاربر محلی و نقش canEdit را به دیتابیس عضویت اضافه می‌کنید. تنها کاربرانی که به این نقش تعلق دارند قادر به ویرایش داده‌ها خواهند بود. یکی از بهترین تمرین‌ها (best practice) نام گذاری نقش‌ها بر اساس عملیاتی است که می‌توانند اجرا کنند. بنابراین مثلا canEdit نسبت به نقشی با نام admin ترجیح داده می‌شود. هنگامی که اپلیکیشن شما رشد می‌کند و بزرگتر می‌شود، شما می‌توانید نقش‌های جدیدی مانند canDeleteMembers اضافه کنید، بجای آنکه از نام‌های گنگی مانند superAdmin استفاده کنید.
      فایل Migrations/Configuration.cs را باز کنید و عبارات زیر را به آن اضافه کنید.
      using Microsoft.AspNet.Identity;
      using Microsoft.AspNet.Identity.EntityFramework;
      متد AddUserAndRole را به این کلاس اضافه کنید.
      bool AddUserAndRole(ContactManager.Models.ApplicationDbContext context)
       {
          IdentityResult ir;
          var rm = new RoleManager<IdentityRole>
              (new RoleStore<IdentityRole>(context));
          ir = rm.Create(new IdentityRole("canEdit"));
          var um = new UserManager<ApplicationUser>(
              new UserStore<ApplicationUser>(context));
          var user = new ApplicationUser()
          {
             UserName = "user1",
          };
          ir = um.Create(user, "Passw0rd1");
          if (ir.Succeeded == false)
             return ir.Succeeded;
          ir = um.AddToRole(user.Id, "canEdit");
          return ir.Succeeded;
       }
      حالا از متد Seed این متد جدید را فراخوانی کنید.
      protected override void Seed(ContactManager.Models.ApplicationDbContext context)
      {
          AddUserAndRole(context);
          context.Contacts.AddOrUpdate(p => p.Name,
              // Code removed for brevity
      }
      این کدها نقش جدیدی با نام canEdit و کاربری با نام user1 می سازد. سپس این کاربر به نقش مذکور اضافه می‌شود.


      کدی موقتی برای تخصیص نقش canEdit به کاربران جدید Social Provider ها

      در این قسمت شما متد ExternalLoginConfirmation در کنترلر Account را ویرایش خواهید کرد. یا این تغییرات، کاربران جدیدی که توسط OAuth یا OpenID ثبت نام می‌کنند به نقش  canEdit اضافه می‌شوند. تا زمانی که ابزاری برای افزودن و مدیریت نقش‌ها بسازیم، از این کد موقتی استفاده خواهیم کرد. تیم مایکروسافت امیدوار است ابزاری مانند WSAT برای مدیریت کاربران و نقش‌ها در آینده عرضه کند. بعدا در این مقاله با اضافه کردن کاربران به نقش‌ها بصورت دستی از طریق Server Explorer نیز آشنا خواهید شد.
      فایل Controllers/AccountController.cs را باز کنید و متد ExternalLoginConfirmation را پیدا کنید.
      درست قبل از فراخوانی SignInAsync متد AddToRoleAsync را فراخوانی کنید.
      await UserManager.AddToRoleAsync(user.Id, "CanEdit");
      کد بالا کاربر ایجاد شده جدید را به نقش canEdit اضافه می‌کند، که به آنها دسترسی به متدهای ویرایش داده را می‌دهد. تصویری از تغییرات کد در زیر آمده است.

      در ادامه مقاله اپلیکیشن خود را روی Windows Azure منتشر خواهید کرد و با استفاده از Google و تامین کنندگان دیگر وارد سایت می‌شوید. هر فردی که به آدرس سایت شما دسترسی داشته باشد، و یک حساب کاربری Google هم در اختیار داشته باشد می‌تواند در سایت شما ثبت نام کند و سپس دیتابیس را ویرایش کند. برای جلوگیری از دسترسی دیگران، می‌توانید وب سایت خود را متوقف (stop) کنید.

      در پنجره Package Manager Console فرمان زیر را وارد کنید.

      Update-Database

      فرمان را اجرا کنید تا متد Seed را فراخوانی کند. حال AddUserAndRole شما نیز اجرا می‌شود. تا این مرحله نقش canEdit ساخته شده و کاربر جدیدی با نام user1 ایجاد و به آن افزوده شده است.


      محافظت از اپلیکیشن توسط SSL و خاصیت Authorize

      در این قسمت شما با استفاده از خاصیت Authorize دسترسی به اکشن متدها را محدود می‌کنید. کاربران ناشناس (Anonymous) تنها قادر به مشاهده متد Index در کنترلر home خواهند بود. کاربرانی که ثبت نام کرده اند به متدهای Index و Details در کنترلر Cm و صفحات About و Contact نیز دسترسی خواهند داشت. همچنین دسترسی به متدهایی که داده‌ها را تغییر می‌دهند تنها برای کاربرانی وجود دارد که در نقش canEdit هستند.

      خاصیت Authorize و RequireHttps را به اپلیکیشن اضافه کنید. یک راه دیگر افزودن این خاصیت‌ها به تمام کنترلر‌ها است، اما تجارب امنیتی توصیه می‌کند که این خاصیت‌ها روی کل اپلیکیشن اعمال شوند. با افزودن این خاصیت‌ها بصورت global تمام کنترلر‌ها و اکشن متدهایی که می‌سازید بصورت خودکار محافظت خواهند شد، و دیگر لازم نیست بیاد داشته باشید کدام کنترلر‌ها و متدها را باید ایمن کنید.

      برای اطلاعات بیشتر به Securing your ASP.NET MVC App and the new AllowAnonymous Attribute مراجعه کنید.

      فایل App_Start/FilterConfig.cs را باز کنید و متد RegisterGlobalFilters را با کد زیر مطابقت دهید.

      public static void
      RegisterGlobalFilters(GlobalFilterCollection filters)
      {
          filters.Add(new HandleErrorAttribute());
          filters.Add(new System.Web.Mvc.AuthorizeAttribute());
          filters.Add(new RequireHttpsAttribute());
      }

      خاصیت Authorize در کد بالا از دسترسی کاربران ناشناس به تمام متدهای اپلیکیشن جلوگیری می‌کند. شما برای اعطای دسترسی به متدهایی خاص از خاصیت AllowAnonymous استفاده خواهید کرد. در آخر خاصیت RequireHTTPS باعث می‌شود تا تمام دسترسی‌ها به اپلیکیشن وب شما از طریق HTTPS صورت گیرد.

      حالا خاصیت AllowAnonymous را به متد Index  در کنترلر Home اضافه کنید. از این خاصیت برای اعطای دسترسی به تمامی کاربران سایت استفاده کنید. قسمتی از کد کنترلر Home را در زیر می‌بینید.

      namespace ContactManager.Controllers
       {
          public class HomeController : Controller
          {
             [AllowAnonymous]
             public ActionResult Index()
             {
                return View();
             }

      یک جستجوی عمومی برای عبارت AllowAnonymous انجام دهید. همانطور که مشاهده می‌کنید این خاصیت توسط متدهای ورود و ثبت نام در کنترلر Account نیز استفاده شده است.

      در کنترلر CmController خاصیت [("Authorize(Roles="canEdit] را به تمام متدهایی که با داده سر و کار دارند اضافه کنید، به غیر از متدهای Index و Details. قسمتی از کد کامل شده در زیر آمده است.


      فعال سازی SSL برای پروژه

      در Solution Explorer پروژه خود را انتخاب کنید. سپس کلید F4 را فشار دهید تا دیالوگ خواص (Properties) باز شود. حال مقدار خاصیت SSL Enabled را به true تنظیم کنید. آدرس SSL URL را کپی کنید. این آدرس چیزی شبیه به /https://localhost:44300 خواهد بود.

      روی نام پروژه کلیک راست کنید و Properties را انتخاب کنید. در قسمت چپ گزینه Web را انتخاب کنید. حالا مقدار Project Url را به آدرسی که کپی کرده اید تغییر دهید. نهایتا تغییرات را ذخیره کنید و پنجره را ببندید.

      حال پروژه را اجرا کنید. مرورگر شما باید یک پیام خطای اعتبارسنجی به شما بدهد. دلیلش این است که اپلیکیشن شما از یک Valid Certificate استفاده نمی‌کند. هنگامی که پروژه را روی Windows Azure منتشر کنید دیگر این پیغام را نخواهید دید. چرا که سرور‌های مایکروسافت همگی لایسنس‌های معتبری دارند. برای اپلیکیشن ما می‌توانید روی Continue to this website را انتخاب کنید.

      حال مرورگر پیش فرض شما باید صفحه Index از کنترلر home را به شما نمایش دهد.

      اگر از یک نشست قبلی هنوز در سایت هستید (logged-in) روی لینک Log out کلیک کنید و از سایت خارج شوید.

      روی لینک‌های About و Contact کلیک کنید. باید به صفحه ورود به سایت هدایت شوید چرا که کاربران ناشناس اجازه دسترسی به این صفحات را ندارند.

      روی لینک Register کلیک کنید و یک کاربر محلی با نام Joe بسازید. حال مطمئن شوید که این کاربر به صفحات Home, About و Contact دسترسی دارد.

      روی لینک CM Demo کلیک کنید و مطمئن شوید که داده‌ها را مشاهده می‌کنید.

      حال روی یکی از لینک‌های ویرایش (Edit) کلیک کنید. این درخواست باید شما را به صفحه ورود به سایت هدایت کند، چرا که کاربران محلی جدید به نقش canEdit تعلق ندارند.

      با کاربر user1 که قبلا ساختید وارد سایت شوید. حال به صفحه ویرایشی که قبلا درخواست کرده بودید هدایت می‌شوید.

      اگر نتوانستید با این کاربر به سایت وارد شوید، کلمه عبور را از سورس کد کپی کنید و مجددا امتحان کنید. اگر همچنان نتوانستید به سایت وارد شوید، جدول AspNetUsers را بررسی کنید تا مطمئن شوید کاربر user1 ساخته شده است. این مراحل را در ادامه مقاله خواهید دید.

      در آخر اطمینان حاصل کنید که می‌توانید داده‌ها را تغییر دهید.


      اپلیکیشن را روی Windows Azure منتشر کنید

      ابتدا پروژه را Build کنید. سپس روی نام پروژه کلیک راست کرده و گزینه Publish را انتخاب کنید.

      در دیالوگ باز شده روی قسمت Settings کلیک کنید. روی File Publish Options کلیک کنید تا بتوانید Remote connection string را برای ApplicationDbContext و دیتابیس ContactDB انتخاب کنید.

      اگر ویژوال استودیو را پس از ساخت Publish profile بسته و دوباره باز کرده اید، ممکن است رشته اتصال را در لیست موجود نبینید. در چنین صورتی، بجای ویرایش پروفایل انتشار، یک پروفایل جدید بسازید. درست مانند مراحلی که پیشتر دنبال کردید.

      زیر قسمت ContactManagerContext گزینه Execute Code First Migrations را انتخاب کنید.

      حال Publish را کلیک کنید تا اپلیکیشن شما منتشر شود. با کاربر user1 وارد سایت شوید و بررسی کنید که می‌توانید داده‌ها را ویرایش کنید یا خیر.

      حال از سایت خارج شوید و توسط یک اکانت Google یا Facebook وارد سایت شوید، که در این صورت نقش canEdit نیز به شما تعلق می‌گیرد.


      برای جلوگیری از دسترسی دیگران، وب سایت را متوقف کنید

      در Server Explorer به قسمت Web Sites بروید. حال روی هر نمونه از وب سایت‌ها کلیک راست کنید و گزینه Stop Web Site را انتخاب کنید.

      یک راه دیگر متوقف کردن وب سایت از طریق پرتال مدیریت Windows Azure است.


      فراخوانی AddToRoleAsync را حذف و اپلیکیشن را منتشر و تست کنید

      کنترلر Account را باز کنید و کد زیر را از متد ExternalLoginConfirmation حذف کنید.
      await UserManager.AddToRoleAsync(user.Id, "CanEdit");
      پروژه را ذخیره و Build کنید. حال روی نام پروژه کلیک راست کرده و Publish را انتخاب کنید.

      دکمه Start Preview را فشار دهید. در این مرحله تنها فایل هایی که نیاز به بروز رسانی دارند آپلود خواهند شد.

      وب سایت را راه اندازی کنید. ساده‌ترین راه از طریق پرتال مدیریت Windows Azure است. توجه داشته باشید که تا هنگامی که وب سایت شما متوقف شده، نمی‌توانید اپلیکیشن خود را منتشر کنید.

      حال به ویژوال استودیو بازگردید و اپلیکیشن را منتشر کنید. اپلیکیشن Windows Azure شما باید در مرورگر پیش فرض تان باز شود. حال شما در حال مشاهده صفحه اصلی سایت بعنوان یک کاربر ناشناس هستید.

      روی لینک About کلیک کنید، که شما را به صفحه ورود هدایت می‌کند.

      روی لینک Register در صفحه ورود کلیک کنید و یک حساب کاربری محلی بسازید. از این حساب کاربری برای این استفاده می‌کنیم که ببینیم شما به صفحات فقط خواندنی (read-only) و نه صفحاتی که داده‌ها را تغییر می‌دهند دسترسی دارید یا خیر. بعدا در ادامه مقاله، دسترسی حساب‌های کاربری محلی (local) را حذف می‌کنیم.

      مطمئن شوید که به صفحات About و Contact دسترسی دارید.

      لینک CM Demo را کلیک کنید تا به کنترلر CmController هدایت شوید. 

      روی یکی از لینک‌های Edit کلیک کنید. این کار شما را به صفحه ورود به سایت هدایت می‌کند. در زیر قسمت User another service to log in یکی از گزینه‌های Google یا Facebook را انتخاب کنید و توسط حساب کاربری ای که قبلا ساختید وارد شوید.

      حال بررسی کنید که امکان ویرایش اطلاعات را دارید یا خیر.

      نکته: شما نمی‌توانید در این اپلیکیشن از اکانت گوگل خود خارج شده، و با همان مرورگر با اکانت گوگل دیگری وارد اپلیکیشن شوید. اگر دارید از یک مرورگر استفاده می‌کنید، باید به سایت گوگل رفته و از آنجا خارج شوید. برای وارد شدن به اپلیکیشن توسط یک اکانت دیگر می‌توانید از یک مرورگر دیگر استفاده کنید.

      دیتابیس SQL Azure را بررسی کنید

      در Server Explorer دیتابیس ContactDB را پیدا کنید. روی آن کلیک راست کرده و Open in SQL Server Object Explorer را انتخاب کنید.

      توجه: اگر نمی‌توانید گره SQL Databases را باز کنید و یا ContactDB را در ویژوال استودیو نمی‌بینید، باید مراحلی را طی کنید تا یک پورت یا یکسری پورت را به فایروال خود اضافه کنید. دقت داشته باشید که در صورت اضافه کردن Port Range‌ها ممکن است چند دقیقه زمان نیاز باشد تا بتوانید به دیتابیس دسترسی پیدا کنید.

      روی جدول AspNetUsers کلیک راست کرده و View Data را انتخاب کنید.

      حالا روی AspNetUserRoles کلیک راست کنید و View Data را انتخاب کنید.

      اگر شناسه کاربران (User ID) را بررسی کنید، مشاهده می‌کنید که تنها دو کاربر user1 و اکانت گوگل شما به نقش canEdit تعلق دارند.

      Cannot open server login error

      اگر خطایی مبنی بر "Cannot open server" دریافت می‌کنید، مراحل زیر را دنبال کنید.

      شما باید آدرس IP خود را به لیست آدرس‌های مجاز (Allowed IPs) اضافه کنید. در پرتال مدیریتی Windows Azure در قسمت چپ صفحه، گزینه SQL Databases را انتخاب کنید.

      دیتابیس مورد نظر را انتخاب کنید. حالا روی لینک Set up Windows Azure firewall rules for this IP address کلیک کنید.

      هنگامی که با پیغام "?The current IP address xxx.xxx.xxx.xxx is not included in existing firewall rules. Do you want to update the firewall rules" مواجه شدید Yes را کلیک کنید. افزودن یک آدرس IP بدین روش معمولا کافی نیست و در فایروال‌های سازمانی و بزرگ باید Range بیشتری را تعریف کنید.

      مرحله بعد اضافه کردن محدوده آدرس‌های مجاز است.

      مجددا در پرتال مدیریتی Windows Azure روی SQL Databases کلیک کنید. سروری که دیتابیس شما را میزبانی می‌کند انتخاب کنید.

      در بالای صفحه لینک Configure را کلیک کنید. حالا نام rule جدید، آدرس شروع و پایان را وارد کنید.

      در پایین صفحه Save را کلیک کنید.

      در آخر می‌توانید توسط SSOX به دیتابیس خود متصل شوید. از منوی View گزینه SQL Server Object Explorer را انتخاب کنید. روی SQL Server کلیک راست کرده و Add SQL Server را انتخاب کنید.

      در دیالوگ Connect to Server متد احراز هویت را به SQL Server Authentication تغییر دهید. این کار نام سرور و اطلاعات ورود پرتال Windows Azure را به شما می‌دهد.

      در مرورگر خود به پرتال مدیریتی بروید و SQL Databases را انتخاب کنید. دیتابیس ContactDB را انتخاب کرده و روی View SQL Database connection strings کلیک کنید. در صفحه Connection Strings مقادیر Server و User ID را کپی کنید. حالا مقادیر را در دیالوگ مذکور در ویژوال استودیو بچسبانید. مقدار فیلد User ID در قسمت Login وارد می‌شود. در آخر هم کلمه عبوری که هنگام ساختن دیتابیس تنظیم کردید را وارد کنید.

      حالا می‌توانید با مراحلی که پیشتر توضیح داده شد به دیتابیس Contact DB مراجعه کنید.

      افزودن کاربران به نقش canEdit با ویرایش جداول دیتابیس

      پیشتر در این مقاله، برای اضافه کردن کاربران به نقش canEdit از یک قطعه کد استفاده کردیم. یک راه دیگر تغییر جداول دیتابیس بصورت مستقیم است. مراحلی که در زیر آمده اند اضافه کردن کاربران به یک نقش را نشان می‌دهند.
      در SQL Server Object Explorer روی جدول AspNetUserRoles کلیک راست کنید و View Data را انتخاب کنید.

      حالا  RoleId را کپی کنید و در ردیف جدید بچسبانید.

      شناسه کاربر مورد نظر را از جدول AspNetUsers پیدا کنید و مقدار آن را در ردیف جدید کپی کنید. همین! کاربر جدید شما به نقش canEdit اضافه شد.

      نکاتی درباره ثبت نام محلی (Local Registration)

      ثبت نام فعلی ما از بازنشانی کلمه‌های عبور (password reset) پشتیبانی نمی‌کند. همچنین اطمینان حاصل نمی‌شود که کاربران سایت انسان هستند (مثلا با استفاده از یک CAPTCHA). پس از آنکه کاربران توسط تامین کنندگان خارجی (مانند گوگل) احراز هویت شدند، می‌توانند در سایت ثبت نام کنند. اگر می‌خواهید ثبت نام محلی را برای اپلیکیشن خود غیرفعال کنید این مراحل را دنبال کنید:
      • در کنترلر Account متدهای Register را ویرایش کنید و خاصیت AllowAnonymous را از آنها حذف کنید (هر دو متد GET و POST). این کار ثبت نام کاربران ناشناس و بدافزارها (bots) را غیر ممکن می‌کند.
      • در پوشه Views/Shared فایل LoginPartial.cshtml_ را باز کنید و لینک Register را از آن حذف کنید.
      • در فایل  Views/Account/Login.cshtml نیز لینک Register را حذف کنید.
      • اپلیکیشن را دوباره منتشر کنید.


      قدم‌های بعدی

      برای اطلاعات بیشتر درباره نحوه استفاده از Facebook بعنوان یک تامین کننده احراز هویت، و اضافه کردن اطلاعات پروفایل به قسمت ثبت نام کاربران به لینک زیر مراجعه کنید.
      برای یادگیری بیشتر درباره ASP.NET MVC 5 هم به سری مقالات Getting Started with ASP.NET MVC 5 می توانید مراجعه کنید. همچنین سری مقالات Getting Started with EF and MVC  مطالب خوبی درباره مفاهیم پیشرفته EF ارائه می‌کند.
      مطالب
      ارتباط بین کامپوننت‌ها در Vue.js - قسمت اول ارتباط بین Parent و Child

      برنامه‌های Vue.jsای از چندین کامپوننت برای بخش بندی هر قسمت تشکیل میشوند و این بخش بندی برای مدیریت بهتر تغییرات، خطایابی، نگهداری و استفاده مجدد (reusable) می‌باشد. فرض کنید تعدادی کامپوننت در برنامه داریم و اطلاعات این کامپوننت‌ها بهم وابسته می‌باشند؛ بطور مثال یک کامپوننت انتخاب دسته بندی را داریم و به محض تغییر این مقدار، میخواهیم لیستی از محصولات پیشنهادی یا پرفروشِ آن دسته بندی، در کامپوننت پایین صفحه نمایش داده شود و یا خرید یک محصول را در نظر بگیرید که بلافاصله محتوای نمایش سبد خرید، بروزرسانی شود. در این مقاله ارتباط از نوع Parent و Child بین کامپوننت‌ها بررسی میشود.

       نکته: برای ارسال اطلاعات از کامپوننتِ Parent به Child، از  Props استفاده میشود و برای ارتباط از Child به Parent، از emit$ استفاده میشود.


      یک برنامه Vue.js با نام vue-communication-part-1 ایجاد نمایید. سپس دو کامپوننت را با نام‌های Parent و Child، در پوشه components ایجاد کنید:



      در کامپوننت Parent، یک تابع با نام increase وجود دارد که مقدار متغیر parentCounter را افزایش میدهد. چون قصد داریم مقدار متغیر parentCounter در کامپوننت Child نیز بروزرسانی شود، آن را به کامپوننت Child پاس میدهیم:

      <Child :childCounter="parentCounter"/>

      محتوای کامپوننت Parent:

      <template>
        <div>
          <div>
            <h2>Parent Component</h2>
            <!-- را نمایش میدهید parentCounter مقدار -->
            <h1>{{ parentCounter }}</h1>
            <button @click="increase">Increase Parent</button>
          </div>
          <div>
            <!-- پاس میدهید Child در کامپوننت childCounter را به پراپرتی parentCounter مقدار -->
            <!--از طریق  decreaseParent سبب اتصال و فراخوانی تابع  @callDecreaseParent به  decreaseParent با انتساب -->
            <!-- میشود Child  در کامپوننت  callDecreaseMethodInParent تابع   -->
            <Child :childCounter="parentCounter" @callDecreaseParent="decreaseParent"/>
          </div>
        </div>
      </template>
      
      <script>
      //برای استفاده در کامپوننت جاری Child ایمپورت کردن کامپوننت
      import Child from "./Child.vue";
      
      export default {
        // در این بخش متغیرهای مورد نیاز کامپوننت را تعریف میکنیم
        data() {
          return {
            parentCounter: 0
          };
        },
        components: {
          // میتوان آرایه ای از کامپوننت‌ها را در یک کامپوننت استفاده نمود
          // در این مثال فقط از یک کامپوننت استفاده شده
          Child
        },
        methods: {
          //را یک واحد افزایش میدهد parentCounter این متد مقدار
          increase() {
            this.parentCounter++;
          },
          decreaseParent() {
            this.parentCounter--;
          }
        }
      };
      </script>
      
      <style>
      .parent-block,
      .child {
        text-align: center;
        margin: 20px;
        padding: 20px;
        border: 2px gray solid;
      }
      </style>


      در کامپوننت Child  قصد دریافت مقدار پراپرتیِ childCounter را داریم که از طریق کامپوننت Parent، مقدارش تنظیم و بروزرسانی میشود. به این منظور در قسمت props  یک متغیر بنام childCounter را ایجاد میکنیم. 

      Data is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component

      محتوای کامپوننت Child

      <template>
        <div>
          <h3>Child Component</h3>
          <!-- را نمایش میدهید childCounter مقدار -->
          <h3>{{ childCounter }}</h3>
          <button @click="increase">Increase Me</button>
          <button @click="callDecreaseMethodInParent">Call Decrease Method In Parent</button>
        </div>
      </template>
      
      <script>
      export default {
        // استفاده میشود Child به  Parent برای ارتباط بین کامپوننت  props از
        props: {
          childCounter: Number
        },
        data() {
          return {};
        },
        methods: {
          //را یک واحد افزایش میدهد childCounter این متد مقدار
          increase() {
            this.childCounter++;
          },
          // فراخوانی میکند Parent را در کامپوننت decreaseParent تابع
          callDecreaseMethodInParent() {
            this.$emit("callDecreaseParent");
          }
        }
      };
      </script>


      محتوای کامپوننت اصلی برنامه  App.vue:

      <template>
        <div id="app">
          <img alt="Vue logo" src="./assets/logo.png">
          <parent></parent>
        </div>
      </template>
      
      <script>
      import Parent from "./components/Parent.vue";
      
      export default {
        name: "app",
        components: {
          parent: Parent
        }
      };
      </script>
      <style>
      #app {
        width: 50%;
        margin: 0 auto;
        text-align: center;
      }
      </style>

      اکنون برنامه را با دستور زیر اجرا کنید:

      npm run serve

      بعد از اجرای دستور فوق، روی گزینه زیر ctrl+click میکنیم تا نتیجه کار در مرورگر قابل رویت باشد: 

      نمایش صفحه زیر نشان دهنده‌ی درستی انجام کار تا اینجا است:

      اکنون روی دکمه‌ی Increase Parent کلیک میکنیم. همزمان مقدار شمارشگر، در هر دو کامپوننت Parent و Child افزایش می‌یابد و این بدین معناست که با استفاده از Props میتوانیم داده‌های دلخواهی را در کامپوننت Child بروز رسانی کنیم. هر زمانی روی دکمه‌ی Increase Me در کامپوننت Child کلیک کنیم، فقط به مقدار شمارشگر درون خودش اضافه میشود و تاثیری را بر شمارشگر Parent ندارد. در واقع یک کپی از مقدار شمارشگر Parent را درون خود دارد.

      در ادامه قصد داریم بروزرسانی داده را از Child به Parent انجام دهیم. برای انجام اینکار از emit$ استفاده میکنیم. در دیکشنری Cambridge Dictionary معنی emit به ارسال یک سیگنال ترجمه شده‌است. در واقع بااستفاده از emit میتوانیم یک تابع را در کامپوننت Parent فراخوانی کنیم و در آن تابع، کد دلخواهی را برای دستکاری داده‌ها مینویسیم.

      در تابع callDecreaseMethodInParent در کامپوننت Child، کد زیر را قرار میدهیم:

       this.$emit("callDecreaseParent");

      هر زمان‌که این تابع اجرا شود، یک سیگنال از طریق کد زیر برای کامپوننت Parent ارسال میشود:

            <Child  @callDecreaseParent="decreaseParent"/>

      در کد فوق مشخص شده که با ارسال سیگنال callDecreaseParent، تابع decreaseParent در کامپوننت Parent فراخوانی شود.


      کد کامل مثال بالا 

      نکته:  برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید: 

      npm install



      چند نکته

      this.$emit 
      //dispatches an event to its parent component

      کد فوق سبب اجرای یک تابع در کامپوننتِ Parent خودش میشود.

      this.$parent
      // gives you a reference to the parent component

      ارجاعی به کامپوننت Parent خودش را فراهم میکند:

      this.$root
      // gives you a reference to the root component

      زمانیکه چندین کامپوننت تو در تو را داریم یا به اصطلاح  nested component، سبب ارجاعی به بالاترین کامپوننت Parent میگردد.

      this.$parent.$emit
      // will make the parent dispatch the event to its parent

      سبب اجرای تابعِ Parent کامپوننتِ Parent جاری میشود. به بیان ساده اگر این کد در کامپوننت فرزند فراخوانی شود، سبب اجرای تابعی در کامپوننت پدربزرگِ خود میشود.

      this.$root.$emit
      // will make the root dispatch the event to itself

      سبب اجرای تابعی در کامپوننت root میشود (بالاترین کامپوننتِ پدرِ کامپوننت جاری).


      تابع emit$ دارای آگومان‌های دیگری برای پاس دادن اطلاعات از کامپوننت Child به Parent می‌باشد؛ مثل زمانیکه قصد دارید اطلاعاتی در مورد محصول خریداری شده را به سبد خرید پاس دهید. در مثال دیگری که در ادامه قرار میگیرد نحوه کارکرد ارتباط کامپوننت Parent و Child را در یک برنامه بهتر تجربه میکنیم.

      پیاده سازی یک سبد خرید ساده با روش مقاله‌ی جاری 

      نکته:  برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:  

      npm install

      همچنین نیاز هست تا پکیچ node-sass را با دستور زیر برای این مثال نصب کنید.

      npm install node-sass

      مطالب
      خلاصه‌ی سرفصل‌های مورد نیاز جهت ارتقاء به ASP.NET Core 3.0
      در طی چند ماه گذشته، ریز نکاتی که برای ارتقاء به ASP.NET Core 3.0 مورد نیاز هستند، در ذیل مطالب مرتبط با هر کدام، جهت برقراری ارتباط منطقی و امکان مشاهده‌ی روند تغییرات هرکدام، به صورت مجزا و در طی نظراتی تکمیلی، به آن مطالب اضافه شده‌اند. در ادامه برای داشتن یک دید کلی و سهولت دسترسی به آن‌ها، لیست این موارد را نیز مشاهده می‌کنید:

      پیشنیاز‌های کار با ASP.NET Core 3.0


      خلاصه شدن ساختار فایل‌های csproj


      ارائه‌ی یک Generic Host در نگارش سوم


      تغییرات مسیریابی با معرفی endpoint routing
      بالا رفتن کارآیی پردازش JSON


      نکته‌ی مهمی در مورد توزیع برنامه‌های وب در IIS


      تغییرات SignalR


      تغییرات امنیتی نگارش سوم


      تغییرات تنظیمات تعدادی از میان‌افزارها


      تغییر مهم ابزارهای مرتبط با EF Core 3.0
      مطالب
      تنظیمات CORS در ASP.NET Core
      برنامه‌های امروزی، ممکن است به چندین Web API مستقل، تبدیل شده و سپس برنامه‌هایی (Front-ends) جدای از آن‌ها برای کار با آن‌ها ایجاد شوند. بنابراین این وظیفه‌ی برنامه‌‌های Web API است که مطمئن شوند کلاینت‌ها قادر به تعامل با آن‌ها هستند. CORS استانداردی است که یک چنین امکانی را مهیا می‌کند.



      CORS چیست؟

      CORS و یا cross origin resource sharing، یک مکانیزم امنیتی است که در تمام مرورگرهای جدید جهت جلوگیری از ارسال اطلاعات یک وب سایت، به وب سایتی دیگر، درنظر گرفته شده‌است. درخواست دسترسی به یک منبع (Resource) مانند تصویر، داده و غیره، خارج از سرآغاز آن، یک درخواست cross-origin نامیده می‌شود. برای مدیریت یک چنین درخواست‌هایی، استانداردی به نام CORS طراحی شده‌است. می‌توان به آن مانند نگهبانی یک ساختمان نگاه کرد که تا مجوز خاصی به آن‌ها ارائه نشود، امکان دسترسی به منابع ساختمان را صادر نخواهند کرد.


      Origin چیست؟

      سرآغاز یک درخواست از سه قسمت تشکیل می‌شود:
      - Protocol/Scheme مانند HTTP/HTTPS
      - Host مانند نام دومین
      - شماره پورت مانند 443 برای پروتکل HTTPS  یا پورت 80 برای HTTP که عموما هر دو مورد به علت پیش‌فرض بودن، ذکر نمی‌شوند

      بنابراین URLای مانند https://www.dntips.ir یک Origin را مشخص می‌کند. در اینجا به تمام منابعی که از این سرآغاز شروع می‌شوند و سه قسمت یاد شده‌ی آن‌ها یکی است، same-origin گفته می‌شود.
      در این حالت اگر منابعی به URLهایی مانند https://www.dntips.ir (پروتکل متفاوت) و یا https://github.com (با host متفاوت) اشاره کنند، به آن‌ها Different-Origin گفته خواهد شد.


      سیاست امنیتی Same-Origin چیست؟

      سیاست امنیتی Same-Origin که به صورت توکار در تمام مرورگرهای امروزی تعبیه شده‌است، مانع تعامل سرآغازهایی متفاوت، جهت جلوگیری از حملات امنیتی مانند Cross-Site Request Forgery یا CSRF می‌شود. این سیاست امنیتی بسیار محدود کننده‌است و برای مثال مانع این می‌شود که بتوان توسط کدهای JavaScript ای، درخواستی را به سرآغاز دیگری ارسال کرد؛ حتی اگر بدانیم درخواست رسیده از منبعی مورد اطمینان صادر شده‌است. برای مثال اگر سایت جاری یک درخواست Ajax ای را به https://anotherwebsite.com/api/users ارسال کند، چون قسمت host مربوط به origin آن‌ها یکی نیست، این عملیات توسط مرورگر غیرمجاز شمرده شده و مسدود می‌شود.


      چگونه می‌توان از تنظیمات CORS، برای رفع محدودیت‌های سیاست‌های دسترسی Same-Origin استفاده کرد؟

      استاندارد CORS تعدادی header ویژه را جهت تبادل اطلاعات بین سرور و مرورگر مشخص کرده‌است تا توسط آن‌ها بتوان منابع را بین سرآغازهای متفاوتی به اشتراک گذاشت. در این حالت ابتدا کلاینت درخواستی را به سمت سرور ارسال می‌کند. سپس سرور پاسخی را به همراه هدرهای ویژه‌ای که مشخص می‌کنند به چه منابعی و چگونه می‌توان دسترسی یافت، به سمت کلاینت ارسال خواهد کرد. اکثر این هدرها با Access-Control-Allow شروع می‌شوند:
      • Access-Control-Allow-Origin
      در آن لیست سرآغازهایی را که سرور مایل است منابع خود را با آن‌ها به اشتراک بگذارد، مشخص می‌شوند. در حالت توسعه‌ی برنامه می‌توان از مقدار * نیز برای آن استفاده کرد تا هر سرآغازی بتواند به منابع سرور دسترسی پیدا کند. اما از استفاده‌ی این مقدار سراسری و کلی، در حالت انتشار برنامه خودداری کنید.
      • Access-Control-Allow-Headers
      • Access-Control-Allow-Methods
      • Access-Control-Allow-Credentials


      درخواست‌های ویژه‌ی Pre-Flight

      در بسیاری از موارد، مرورگر زمانیکه تشخیص می‌دهد درخواست صادر شده‌ی از طرف برنامه، قرار است به یک Origin دیگر ارسال شود، خودش یک درخواست ویژه را به نام Pre-Flight و از نوع OPTIONS به سمت سرور ارسال می‌کند. علت آن این است که سرورهای قدیمی، مفهوم CORS را درک نمی‌کنند و در برابر درخواست‌های ویژه‌ای مانند Delete که از سرور جاری صادر نشده باشند، مقاومت می‌کنند (صرفا درخواست‌های Same-Origin را پردازش می‌کنند). به همین جهت است که اگر به برگه‌ی network ابزارهای توسعه دهندگان مرورگر خود دقت کنید، درخواست‌های cross-origin به نظر دوبار ارسال شده‌اند. بار اول درخواستی که method آن، options است و در خواست دوم که درخواست اصلی است و برای مثال method آن put است. این درخواست اول، Pre-Flight Request نام دارد. هدف آن این است که بررسی کند آیا سرور مقصد، استاندارد CORS را متوجه می‌شود یا خیر و آیا اینقدر قدیمی است که صرفا درخواست‌های Same-Origin را پردازش می‌کند و مابقی را مسدود خواهد کرد. اگر سرور درخواست Pre-Flight را درک نکند، مرورگر درخواست اصلی را صادر نخواهد کرد.



      البته درخواست‌های pre-flight بیشتر در حالت‌های زیر توسط مرورگر صادر می‌شوند:
      - اگر متد اجرایی مدنظر، متدی بجز GET/POST/HEAD باشد.
      - اگر content type درخواست‌های از نوع POST، چیزی بجز application/x-www-form-urlencoded, multipart/form-data و یا text/plain باشند.
      - اگر درخواست، به همراه یک هدر سفارشی باشد نیز سبب صدور یک pre-flight request خواهد شد.

      بنابراین در برنامه‌های SPA خود که اطلاعات را با فرمت JSON به سمت یک Web API ارسال می‌کنند (و Origin آن‌ها یکی نیست)، حتما شاهد درخواست‌های Pre-Flight نیز خواهید بود.


      تنظیمات CORS در ASP.NET Core

      اکنون که با مفهوم CORS آشنا شدیم، در ادامه به نحوه‌ی انجام تنظیمات آن در برنامه‌های ASP.NET Core خواهیم پرداخت.
      تنظیمات ابتدایی CORS در فایل Startup.cs و متد ConfigureServices آن انجام می‌شوند:
      public void ConfigureServices(IServiceCollection services) 
      { 
          // Add service and create Policy with options 
          services.AddCors(options => 
          { 
              options.AddPolicy("CorsPolicy", 
                  builder => builder.AllowAnyOrigin() 
                  .AllowAnyMethod() 
                  .AllowAnyHeader() 
                  .AllowCredentials() ); 
          }); 
           
          // Make sure MVC is added AFTER CORS 
          services.AddMvc(); 
      }
      ابتدا توسط متد AddCors، سرویس‌های مرتبط، به سیستم تزریق وابستگی‌های ASP.NET Core اضافه خواهند شد و سپس در قسمت تنظیمات آن می‌توان همان هدرهای Access-Control-Allow را که پیشتر در مورد آن‌ها بحث کردیم، تعریف و مقدار دهی کرد. برای مثال تنظیم AllowAnyOrigin، همان استفاده‌ی از مقدار * در هدر Access-Control-Allow-Origin تولیدی است. باید دقت داشت که تنظیمات این سرویس‌ها باید پیش از افزودن سرویس‌های MVC انجام شوند.
      در اینجا CorsPolicy که به عنوان پارامتر مشخص شده‌است، نام این سیاست دسترسی سفارشی است و در قسمت‌های مختلف برنامه می‌توان ارجاعاتی را به این نام تعریف کرد.

      و برای تعریف سرآغازی خاص و یا متدی مشخص، می‌توان به صورت زیر عمل کرد (ذکر صریح WithOrigins برای حالت توزیع برنامه مناسب است و از دیدگاه امنیتی، استفاده‌ی از AllowAnyOrigin کار صحیحی نیست ):
      services.AddCors(options =>
      {
          options.AddPolicy("AllowOrigin",
                  builder => builder.WithOrigins("http://localhost:55294")
                                    .WithMethods("GET", "POST", "HEAD"));
      });

      پس از تنظیم سیاست دسترسی مدنظر، اکنون نوبت به اعمال آن است. اینکار در متد Configure فایل Startup.cs انجام می‌شود:
      public void Configure(IApplicationBuilder app) 
      { 
          // ... 
       
          app.UseCors("CorsPolicy"); 
           
          // ... 
           
          app.UseMvc(routes => 
          { 
              routes.MapRoute( 
                  name: "default", 
                  template: "{controller=Home}/{action=Index}/{id?}"); 
          }); 
      }
      در اینجا متد UseCors که میان‌افزار CORS را فعال می‌کند، باید پیش‌از میان‌افزار Mvc تعریف شود تا بتواند هدرها را اعمال کند. همچنین نامی که در اینجا به عنوان پارامتر آن استفاده شده، دقیقا به همان نامی که برای تنظیمات سیاست دسترسی درنظر گرفته شد، اشاره می‌کند.
      متد app.UseCors، یک متد سراسری است و کل سیستم را داخل این سیاست دسترسی CORS قرار می‌دهد. اگر می‌خواهید صرفا به کنترلر خاصی این تنظیمات اعمال شوند، می‌توان از فیلتر EnableCors با ذکر نام سیاست دسترسی تعریف شده، استفاده کرد (در این حالت ذکر services.AddCors ضروری است و از ذکر app.UseCors صرفنظر می‌شود):
      [EnableCors("CorsPolicy")]
      public class MyApiController : Controller

      و یا اگر می‌خواهید از app.UseCors سراسری استفاده کنید، اما آن‌را برای کنترلر و یا حتی اکشن متد خاصی غیرفعال نمائید، می‌توان از فیلتر [DisableCors] استفاده کرد.

      چند نکته:
      - به نام رشته‌ای سیاست دسترسی تعریف شده، دقت داشته باشید. اگر این نام را درست ذکر نکنید، هدری تولید نخواهد شد.
      - میان‌افزار CORS، برای درخواست‌های same-origin نیز هدری را تولید نمی‌کند.


      امکان تعریف سیاست‌های دسترسی بدون نام نیز وجود دارد

      در هر دو روش فوق که یکی بر اساس app.UseCors سراسری و دیگری بر اساس فیلتر EnableCors اختصاصی کار می‌کنند، ذکر نام سیاست دسترسی options.AddPolicy ضروری است. اگر علاقه‌ای به ذکر این نام ندارید، می‌توان به طور کامل از تنظیم services.AddCors صرفنظر کرد (قسمت پارامتر و تنظیمات آن‌را ذکر نکرد) و متد app.UseCors را به صورت زیر تنظیم نمود که قابلیت داشتن تنظیمات خاص خود را نیز دارا است:
      public void ConfigureServices(IServiceCollection services)
      {
            services.AddCors();
            services.AddMvc();
      }
      
      public void Configure(IApplicationBuilder app, IHostingEnvironment env)
      {
          if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
          }
       
          app.UseCors(policyBuilder =>
          {
              string[] origins = new string[] { "http://localhost:2000", "http://localhost:2001" };
       
              policyBuilder
                  .AllowAnyHeader()
                  .AllowAnyMethod()
                  .WithOrigins(origins);
          });
       
          app.UseMvc();
      }

      روش دیگر انجام اینکار، تعریف یک DefaultPolicy است:
      public void ConfigureServices(IServiceCollection services)
      {
          services.AddCors(options =>
          {
              options.AddDefaultPolicy(
                  builder =>
                  {
                  builder
                      .AllowAnyOrigin()
                      .AllowAnyMethod()
                      .AllowAnyHeader();
                  });
                options.AddPolicy("MyCORSPolicy",
                  builder =>
                  {
                      builder.WithOrigins("http://localhost:49373")
                                          .AllowAnyHeader()
                                          .AllowAnyMethod();
                  });
           });
          services.AddMvc().AddNewtonsoftJson();
      }
      در اینجا در متد AddCors می‌توان چندین AddPolicy نامدار را داشت، به همراه یک AddDefaultPolicy بدون نام. استفاده‌ی از سیاست نام‌دار تعریف شده، یا توسط متد سراسری app.UseCors("MyCORSPolicy") انجام می‌شود و یا توسط فیلتر [EnableCors("MyCORSPolicy")]. اما اگر فیلتر [EnableCors] را بدون ذکر نامی قید کنیم، از همان تنظیمات AddDefaultPolicy استفاده خواهد کرد.


      خطاهای متداول حین کار با CORS

      خطای کار با SignalR و ارسال اطلاعات اعتبارسنجی کاربر

      Access to XMLHttpRequest at 'http://localhost:22135/chat/negotiate?jwt=<removed the jwt key>' 
      from origin 'http://localhost:53150' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
      The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 
      The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
      برای رفع این مشکل کافی است متد AllowCredentials نیز قید شود:
      services.AddCors(options =>
      {
           options.AddPolicy("AllowAllOrigins",
               builder =>
                {
                    builder
                       .AllowAnyOrigin()
                       .AllowAnyHeader()
                       .AllowAnyMethod()
                       .AllowCredentials();
                });
          });

      تمام اعتبارسنجی‌ها و اطلاعات کوکی‌ها در سمت سرور قابل دسترسی نیستند

      CORS به صورت پیش‌فرض اطلاعات کوکی‌ها را به دومینی دیگر ارسال نمی‌کند. در این حالت اگر حتما نیاز به انجام اینکار است، باید در درخواست Ajax ای ارسالی، خاصیت withCredentials به true تنظیم شود. همچنین سمت سرور نیز هدر Access-Control-Allow-Credentials را تنظیم کند (همان متد AllowCredentials فوق). در اینجا Credentials به کوکی‌ها، هدرهای اعتبارسنجی (مانند هدرهای JWT) کاربران و یا مجوزهای TLS کلاینت‌ها اشاره می‌کند.
      var xhr = new XMLHttpRequest();
      xhr.open('get', 'http://www.example.com/api/test');
      xhr.withCredentials = true;
      
      //In jQuery:
      $.ajax({
        type: 'get',
        url: 'http://www.example.com/home',
        xhrFields: {
          withCredentials: true
      }
      
      //ES6 fetch API:
      fetch(
         'http://remote-url.com/users',
         {
           'PUT',
           headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
           },
           mode: 'cors',
           credentials: 'include',
           body: JSON.stringify(body)
         }
      )
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((error) => console.error(error));

      CORS حساس به حروف کوچک و بزرگ است

      روش دیگر تنظیم فیلتر EnableCors را در اینجا مشاهده می‌کنید:
      [EnableCors(origins: "http://MyWebsite.com", headers: "*", methods: "*")]
      //is not the same as this:
      [EnableCors(origins:"http://mywebsite.com", headers: "*", methods: "*")]
      اگر بجای * دقیقا origins را مشخص کردید، بخاطر داشته باشید که این تنظیم به کوچکی و بزرگی حروف حساس است و در صورت اشتباهی (مانند ذکر MyWebSite بجای mywebsite متداول با حروف کوچک)، درخواست‌های رسیده مسدود خواهند شد. همچنین همانطور که ذکر شد، بین HTTP و HTTPS نیز تفاوت وجود دارد و origin این‌ها یکی درنظر گرفته نمی‌شود و حتی اگر تمام حروف را هم کوچک وارد کرده باشید، باز هم تنظیمات جداگانه‌ای را نیاز خواهند داشت.


      در حالت بروز خطای مدیریت نشده‌ای در سمت سرور، ASP.NET Core هدرهای CORS را ارسال نمی‌کند
      اطلاعات بیشتر 
      مطالب
      VS Code برای توسعه دهندگان ASP.NET Core - قسمت سوم - گردش کاری‌های متداول
      در قسمت قبل، دو عمل متداول نحوه‌ی ایجاد و اجرای یک پروژه‌ی جدید ASP.NET Core را بررسی کردیم. در ادامه می‌خواهیم معادل سایر اعمالی را که می‌توان با نگارش کامل ویژوال استودیو انجام داد، در VSCode نیز برشماریم.


      کار با IDE و حرکت بین کدها

      در ادامه‌، همان پروژه‌ای را که در قسمت قبل ایجاد کردیم، مجددا با وارد شدن به پوشه‌ی آن و اجرای دستور . code، توسط VSCode باز خواهیم کرد. سپس فایل Program.cs آن‌را باز کنید. فرض کنید در سطر ذیل آن:
       .UseStartup<Startup>()
      می‌خواهیم به نحو ساده‌تری به کلاس Startup آن مراجعه کنیم. برای اینکار دو روش وجود دارد:
      الف) اشاره‌گر ماوس را به آن نزدیک کنید و سپس دکمه‌ی Ctrl را نگه دارید. به این ترتیب واژه‌ی Startup تبدیل به یک لینک خواهد شد که با کلیک بر روی آن می‌توان به کلاس Startup رسید.
      ب) روش دوم، قرار دادن اشاره‌گر متنی بر روی واژه Startup و سپس فشردن دکمه‌ی F12 است. این گزینه بر روی منوی کلیک راست بر روی این واژه نیز وجود دارد.

      اگر دکمه‌ی F12 را بر روی کلاسی فشار دهید که کدهای آن در IDE وجود ندارند، یک صفحه‌ی جدید باز شده و کلاس تعریف آن‌را بر اساس ساختار و متادیتای این اسمبلی، به همراه مستندات کامل آن‌ها نمایش می‌دهد.

      در این حالت اگر خواستید به مکان قبلی بازگردید فقط کافی است دکمه‌های alt + left cursor key را بفشارید.


      در اینجا امکان یافتن ارجاعات به یک کلاس، مشاهده‌ی پیاده سازی‌ها و همچنین یک Refactoring به نام rename symbol نیز موجود است که با استفاده‌ی از آن، تمام ارجاعات به این کلاس در IDE نیز تغییرنام خواهند یافت.


      یافتن سریع فایل‌ها در IDE

      در یک پروژه‌ی بزرگ، برای یافتن سریع یک فایل، تنها کافی است دکمه‌های Ctrl+P را فشرده و در صفحه‌ی دیالوگ باز شده، قسمتی از نام آن‌را جستجو کنید:


      همچنین اگر می‌خواهید محتوای فایل‌ها را جهت یافتن واژه‌ای خاص جستجو کنید، کلیدهای Ctrl+Shift+F (منوی Edit بالای صفحه و یا دومین آیکن در نوار ابزار عمودی سمت چپ صفحه) چنین امکانی را فراهم می‌کنند:



      افزودن فایل‌های جدید به پروژه

      فرض کنید می‌خواهیم یک کنترلر جدید را به پوشه‌ی Controllers اضافه کنیم:


      برای اینکار ابتدا پوشه‌ی Controllers را انتخاب کنید. در همین حال، نوار ابزاری ظاهر می‌شود که توسط آن می‌توان در این پوشه، یک فایل جدید و یا یک پوشه‌ی جدید را ایجاد کرد.
      اگر علاقمند به ایجاد فایل یا پوشه‌ای در ریشه‌ی پروژه باشید، باید تمام فایل‌ها و پوشه‌های موجود، در حالت انتخاب نشده قرار بگیرند. به همین جهت فقط کافی است در یک مکان خالی، در لیست فایل‌ها کلیک کنید تا فایل‌ها و پوشه‌ها از حالت انتخاب شده خارج شوند. اکنون نوار ابزار ظاهر شده‌ی افزودن فایل‌ها، به پوشه‌ی ریشه‌ی پروژه اشاره می‌کند.

      در ادامه فایل جدید AboutController.cs را در پوشه‌ی Controllers ایجاد کنید. مشاهده خواهید کرد که یک فایل کاملا خالی ایجاد شده‌است. در VSCode به ازای پسوندهای مختلف فایل‌ها، قالب‌های از پیش آماده شده‌ای برای آن‌ها درنظر گرفته نمی‌شود و نمای ابتدایی تمام آن‌ها خالی است.
      اما در اینجا اگر کلمه‌ی name را تایپ کنیم، دو پیشنهاد افزودن فضای نام را ارائه می‌دهد:


      اولی صرفا نام namespace را در صفحه درج خواهد کرد. دومی به یک code snippet اشاره می‌کند و کار آن ایجاد قالب یک فضای نام جدید است. برای درج آن فقط کافی است دکمه‌ی tab را بفشارید.
      همین کار را در مورد class نیز می‌توان تکرار کرد و در اینجا در intellisense ظاهر شده یا می‌توان واژه‌ی class را درج کرد و یا code snippet آن‌را انتخاب نمود که یک کلاس جدید را ایجاد می‌کند:


      یک نکته: در VSCode نیازی نیست تا مدام دکمه‌های Ctrl+S را جهت ذخیره سازی فایل‌های تغییر کرده فشرد. می‌توان از منوی فایل، گزینه‌ی Auto Save را انتخاب کرد تا این‌کار را به صورت خودکار انجام دهد.


      ایجاد Code Snippets جدید

      هرچند تا اینجا با استفاده از code snippets پیش فرض فضاهای نام و کلاس‌ها، یک کلاس جدید را ایجاد کردیم، اما روش ساده‌تری نیز برای انجام این‌کارها و تکمیل کنترلر وجود دارد.
      برای این منظور به منوی File -> Preferences -> User snippets مراجعه کنید و سپس از لیست ظاهر شده، زبان #C را انتخاب کنید:


      به این ترتیب یک قالب جدید code snippet تولید خواهد شد. در اینجا می‌خواهیم برای تولید Actionهای یک کنترلر نیز یک code snippet جدید را تهیه کنیم:
      {
          "MVC Action": {
              "prefix": "mvcAction",
              "body": [
                  "public IActionResult ${1:ActionName}()",
                  "{",
                  " $0 ",
                  " return View();",
                  "}"
              ],
              "description": "Creates a simple MVC action method."
          }
      }
      - کدهای snippet، در داخل آرایه‌ی body درج می‌شوند. هر عضو این آرایه یک سطر از کدها را تشکیل خواهد داد.
      - در این آرایه، 0$ جائی است که اشاره‌گر متنی پس از درج snippet قرار می‌گیرد و 1$ به نامی که قرار است توسط کاربر تکمیل شود، اشاره می‌کند که در اینجا یک نام پیش فرض مانند ActionName را هم می‌توان برای آن درنظر گرفت.
      - در اینجا prefix نامی است که اگر در صفحه تایپ شود، منوی انتخاب این code snippet را ظاهر می‌کند:



      استفاده از بسته‌های Code Snippets آماده

      خوشبختانه پشتیبانی جامعه‌ی توسعه دهندگان از VSCode بسیار مطلوب است و علاوه بر افزونه‌های قابل توجهی که برای آن نوشته شده‌اند، بسته‌های Code Snippets آماده‌ای نیز جهت بالابردن سرعت کار با آن وجود دارند. برای دریافت آن‌ها، به نوار ابزار عمودی که در سمت چپ صفحه وجود دارد، مراجعه کنید و گزینه‌ی extensions آن‌را انتخاب نمائید:


      در اینجا اگر aspnetcore را جستجو کنید، لیست بسته‌های code snippets برچسب گذاری شده‌ی با aspnetcore ظاهر می‌شود. در همینجا اگر یکی از آن‌ها را انتخاب کنید، در سمت راست صفحه می‌توانید توضیحات آن را نیز مشاهده و مطالعه نمائید (بدون نیاز به خروج از IDE).
      برای مثال wilderminds-aspnetcore-snippets را نصب کنید. پس از آن تنها کافی است mvc6 را درون یک کلاس کنترلر تایپ نمائید تا امکانات آن ظاهر شوند:


      برای نمونه پس از ایجاد یک فایل خالی کنترلر، انتخاب code snippet ایی به نام mvc6-controller، سبب ایجاد یک کنترلر کامل به همراه اکشن متدهایی پیش فرض می‌شود. بنابراین معادل قالب‌های new items در نگارش کامل ویژوال استودیو در اینجا می‌توان از Code Snippets استفاده کرد.

      درکل برای یافتن مواردی مشابه، بهتر است واژه‌ی کلیدی snippets را در قسمت extensions جستجو نمائید و آن‌ها صرفا مختص به #C یا ASP.NET Core نیستند.


      مدیریت ارجاعات و بسته‌های نیوگت در برنامه‌های ASP.NET Core

      تا اینجا مدیریت فایل‌ها و نحوه‌ی تکمیل آن‌ها را توسط code snippets، بررسی کردیم. قدم بعدی و گردش کاری مهم مورد نیاز دیگر، نحوه‌ی افزودن ارجاعات به پروژه در VSCode است.
      مدیریت ارجاعات در نگارش‌های جدید ASP.NET Core، در فایل csproj برنامه انجام می‌شوند. در اینجا است که بسته‌های نیوگت جدید، ارجاعات به پروژه‌های دیگر و حتی شماره فریم ورک مورد استفاده تعیین می‌شوند.
      برای نمونه بسته‌ی نیوگت DNTPersianUtils.Core را به لیست ارجاعات آن اضافه کنید:
       <PackageReference Include="DNTPersianUtils.Core" Version="2.2.0" />
      بلافاصله با انجام این تغییر و ذخیره‌ی فایل csproj، گزینه‌ی بازیابی و نصب آن نیز ظاهر می‌شود:


      در اینجا با کلیک بر روی لینک و یا دکمه‌ی restore ، کار دریافت این بسته و نصب آن انجام خواهد شد.
      اگر علاقمند بودید تا اینکار را در خط فرمان به صورت دستی انجام دهید، دکمه‌های Ctrl+ back-tick را فشرده، تا امکانات خط فرمان درون VSCode ظاهر شوند و سپس دستور dotnet restore را صادر کنید.

      روش دوم ثبت بسته‌های نیوگت در فایل csproj، مراجعه به خط فرمان (فشردن دکمه‌های دکمه‌های Ctrl+ back-tick) و صدور دستور ذیل است:
       > dotnet add package DNTPersianUtils.Core
      به این ترتیب با استفاده از امکانات dotnet-cli نیز می‌توان آخرین نگارش یک بسته‌ی نیوگت را دریافت و به صورت خودکار به پروژه اضافه نمود. اگر نگارش خاصی مدنظر است، باید توسط پرچم version-- آن‌را در انتهای دستور مشخص کرد.


      دیباگ برنامه‌های ASP.NET Core در VSCode

      در قسمت قبل با فرامین dotnet run و dotnet build و همچنین نحوه‌ی اجرای سریع آن‌ها آشنا شدیم. در ادامه اگر به نوار ابزار عمودی کنار صفحه‌ی آن دقت کنید، گزینه‌ی دیباگ نیز وجود دارد:


      در اینجا دو نوع نحوه‌ی برپایی و اجرای برنامه را مشاهده می‌کنید که هر دو مورد در فایل vscode\launch.json. زمانیکه دیباگ پروژه را در ابتدای باز کردن آن در VSCode فعال می‌کنیم، تعریف شده‌اند.
      برای بررسی آن فایل HomeController.cs را گشوده و در ابتدای متد About آن یک break point را قرار دهید (با حرکت دادن اشاره‌گر ماوس، جائیکه شماره سطرها قرار دارند، علامت درج break point ظاهر می‌شود که با کلیک بعدی، دائمی خواهد شد و برعکس):


      پس از آن تنها کاری که باید انجام داد، فشردن دکمه‌ی F5 است که به معنای اجرای برنامه به همراه اتصال دیباگر به آن می‌باشد (در قسمت قبل، Ctrl+F5 را بررسی کردیم که به معنای اجرای برنامه، بدون اتصال دیباگر به آن است).
      در ادامه پس از اجرای برنامه، بر روی لینک About کلیک کنید تا اکشن متد آن اجرا شود. بلافاصله کنترل کار به VSCode بازگشته و سطری که بر روی آن break-point قرار داده بودیم، ظاهر می‌شود:


      اطلاعات بیشتر آن در برگه‌ی دیباگ ظاهر می‌شوند و در کل تجربه‌ی کاربری آن همانند سایر IDEهایی است که تاکنون با آن‌ها کار کرده‌اید.

      یک نکته: در اینجا در داخل فایل‌های View (فایل‌های razor) نیز می‌توان break point قرار داد.


      برپایی یک Watcher Build

      ابزار ویژه‌ای به همراه ابزارهای Build مخصوص پروژه‌های NET Core. وجود دارد به نام watcher که تغییرات پوشه‌های برنامه را تحت نظر قرار داده و با هر تغییری، پروژه را کامپایل می‌کند. به این ترتیب به سرعت می‌توان آخرین تغییرات برنامه را در مرورگر بررسی کرد. برای نصب آن، تنظیم ذیل را به فایل csproj برنامه اضافه کنید:
        <ItemGroup>
          <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
        </ItemGroup>
      پس از آن دکمه‌های Ctrl+ back-tick را فشرده تا امکانات خط فرمان، درون VSCode ظاهر شود و سپس دستور dotnet restore را صادر کنید.

      اکنون برای استفاده‌ی از آن تنها کافی است دستور ذیل را صادر کنید:
       >dotnet watch run
      ?[90mwatch : ?[39mStarted
      Hosting environment: Production
      Content root path: D:\vs-code-examples\FirstAspNetCoreProject
      Now listening on: http://localhost:5000
      Application started. Press Ctrl+C to shut down.
      همانطور که مشاهده می‌کنید، پروژه را کامپایل کرده و بر روی پورت 5000 ارائه می‌دهد. به علاوه از این پس با هر تغییری در فایل‌های #C پروژه، این کامپایل خودکار بوده و نیازی به تکرار این عملیات نیست.

      یک نکته: اینبار برای دیباگ برنامه، باید گزینه‌ی attach را انتخاب کرد:


      اگر بر روی دکمه‌ی سبز رنگ کنار آن کلیک کنید، لیست پروسه‌های دات نتی ظاهر شده و در این حالت می‌توانید دیباگر را به پروسه‌ی dotnet exec ایی که به dll برنامه اشاره می‌کند، متصل کنید (و نه پروسه‌ی dotnet watch run که در حقیقت پروسه‌ی dotnet exec را مدیریت می‌کند).
      مطالب
      Blazor 5x - قسمت سوم - مبانی Razor
      پیش از شروع به کار توسعه‌ی برنامه‌های مبتنی بر Blazor، باید با مبانی Razor آشنایی داشت. Razor امکان ترکیب کدهای #C و HTML را در یک فایل میسر می‌کند. دستور زبان آن از @ برای سوئیچ بین کدهای #C و HTML استفاده می‌کند. کدهای Razor را می‌توان در فایل‌های cshtml. نوشت که عموما مخصوص صفحات و Viewها هستند و یا در فایل‌های razor. که برای توسعه‌ی کامپوننت‌های Balzor بکار گرفته می‌شوند. در اینجا مهم نیست که پسوند فایل مورد استفاده چیست؛ چون اصول razor بکار گرفته شده در آن‌ها یکی است. البته در اینجا تاکید ما بیشتر بر روی فایل‌های razor. است که در برنامه‌های مبتنی بر Blazor بکار گرفته می‌شوند.


      ایجاد یک پروژه‌ی جدید Blazor WASM

      برای پیاده سازی و اجرای مثال‌های این قسمت، نیاز به یک پروژه‌ی جدید Blazor WASM را داریم که می‌توان آن‌را با اجرای دستور dotnet new blazorwasm --hosted در یک پوشه‌ی خالی، ایجاد کرد.

      یک نکته: دستور فوق به همراه یک سری پارامتر اختیاری مانند hosted-- نیز هست. برای مشاهده‌ی لیست آن‌ها دستور dotnet new blazorwasm --help را صادر کنید. برای مثال ذکر پارامتر hosted-- سبب می‌شود تا یک ASP.NET Core host نیز برای Blazor WebAssembly app ایجاد شده تولید شود.

      حالت hosted-- آن یک چنین ساختاری را دارد که از سه پروژه و پوشه‌ی Client ،Server و Shared تشکیل می‌شود:


      در اینجا یک پروژه‌ی خالی WASM ایجاد شده که برخلاف حالت معمولی dotnet new blazorwasm که در قسمت قبل آن‌را بررسی کردیم، دیگر از فایل استاتیک wwwroot\sample-data\weather.json در آن خبری نیست. بجای آن، یک پروژه‌ی استاندارد ASP.NET Core Web API را در پوشه‌ی جدید Server ایجاد کرده که کار ارائه‌ی اطلاعات این سرویس آب و هوا را انجام می‌دهد و برنامه‌ی WASM ایجاد شده، این اطلاعات را توسط HTTP Client خود، از سرور Web API دریافت می‌کند.

      بنابراین اگر مدل برنامه‌ای که قصد دارید تهیه کنید، ترکیبی از یک Web API و WASM است، روش hosted--، آغاز آن‌را بسیار ساده می‌کند.

      نکته: روش اجرای این نوع برنامه‌ها با اجرای دستور dotnet run در داخل پوشه‌ی Server پروژه، انجام می‌شود. با اینکار هم سرور ASP.NET Core آغاز می‌شود و هم برنامه‌ی WASM توسط آن ارائه می‌گردد. در این حالت اگر آدرس https://localhost:5001 را در مرورگر باز کنیم، هم قسمت‌های بدون نیاز به سرور پروژه‌ی WASM قابل دسترسی است (مانند کار با شمارشگر آن) و هم قسمت دریافت اطلاعات از سرور آن، در منوی Fetch Data.


      شروع به کار با Razor

      پس از ایجاد یک پروژه‌ی جدید WASM، به فایل Client\Pages\Index.razor آن مراجعه کرده و محتوای پیش‌فرض آن‌را بجز سطر اول زیر، حذف می‌کنیم:
      @page "/"
      این سطر، بیانگر مسیریابی منتهی به کامپوننت جاری است. یعنی با گشودن برنامه‌ی WASM در مرورگر و مراجعه به ریشه‌ی سایت، محتوای این کامپوننت را مشاهده خواهیم کرد.
      در فایل‌های razor. می‌توان ترکیبی از کدهای #C و HTML را نوشت. برای مثال:
      @page "/"
      
      <p>Hello, @name</p>
      
      @code
      {
          string name = "Vahid N.";
      }
      در اینجا قصد داریم مقدار یک متغیر را در یک پاراگراف درج کنیم. به همین جهت برای تعریف آن و شروع به کدنویسی می‌توان با تعریف یک قطعه کد که در فایل‌های razor با code@ شروع می‌شود، اینکار را انجام داد. در این قطعه کد، نوشتن هر نوع کد #C ای مجاز است که نمونه‌ای از آن‌را در اینجا با تعریف یک متغیر مشاهده می‌کنید. اکنون برای درج مقدار این متغیر در بین کدهای HTML از حرف @ استفاده می‌کنیم؛ مانند name@ در اینجا. نمونه‌ای از خروجی تغییرات فوق را در تصویر زیر مشاهده می‌کنید:


      یک نکته: با توجه به اینکه تغییرات زیادی را در فایل جاری اعمال خواهیم کرد، بهتر است برنامه را با دستور dotnet watch run اجرا کرد، تا این تغییرات را تحت نظر قرار داده و آن‌ها را به صورت خودکار کامپایل کند. به این صورت دیگر نیازی نخواهد بود به ازای هر تغییر، یکبار دستور dotnet run اجرا شود.

      در زمان درج متغیرهای #C در بین کدهای HTML توسط razor، استفاده از تمام متدهای الحاقی زبان #C نیز مجاز هستند؛ مانند:
       <p>Hello, @name.ToUpper()</p>
      بنابراین درج حرف @ در بین کدهای HTML به این معنا است که به کامپایلر razor اعلام می‌کنیم، پس از این حرف، هر عبارتی که قرار می‌گیرد، یک عبارت معتبر #C است.

      یا حتی می‌توان یک متد جدید را مانند CustomToUpper در قطعه کد razor، تعریف کرد و از آن به صورت زیر استفاده نمود:
      @page "/"
      
      <p>Hello, @name.ToUpper()</p>
      <p>Hello, @CustomToUpper(name)</p>
      
      @code
      {
          string name = "Vahid N.";
      
          string CustomToUpper(string value) => value.ToUpper();
      }
      در این مثال‌ها، ابتدای عبارت #C تعریف شده با حرف @ شروع می‌شود و انتهای آن‌را خود کامپایلر razor بر اساس بسته شدن تگ p تعریف شده، تشخیص می‌دهد. اما اگر قصد داشته باشیم برای مثال جمع دو عدد را در اینجا محاسبه کنیم چطور؟
      <p>Let's add 2 + 2 : @2 + 2 </p>
      در این حالت امکان تشخیص ابتدا و انتهای عبارت #C توسط کامپایلر میسر نیست. برای رفع این مشکل می‌توان از پرانتزها استفاده کرد:
      <p>Let's add 2 + 2 : @(2 + 2) </p>
      نمونه‌ی دیگر نیاز به تعریف ابتدا و انتهای یک قطعه کد، در حین تعریف مدیریت کنندگان رویدادها است:
      <button @onclick="@(()=>Console.WriteLine("Test"))">Click me</button>
      در اینجا onclick@ مشخص می‌کند که با کلیک بر روی این دکمه قرار است قطعه کد #C ای اجرا شود. سپس با استفاده از ()@ محدوده‌ی این قطعه کد، مشخص می‌شود و اکنون در داخل آن می‌توان یک anonymous function را تعریف کرد که خروجی آن را در قسمت console ابزارهای توسعه دهندگان مرورگر می‌توان مشاهده کرد:


      در اینجا اگر از Console.WriteLine("Test")@ استفاده می‌شد، به معنای انتساب یک رشته‌ی محاسبه شده به رویداد onclick بود که مجاز نیست.
      روش دیگر انجام اینکار به صورت زیر است:
      @page "/"
      
      <button @onclick="@WriteLog">Click me 2</button>
      
      @code
      {
          void WriteLog()
          {
              Console.WriteLine("Test");
          }
      }
      می‌توان یک متد void را تعریف کرد و سپس فقط نام آن‌را توسط @ به onlick انتساب داد. ذکر این نام، اشاره‌گری خواهد بود به متد اجرا نشده‌ی WriteLog. در این حالت اگر نیاز به ارسال پارامتری به متد WriteLog بود، چطور؟
      @page "/"
      
      <button @onclick="@(()=>WriteLogWithParam("Test 3"))">Click me 3</button>
      
      @code
      {
          void WriteLogWithParam(string value)
          {
              Console.WriteLine(value);
          }
      }
      در این حالت نیز می‌توان از روش بکارگیری anonymous function‌ها برای تعریف پارامتر استفاده کرد.

      یک نکته: اگر به اشتباه بجای WriteLogWithParam، همان WriteLog قبلی را بنویسیم، کامپایلر (در حال اجرای توسط دستور dotnet watch run) خطای زیر را نمایش می‌دهد؛ پیش از اینکه برنامه در مرورگر اجرا شود:
      BlazorRazorSample\Client\Pages\Index.razor(12,25): error CS1501: No overload for method 'WriteLog' takes 1 arguments


      امکان تعریف کلاس‌ها در فایل‌های razor.

      در فایل‌های razor.، محدود به تعریف یک سری متدها و متغیرهای ساده نیستیم. در اینجا امکان تعریف کلاس‌ها نیز وجود دارد و همچنین می‌توان از کلاس‌های خارجی (کلاس‌هایی که خارج از فایل razor جاری تعریف شده‌اند) نیز استفاده کرد.
      @page "/"
      
      <p>Hello, @StringUtils.MyCustomToUpper(name)</p>
      
      @code
      {
          public class StringUtils
          {
              public static string MyCustomToUpper(string value) => value.ToUpper();
          }
      }
      برای نمونه در اینجا یک کلاس کمکی را جهت تعریف متد MyCustomToUpper، اضافه کرده‌ایم. در ادامه نحوه‌ی استفاده از این متد را در پاراگراف تعریف شده، مشاهده می‌کنید که همانند کار با کلاس و متدهای متداول #C است.
      البته این کلاس را تنها می‌توان داخل همین کامپوننت استفاده کرد. برای اینکه بتوان از امکانات این کلاس، در سایر کامپوننت‌ها نیز استفاده کرد، می‌توان آن‌را در پروژه‌ی Shared قرار داد. اگر به تصویر ابتدای مطلب جاری دقت کنید، سه پروژه ایجاد شده‌است:
      الف) پروژه‌ی کلاینت: که همان WASM است.
      ب) پروژه‌ی سرور: که یک پروژه‌ی ASP.NET Core Web API ارائه کننده‌ی سرویس و API آب و هوا است و همچنین هاست کننده‌ی WASM ما.
      ج) پروژه‌ی Shared: کدهای این پروژه، بین هر دو پروژه به اشتراک گذاشته می‌شوند و برای مثال محل مناسبی است برای تعریف DTO ها. برای نمونه WeatherForecast.cs قرار گرفته‌ی در آن، DTO یا data transfer object سرویس API برنامه است که قرار است به کلاینت بازگشت داده شود. به این ترتیب دیگر نیازی نخواهد بود تا این تعاریف را در پروژه‌های سرور و کلاینت تکرار کنیم و می‌توان کدهای اینگونه را به اشتراک گذاشت.
      کاربرد دیگر آن تعریف کلاس‌های کمکی است؛ مانند StringUtils فوق. به همین به پروژه‌ی Shared مراجعه کرده و کلاس StringUtils را به صورت زیر در آن تعریف می‌کنیم (و یا حتی می‌توان این قطعه کد را داخل یک پوشه‌ی جدید، در همان پروژه‌ی WASM نیز قرار داد):
      namespace BlazorRazorSample.Shared
      {
          public class StringUtils
          {
              public static string MyNewCustomToUpper(string value) => value.ToUpper();
          }
      }
      اگر به فایل‌های csproj دو پروژه‌ی سرور و کلاینت جاری مراجعه کنیم، از پیش، مدخلی را به فایل Shared\BlazorRazorSample.Shared.csproj دارند. بنابراین جهت معرفی این اسمبلی به آن‌ها، نیاز به کار خاصی نیست و از پیش، ارجاعی به آن تعریف شده‌است.

      پس از آن روش استفاده‌ی از این کلاس کمکی خارجی اشتراکی به صورت زیر است:
      @page "/"
      
      @using BlazorRazorSample.Shared
      
      <p>Hello, @StringUtils.MyNewCustomToUpper(name)</p>
      ابتدا فضای نام این کلاس را با استفاده از using@ مشخص می‌کنیم و سپس امکان دسترسی به امکانات آن میسر می‌شود.

      یک نکته: می‌توان به فایل Client\_Imports.razor مراجعه و مدخل زیر را به انتهای آن اضافه کرد:
      @using BlazorRazorSample.Shared
      به این ترتیب دیگر نیازی به ذکر این using@ تکراری، در هیچکدام از فایل‌های razor. پروژه‌ی کلاینت نخواهد بود؛ چون تعاریف درج شده‌ی در فایل Client\_Imports.razor سراسری هستند.


      کار با حلقه‌ها در فایل‌های razor.

      همانطور که عنوان شد، یکی از کاربردهای پروژه‌ی Shared، امکان به اشتراک گذاشتن مدل‌ها، در برنامه‌های کلاینت و سرور است. برای مثال یک پوشه‌ی جدید Models را در این پروژه ایجاد کرده و کلاس MovieDto را به صورت زیر در آن تعریف می‌کنیم:
      using System;
      
      namespace BlazorRazorSample.Shared.Models
      {
          public class MovieDto
          {
              public string Title { set; get; }
      
              public DateTime ReleaseDate { set; get; }
          }
      }
      سپس به فایل Client\_Imports.razor مراجعه کرده و فضای نام این پوشه را اضافه می‌کنیم؛ تا دیگر نیازی به تکرار آن در تمام فایل‌های razor. برنامه‌ی کلاینت نباشد:
      @using BlazorRazorSample.Shared.Models
      اکنون می‌خواهیم لیستی از فیلم‌ها را در فایل Client\Pages\Index.razor نمایش دهیم:
      @page "/"
      
      <div>
          <h3>Movies</h3>
          @foreach(var movie in movies)
          {
              <p>Title: <b>@movie.Title</b></p>
              <p>ReleaseDate: @movie.ReleaseDate.ToString("dd MMM yyyy")</p>
          }
      </div>
      
      @code
      {
          List<MovieDto> movies = new List<MovieDto>
          {
              new MovieDto
              {
                  Title = "Movie 1",
                  ReleaseDate = DateTime.Now.AddYears(-1)
              },
              new MovieDto
              {
                  Title = "Movie 2",
                  ReleaseDate = DateTime.Now.AddYears(-2)
              },
              new MovieDto
              {
                  Title = "Movie 3",
                  ReleaseDate = DateTime.Now.AddYears(-3)
              }
          };
      }
      در اینجا در ابتدا لیستی از MovieDto‌ها در قسمت code@ تعریف شده و سپس روش استفاده‌ی از یک حلقه‌ی foreach سی‌شارپ را در کدهای razor نوشته شده، مشاهده می‌کنید که این خروجی را ایجاد می‌کند:


      یک نکته: در حین تعریف فیلدهای code@، امکان استفاده‌ی از var وجود ندارد؛ مگر اینکه از آن بخواهیم در داخل بدنه‌ی یک متد استفاده کنیم.

      و یا نمونه‌ی دیگری از حلقه‌های #‍C مانند for را می‌توان به صورت زیر تعریف کرد:
          @for(var i = 0; i < movies.Count; i++)
          {
              <div style="background-color: @(i % 2 == 0 ? "blue" : "red")">
                  <p>Title: <b>@movies[i].Title</b></p>
                  <p>ReleaseDate: @movies[i].ReleaseDate.ToString("dd MMM yyyy")</p>
              </div>
          }
      در اینجا روش تغییر پویای background-color هر ردیف را نیز به کمک کدهای razor، مشاهده می‌کنید. اگر شماره‌ی ردیفی زوج بود، با آبی نمایش داده می‌شود؛ در غیراینصورت با قرمز. در اینجا نیز از ()@ برای تعیین محدوده‌ی کدهای #C نوشته شده، کمک گرفته‌ایم.


      نمایش شرطی عبارات در فایل‌های razor.

      اگر به مثال توکار Client\Pages\FetchData.razor مراجعه کنیم (مربوط به حالت host-- که در ابتدای مطلب عنوان شد)، کدهای زیر قابل مشاهده هستند:
      @page "/fetchdata"
      @using BlazorRazorSample.Shared
      @inject HttpClient Http
      
      <h1>Weather forecast</h1>
      
      <p>This component demonstrates fetching data from the server.</p>
      
      @if (forecasts == null)
      {
          <p><em>Loading...</em></p>
      }
      else
      {
          <table class="table">
              <thead>
                  <tr>
                      <th>Date</th>
                      <th>Temp. (C)</th>
                      <th>Temp. (F)</th>
                      <th>Summary</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach (var forecast in forecasts)
                  {
                      <tr>
                          <td>@forecast.Date.ToShortDateString()</td>
                          <td>@forecast.TemperatureC</td>
                          <td>@forecast.TemperatureF</td>
                          <td>@forecast.Summary</td>
                      </tr>
                  }
              </tbody>
          </table>
      }
      
      @code {
          private WeatherForecast[] forecasts;
      
          protected override async Task OnInitializedAsync()
          {
              forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
          }
      
      }
      در این مثال، روش کار با یک سرویس تزریق شده‌ی async که قرار است از Web API اطلاعاتی را دریافت کند، مشاهده می‌کنید. در اینجا برخلاف مثال قبلی ما، از روال رویدادگردان OnInitializedAsync برای مقدار دهی لیست یا آرایه‌ای از اطلاعات وضعیت هوا استفاده شده‌است (و نه به صورت مستقیم در یک فیلد قسمت code@). این مورد جزو life-cycle‌های کامپوننت‌های razor است که در قسمت‌های بعد بیشتر بررسی خواهد شد. متد OnInitializedAsync برای بارگذاری اطلاعات یک سرویس از راه دور استفاده می‌شود و در اولین بار اجرای کامپوننت فراخوانی خواهد شد. نکته‌ی مهمی که در اینجا وجود دارد، نال بودن فیلد forecasts در زمان رندر اولیه‌ی کامپوننت جاری است؛ از این جهت که کار دریافت اطلاعات از سرور زمان‌بر است ولی رندر کامپوننت، به صورت آنی صورت می‌گیرد. در این حالت زمانیکه نوبت به اجرای foreach (var forecast in forecasts)@ می‌رسد، برنامه با یک استثنای نال بودن forecasts، متوقف خواهد شد؛ چون هنوز کار OnInitializedAsync به پایان نرسیده‌است:


       برای رفع این مشکل، ابتدا یک if@ مشاهده می‌شود، تا نال بودن forecasts را بررسی کند:
      @if (forecasts == null)
      {
          <p><em>Loading...</em></p>
      }
      و همچنین عبارت در حال بارگذاری را نمایش می‌دهد. سپس در قسمت else آن، نمایش اطلاعات دریافت شده را توسط یک حلقه‌ی foreach مشاهده می‌کنید. با مقدار دهی forecasts در متد OnInitializedAsync، مجددا کار رندر جدول انجام خواهد شد.


      روش نمایش عبارات HTML در فایل‌های razor.

      فرض کنید عنوان اول فیلم مثال جاری، به همراه یک تگ HTML هم هست:
      new MovieDto
      {
         Title = "<i>Movie 1</i>",
         ReleaseDate = DateTime.Now.AddYears(-1)
      },
      در این حالت اگر برنامه را اجرا کنیم، خروجی آن دقیقا به صورت <Title: <i>Movie 1</i خواهد بود. این مورد به دلایل امنیتی انجام شده‌است. اگر پیشتر تگ‌های HTML را تمیز کرده‌اید و مطمئن هستید که خطری را ایجاد نمی‌کنند، می‌توانید با استفاده از روش زیر، آن‌ها را رندر کرد:
      <p>Title: <b>@((MarkupString)movie.Title)</b></p>


      کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-03.zip
      برای اجرای آن وارد پوشه‌ی Server شده و دستور dotnet run را اجرا کنید.
      اشتراک‌ها
      دوره سطح متوسط ASP.NET Core از Microsoft Virtual Academy

      Get started with Tag Helpers, explore authentication with ASP.NET Core, and get the details on authorization. Learn how to create your own Web API, check out Entity Framework Core, look at publishing and deployment, and much more, as you skill up for the advanced ASP.NET Core course.

      دوره سطح متوسط ASP.NET Core از Microsoft Virtual Academy