نظرات مطالب
طراحی افزونه پذیر با ASP.NET MVC 4.x/5.x - قسمت سوم
فقط برای globalization از مقاله شما استفاده کردم (مقاله ) برای مستر کار میدهد اما در پلاگین‌ها کار نمی‌کند و در حقیقت همان ریسورس اصلی کار می‌کند و بقیه ریسورس‌ها (فارسی) کار نمی‌کنند حال آنکه در مستر همه چی درست است
نظرات مطالب
ASP.NET MVC #18
به همین جهت مباحث Roles درنظر گرفته شده‌است. نقش مدیر، نقش نویسنده، نقش ادیتور، نقش کاربر صرفا خواننده و غیره. برای هر کدام یک جدول جدا درست نمی‌کنند. نقش این کاربرها را جداگانه مشخص می‌کنند.
اشتراک‌ها
Rx.NET v6.0 منتشر شد

We're pleased to announce the availability of a new major version, Rx v6.0.

  • 🚀 First update in 2.5 years, with support for .NET 7.0, .NET 6.0, .NET Standard 2.0, .NET Framework 4.7.2
  • ✂️ Support for trimming
  • 🪲 Now using .snupkg for symbols
  • 💥 New options for dealing with unhandled exceptions
  • 🛠️ Modernised tooling and DevOps processes to reflect .NET as of H1 2023
  • 💪 288 hours of effort went into this release.
  • 🤞 Much more to come in v7.0 in H2 2023 
Rx.NET v6.0 منتشر شد
نظرات مطالب
پرسش و پاسخ‌های متداول ایجاد یک وبلاگ بلاگری
قرار بود فقط دو تا سؤال بپرسید :)
- فرمت قالب‌ها xml است و با فرانت پیج قدیمی یا expression web جدید قابل ویرایش نیست و اصلا ادیتوری هم ندارد (یا جایی منتشر نشده تا جایی که اطلاع دارم). دستی باید روی آن کار شود.
- برای قرار دادن عکس در بک گراند، شما فقط کافی است عکس مورد نظر را در یک سایت دیگر آپلود کنید، سپس یک css تعریف کرده و آن‌را اعمال نمائید. به سلکتور body یا تگ body قابل اعمال است. اطلاعات بیشتر:
http://www.w3schools.com/css/pr_background-image.asp
- برای تعیین رنگ و اندازه تاریخ، باز هم باید css‌ سایت را در همان قسمت ویرایش html سایت ویرایش کنید. برای مثال این موارد باید اضافه شود:
h1, h2, h3 {
font-family: Tahoma;
direction: rtl;
font-size:8pt;
color:green;
text-align: right;
}
- تاریخ آرشیو هم در همان مقاله هست و باید اعمال شده باشد.

در کل شکل و شمایل این قالب‌ها با ویرایش css آن تا حد قابل قبولی قابل تغییر است (بدون نیاز به دستکاری قسمت‌های دیگر که مربوط به تعریف ویجت‌ها است)
مسیرراه‌ها
WPF
          مطالب دوره‌ها
          استفاده از AOP Interceptors برای حذف کدهای تکراری INotifyPropertyChanged در WPF
          هرکسی که با WPF کار کرده باشد با دردی به نام اینترفیس INotifyPropertyChanged و پیاده سازی‌های تکراری مرتبط با آن آشنا است:
          public class MyClass : INotifyPropertyChanged
          {
              private string _myValue;
              public event PropertyChangedEventHandler PropertyChanged;
              public string MyValue
              {
                  get
                  {
                      return _myValue;
                  }
                  set
                  {
                      _myValue = value;
                      RaisePropertyChanged("MyValue");
                  }
              }
              protected void RaisePropertyChanged(string propertyName)
              {
                  if (PropertyChanged != null)
                      PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
              }
          }
          چندین راه‌حل هم برای ساده سازی و یا بهبود آن وجود دارد از Strongly typed کردن آن تا روش‌های اخیر دات نت 4 و نیم در مورد استفاده از ویژگی‌های متدهای فراخوان. اما ... با استفاده از AOP Interceptors می‌توان در وهله سازی‌ها و فراخوانی‌ها دخالت کرد و کدهای مورد نظر را در مکان‌های مناسبی تزریق نمود. بنابراین در مطلب جاری قصد داریم ارائه متفاوتی را از پیاده سازی خودکار INotifyPropertyChanged ارائه دهیم. به عبارتی چقدر خوب می‌شد فقط می‌نوشتیم :
          public class MyDreamClass : INotifyPropertyChanged
          {
              public event PropertyChangedEventHandler PropertyChanged;
              public string MyValue { get; set; }
          }
          و ... همه چیز مثل سابق کار می‌کرد. برای رسیدن به این هدف، باید فراخوانی‌های set خواص را تحت نظر قرار داد (یا همان Interception در اینجا). ابتدا باید اجازه دهیم تا set صورت گیرد، پس از آن کدهای معروف RaisePropertyChanged را به صورت خودکار فراخوانی کنیم.


          پیشنیازها

          ابتدا یک برنامه جدید WPF را آغاز کنید. تنظیمات آن‌را از حالت Client profile به Full تغییر دهید.
          سپس همانند قسمت قبل، ارجاعات لازم را به StructureMap و Castle.Core نیز اضافه نمائید:
           PM> Install-Package structuremap
          PM> Install-Package Castle.Core


          ساختار برنامه

          برنامه ما از یک اینترفیس و کلاس سرویس تشکیل شده است:
          namespace AOP01.Services
          {
              public interface ITestService
              {
                  int GetCount();
              }
          }
          
          namespace AOP01.Services
          {
              public class TestService: ITestService
              {     
                  public int GetCount()
                  {
                      return 10; //این فقط یک مثال است برای بررسی تزریق وابستگی‌ها
                  }
              }
          }
          همچنین دارای یک ViewModel به شکل زیر می‌باشد:
          using AOP01.Services;
          using AOP01.Core;
          
          namespace AOP01.ViewModels
          {
              public class TestViewModel  : BaseViewModel
              {
                  private readonly ITestService _testService;
                  //تزریق وابستگی‌ها در سازنده کلاس
                  public TestViewModel(ITestService testService)
                  {
                      _testService = testService;
                  }
          
                  // Note: it's a virtual property.
                  public virtual string Text { get; set; }
              }
          }
          سه نکته در این ViewModel حائز اهمیت هستند:
          الف) استفاده از کلاس پایه BaseViewModel برای کاهش کدهای تکراری مرتبط با INotifyPropertyChanged که به صورت زیر تعریف شده است:
          using System.ComponentModel;
          
          namespace AOP01.Core
          {
              public abstract class BaseViewModel : INotifyPropertyChanged
              {
                  public event PropertyChangedEventHandler PropertyChanged;
          
                  public void RaisePropertyChanged(string propertyName)
                  {
                      var handler = PropertyChanged;
          
                      if (handler != null)
                          handler(this, new PropertyChangedEventArgs(propertyName));
                  }
              }
          }
          ب) کلاس سرویس، در حالت تزریق وابستگی‌ها در سازنده کلاس در اینجا مورد استفاده قرار گرفته است. وهله سازی خودکار آن توسط کلاس‌های پروکسی و DI صورت خواهند گرفت.
          ج) خاصیتی که در اینجا تعریف شده از نوع virtual است؛ بدون پیاده سازی مفصل قسمت set آن و فراخوانی مستقیم RaisePropertyChanged کلاس پایه به صورت متداول. علت virtual تعریف کردن آن به امکان دخل و تصرف در نواحی get و set این خاصیت توسط Interceptor ایی که در ادامه تعریف خواهیم کرد بر می‌گردد.


          پیاده سازی NotifyPropertyInterceptor

          using System;
          using Castle.DynamicProxy;
          
          namespace AOP01.Core
          {
              public class NotifyPropertyInterceptor : IInterceptor
              {
                  public void Intercept(IInvocation invocation)
                  {
                      // متد ست، ابتدا فراخوانی می‌شود و سپس کار اطلاع رسانی را انجام خواهیم داد
                      invocation.Proceed();
          
                      if (invocation.Method.Name.StartsWith("set_"))
                      {
                          var propertyName = invocation.Method.Name.Substring(4);
                          raisePropertyChangedEvent(invocation, propertyName, invocation.TargetType);
                      }
                  }
          
                  void raisePropertyChangedEvent(IInvocation invocation, string propertyName, Type type)
                  {
                      var methodInfo = type.GetMethod("RaisePropertyChanged");
                      if (methodInfo == null)
                      {
                          if (type.BaseType != null)
                              raisePropertyChangedEvent(invocation, propertyName, type.BaseType);
                      }
                      else
                      {
                          methodInfo.Invoke(invocation.InvocationTarget, new object[] { propertyName });
                      }
                  }
              }
          }
          با اینترفیس IInterceptor در قسمت قبل آشنا شدیم.
          در اینجا ابتدا اجازه خواهیم داد تا کار set به صورت معمول انجام شود. دو حالت get و set ممکن است رخ دهند. بنابراین در ادامه بررسی خواهیم کرد که اگر حالت set بود، آنگاه متد RaisePropertyChanged کلاس پایه BaseViewModel را یافته و به صورت پویا با propertyName صحیحی فراخوانی می‌کنیم.
          به این ترتیب دیگر نیازی نخواهد بود تا به ازای تمام خواص مورد نیاز، کار فراخوانی دستی RaisePropertyChanged صورت گیرد.


          اتصال Interceptor به سیستم

          خوب! تا اینجای کار صرفا تعاریف اولیه تدارک دیده شده‌اند. در ادامه نیاز است تا DI و DynamicProxy را از وجود آن‌ها مطلع کنیم.
          برای این منظور فایل App.xaml.cs را گشوده و در نقطه آغاز برنامه تنظیمات ذیل را اعمال نمائید:
          using System.Linq;
          using System.Windows;
          using AOP01.Core;
          using AOP01.Services;
          using Castle.DynamicProxy;
          using StructureMap;
          
          namespace AOP01
          {
              public partial class App
              {
                  protected override void OnStartup(StartupEventArgs e)
                  {
                      base.OnStartup(e);
          
                      ObjectFactory.Initialize(x =>
                      {
                          x.For<ITestService>().Use<TestService>();
          
                          var dynamicProxy = new ProxyGenerator();
                          x.For<BaseViewModel>().EnrichAllWith(vm =>
                          {
                              var constructorArgs = vm.GetType()
                                      .GetConstructors()
                                      .FirstOrDefault()
                                      .GetParameters()
                                      .Select(p => ObjectFactory.GetInstance(p.ParameterType))
                                      .ToArray();
          
                              return dynamicProxy.CreateClassProxy(
                                          classToProxy: vm.GetType(),
                                          constructorArguments: constructorArgs,
                                          interceptors: new[] { new NotifyPropertyInterceptor() });
                          });
                      });
                  }
              }
          }
          مطابق این تنظیمات، هرجایی که نیاز به نوعی از ITestService بود، از کلاس TestService استفاده خواهد شد.
          همچنین در ادامه به DI مورد استفاده اعلام می‌کنیم که ViewModelهای ما دارای کلاس پایه BaseViewModel هستند. بنابراین هر زمانی که این نوع موارد وهله سازی شدند، آن‌ها را یافته و با پروکسی حاوی NotifyPropertyInterceptor مزین کن.
          مثالی که در اینجا انتخاب شده، تقریبا مشکل‌ترین حالت ممکن است؛ چون به همراه تزریق خودکار وابستگی‌ها در سازنده کلاس ViewModel نیز می‌باشد. اگر ViewModelهای شما سازنده‌ای به این شکل ندارند، قسمت تشکیل constructorArgs را حذف کنید.


          استفاده از ViewModel مزین شده با پروکسی در یک View

          <Window x:Class="AOP01.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Title="MainWindow" Height="350" Width="525">
              <Grid>
                  <TextBox Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
              </Grid>
          </Window>
          اگر فرض کنیم که پنجره اصلی برنامه مصرف کننده ViewModel فوق است، در code behind آن خواهیم داشت:
          using AOP01.ViewModels;
          using StructureMap;
          
          namespace AOP01
          {
              public partial class MainWindow
              {
                  public MainWindow()
                  {
                      InitializeComponent();
          
                      //علاوه بر تشکیل پروکسی
                      //کار وهله سازی و تزریق وابستگی‌ها در سازنده را هم به صورت خودکار انجام می‌دهد
                      var vm = ObjectFactory.GetInstance<TestViewModel>(); 
                      this.DataContext = vm;
                  }
              }
          }
          به این ترتیب یک ViewModel محصور شده توسط DynamicProxy مزین با NotifyPropertyInterceptor به DataContext  ارسال می‌گردد.

          اکنون اگر برنامه را اجرا کنیم، مشاهده خواهیم کرد که با وارد کردن مقداری در TextBox برنامه، NotifyPropertyInterceptor مورد استفاده قرار می‌گیرد:



          دریافت مثال کامل این قسمت
          AOP01.zip
          مطالب
          روش‌هایی برای بهبود سرعت برنامه‌های مبتنی بر Entity framework
          در این مطلب تعدادی از شایع‌ترین مشکلات حین کار با Entity framework که نهایتا به تولید برنامه‌هایی کند منجر می‌شوند، بررسی خواهند شد.

          مدل مورد بررسی

              public class User
              {
                  public int Id { get; set; }
                  public string Name { get; set; }
          
                  public virtual ICollection<BlogPost> BlogPosts { get; set; }
              }
          
              public class BlogPost
              {
                  public int Id { get; set; }
                  public string Title { get; set; }
                  public string Content { get; set; }
          
                  [ForeignKey("UserId")]
                  public virtual User User { get; set; }
                  public int UserId { get; set; }
              }
          کوئری‌هایی که در ادامه بررسی خواهند شد، بر روی رابطه‌ی one-to-many فوق تعریف شده‌اند؛ یک کاربر به همراه تعدادی مطلب منتشر شده.


          مشکل 1: بارگذاری تعداد زیادی ردیف
           var data = context.BlogPosts.ToList();
          در بسیاری از اوقات، در برنامه‌های خود تنها نیاز به مشاهده‌ی قسمت خاصی از یک سری از اطلاعات، وجود دارند. به همین جهت بکارگیری متد ToList بدون محدود سازی تعداد ردیف‌های بازگشت داده شده، سبب بالا رفتن مصرف حافظه‌ی سرور و همچنین بالا رفتن میزان داده‌ای که هر بار باید بین سرور و کلاینت منتقل شوند، خواهد شد. یک چنین برنامه‌هایی بسیار مستعد به استثناهایی از نوع out of memory هستند.
          راه حل:  با استفاده از Skip و Take، مباحث صفحه‌ی بندی را اعمال کنید.


          مشکل 2: بازگرداندن تعداد زیادی ستون
           var data = context.BlogPosts.ToList();
          فرض کنید View برنامه، در حال نمایش عناوین مطالب ارسالی است. کوئری فوق، علاوه بر عناوین، شامل تمام خواص تعریف شده‌ی دیگر نیز هست. یک چنین کوئری‌هایی نیز هربار سبب هدر رفتن منابع سرور می‌شوند.
          راه حل: اگر تنها نیاز به خاصیت Content است، از Select و سپس ToList استفاده کنید؛ البته به همراه نکته 1.
           var list = context.BlogPosts.Select(x => x.Content).Skip(15).Take(15).ToList();


          مشکل 3: گزارشگیری‌هایی که بی‌شباهت به حمله‌ی به دیتابیس نیستند
           foreach (var post in context.BlogPosts)
          {
               Console.WriteLine(post.User.Name);
          }
          فرض کنید قرار است رکوردهای مطالب را نمایش دهید. در حین نمایش این مطالب، در قسمتی از آن باید نام نویسنده نیز درج شود. با توجه به رابطه‌ی تعریف شده، نوشتن post.User.Name به ازای هر مطلب، بسیار ساده به نظر می‌رسد و بدون مشکل هم کار می‌کند. اما ... اگر خروجی SQL این گزارش را مشاهده کنیم، به ازای هر ردیف نمایش داده شده، یکبار رفت و برگشت به بانک اطلاعاتی، جهت دریافت نام نویسنده یک مطلب وجود دارد.
          این مورد به lazy loading مشهور است و در مواردی که قرار است با یک مطلب و یک نویسنده کار شود، شاید اهمیتی نداشته باشد. اما در حین نمایش لیستی از اطلاعات، بی‌شباهت به یک حمله‌ی شدید به بانک اطلاعاتی نیست.
          راه حل: در گزارشگیری‌ها اگر نیاز به نمایش اطلاعات روابط یک موجودیت وجود دارد، از متد Include استفاده کنید تا Lazy loading لغو شود.
           foreach (var post in context.BlogPosts.Include(x=>x.User))


          مشکل 4:  فعال بودن بی‌جهت مباحث ردیابی اطلاعات
           var data = context.BlogPosts.ToList();
          در اینجا ما فقط قصد داریم که لیستی از اطلاعات را دریافت و سپس نمایش دهیم. در این بین، هدف، ویرایش یا حذف اطلاعات این لیست نیست. یک چنین کوئری‌هایی مساوی هستند با تشکیل dynamic proxies مخصوص EF جهت ردیابی تغییرات اطلاعات (مباحث AOP توکار). EF توسط این dynamic proxies، محصور کننده‌هایی را برای تک تک آیتم‌های بازگشت داده شده از لیست تهیه می‌کند. در این حالت اگر خاصیتی را تغییر دهید، ابتدا وارد این محصور کننده (غشاء نامرئی) می‌شود، در سیستم ردیابی EF ذخیره شده و سپس به شیء اصلی اعمال می‌گردد. به عبارتی شیء در حال استفاده، هر چند به ظاهر post.User است اما در واقعیت یک User دارای روکشی نامرئی از جنس dynamic proxy‌های EF است. تهیه این روکش‌ها، هزینه‌بر هستند؛ چه از لحاظ میزان مصرف حافظه و چه از نظر سرعت کار.
          راه حل: در گزاشگیری‌ها، dynamic proxies را توسط متد AsNoTracking غیرفعال کنید:
           var data = context.BlogPosts.AsNoTracking().Skip(15).Take(15).ToList();


          مشکل 5: باز کردن  تعداد اتصالات زیاد به بانک اطلاعاتی در طول یک درخواست

          هر Context دارای اتصال منحصربفرد خود به بانک اطلاعاتی است. اگر در طول یک درخواست، بیش از یک Context مورد استفاده قرار گیرد، بدیهی است به همین تعداد اتصال باز شده به بانک اطلاعاتی، خواهیم داشت. نتیجه‌ی آن فشار بیشتر بر بانک اطلاعاتی و همچنین کاهش سرعت برنامه است؛ از این لحاظ که اتصالات TCP برقرار شده، هزینه‌ی بالایی را به همراه دارند.
          روش تشخیص:
                  private void problem5MoreThan1ConnectionPerRequest() 
                  {
                      using (var context = new MyContext())
                      {
                          var count = context.BlogPosts.ToList();
                      }
                  }
          داشتن متدهایی که در آن‌ها کار وهله سازی و dispose زمینه‌ی EF انجام می‌شود (متدهایی که در آن‌ها new Context وجود دارد).
          راه حل: برای حل این مساله باید از روش‌های تزریق وابستگی‌ها استفاده کرد. یک Context وهله سازی شده‌ی در طول عمر یک درخواست، باید بین وهله‌های مختلف اشیایی که نیاز به Context دارند، زنده نگه داشته شده و به اشتراک گذاشته شود.


          مشکل 6: فرق است بین IList و IEnumerable
          DataContext = from user in context.Users
                                where user.Id>10
                                select user;
          خروجی کوئری LINQ نوشته شده از نوع IEnumerable است. در EF، هربار مراجعه‌ی مجدد به یک کوئری که خروجی IEnumerable دارد، مساوی است با ارزیابی مجدد آن کوئری. به عبارتی، یکبار دیگر این کوئری بر روی بانک اطلاعاتی اجرا خواهد شد و رفت و برگشت مجددی صورت می‌گیرد.
          زمانیکه در حال تهیه‌ی گزارشی هستید، ابزارهای گزارشگیر ممکن است چندین بار از نتیجه‌ی کوئری شما در حین تهیه‌ی گزارش استفاده کنند. بنابراین برخلاف تصور، data binding انجام شده، تنها یکبار سبب اجرای این کوئری نمی‌شود؛ بسته به ساز و کار درونی گزارشگیر، چندین بار ممکن است این کوئری فراخوانی شود.
          راه حل: یک ToList را به انتهای این کوئری اضافه کنید. به این ترتیب از نتیجه‌ی کوئری، بجای اصل کوئری استفاده خواهد شد و در این حالت تنها یکبار رفت و برگشت به بانک اطلاعاتی را شاهد خواهید بود.


          مشکل 7: فرق است بین IQueryable و IEnumerable

          خروجی IEnumerable، یعنی این عبارت را محاسبه کن. خروجی IQueryable یعنی این عبارت را درنظر داشته باش. اگر نیاز است نتایج کوئری‌ها با هم ترکیب شوند، مثلا بر اساس رابط کاربری برنامه، کاربر بتواند شرط‌های مختلف را با هم ترکیب کند، باید از ترکیب IQueryableها استفاده کرد تا سبب رفت و برگشت اضافی به بانک اطلاعاتی نشویم.


          مشکل 8: استفاده از کوئری‌های Like دار
           var list = context.BlogPosts.Where(x => x.Content.Contains("test"))
          این نوع کوئری‌ها که در نهایت به Like در SQL ترجمه می‌شوند، سبب full table scan خواهند شد که کارآیی بسیار پایینی دارند. در این نوع موارد توصیه شده‌است که از روش‌های full text search استفاده کنید.


          مشکل 9: استفاده از Count بجای Any

          اگر نیاز است بررسی کنید مجموعه‌ای دارای مقداری است یا خیر، از Count>0 استفاده نکنید. کارآیی Any و کوئری SQL ایی که تولید می‌کند، به مراتب بیشتر و بهینه‌تر است از Count>0.


          مشکل 10: سرعت insert پایین است

          ردیابی تغییرات را خاموش کرده و از متد جدید AddRange استفاده کنید. همچنین افزونه‌هایی برای Bulk insert نیز موجود هستند.


          مشکل 11: شروع برنامه کند است

          می‌توان تمام مباحث نگاشت‌های پویای کلاس‌های برنامه به جداول و روابط بانک اطلاعاتی را به صورت کامپایل شده در برنامه ذخیره کرد. این مورد سبب بالا رفتن سرعت شروع برنامه خصوصا در حالتیکه تعداد جداول بالا است می‌شود.
          مطالب
          شروع به کار با AngularJS 2.0 و TypeScript - قسمت یازدهم - کار با فرم‌ها - قسمت دوم
          در قسمت قبل، فر‌مهای template driven را بررسی کردیم. همانطور که مشاهده کردید، این نوع فرم‌ها، قابلیت‌های اعتبارسنجی پیشرفته‌ای را به همراه ندارند. برای فرم‌هایی که نیاز به اعتبارسنجی‌های سفارشی دارند، فرم‌های model driven پیشنهاد می‌شوند که در این قسمت بررسی خواهند شد.


          طراحی فرم ثبت نام کاربران در سایت با روش model driven

          در این قسمت قصد داریم فرم ثبت نام کاربران را به همراه اعتبارسنجی‌های پیشرفته‌ای پیاده سازی کنیم. به همین منظور، ابتدا پوشه‌ی جدید App\users را به مثال سری جاری اضافه کنید و سپس سه فایل user.ts، signup-form.component.ts و signup-form.component.html را به آن اضافه نمائید.
          فایل user.ts بیانگر مدل کاربران سایت است؛ با این محتوا:
          export interface IUser {
              id: number;
              name: string;
              email: string;
              password: string;
          }

          قالب فرم یا signup-form.component.html، در حالت ابتدایی آن چنین شکل استانداردی را خواهد داشت و فاقد اعتبارسنجی خاصی است:
          <form>
              <div class="form-group">
                  <label form="name">Username</label>
                  <input id="name" type="text" class="form-control" />
              </div>
              <div class="form-group">
                  <label form="email">Email</label>
                  <input id="email" type="text" class="form-control" />
              </div>
              <div class="form-group">
                  <label form="password">Password</label>
                  <input id="password" type="password" class="form-control" />
              </div>
              <button class="btn btn-primary" type="submit">Submit</button>
          </form>
          اکنون می‌خواهیم این فرم را به یک فرم AngularJS 2.0 ارتقاء دهیم. بنابراین نیاز است اشیاء Control و ControlGroup را ایجاد کنیم و اینبار نمی‌خواهیم AngularJS 2.0 مانند قسمت قبلی، به صورت خودکار (و ضمنی)، این اشیاء را برای ما ایجاد کند. می‌خواهیم آن‌ها را با کدنویسی (به صورت صریح) ایجاد کنیم تا بتوانیم بر روی آن‌ها کنترل بیشتری داشته باشیم.
          بنابراین ابتدا کلاس کامپوننت این فرم را در فایل signup-form.component.ts به نحو ذیل تکمیل کنید:
          import { Component } from '@angular/core';
          import { Control, ControlGroup, Validators } from '@angular/common';
           
          @Component({
              selector: 'signup-form',
              templateUrl: 'app/users/signup-form.component.html'
          })
          export class SignupFormComponent {
              form = new ControlGroup({
                  name: new Control('', Validators.required),
                  email: new Control('', Validators.required),
                  password: new Control('', Validators.required)
              });
           
              onSubmit(): void {
                  console.log(this.form.value);
              }
          }
          و همچنین پیام‌های اعتبارسنجی اولیه را نیز به نحو زیر به فایل signup-form.component.html اضافه می‌کنیم:
          <form [ngFormModel]="form" (ngSubmit)="onSubmit()">
              <div class="form-group">
                  <label form="name">Username</label>
                  <input id="name" type="text" class="form-control"
                         ngControl="name"/>
                  <label class="text-danger" *ngIf="!form.controls['name'].valid">
                      Username is required.
                  </label>
              </div>
              <div class="form-group">
                  <label form="email">Email</label>
                  <input id="email" type="text" class="form-control"
                         ngControl="email" #email="ngForm"/>
                  <label class="text-danger" *ngIf="email.touched && !email.valid">
                      Email is required.
                  </label>
              </div>
              <div class="form-group">
                  <label form="password">Password</label>
                  <input id="password" type="password" class="form-control"
                         ngControl="password" #password="ngForm"/>
                  <label class="text-danger" *ngIf="password.touched && !password.valid">
                      Password is required.
                  </label>
              </div>
              <button class="btn btn-primary" type="submit">Submit</button>
          </form>
          توضیحات:
          تفاوت مهم این فرم و اعتبارسنجی‌هایش با قسمت قبل، در ایجاد اشیاء Control و ControlGroup به صورت صریح است:
          form = new ControlGroup({
              name: new Control('', Validators.required),
              email: new Control('', Validators.required),
              password: new Control('', Validators.required)
          });
          کلا‌س‌های Control، ControlGroup و Validators در ماژول angular/common@ تعریف شده‌اند. بنابراین import متناظری نیز به ابتدای فایل اضافه شده‌است:
           import { Control, ControlGroup, Validators } from '@angular/common';

          یک نکته
          اگر محل قرارگیری کلاسی را فراموش کردید، آن‌را در مستندات AngularJS 2.0 ذیل قسمت API Review جستجو کنید. نتیجه‌ی جستجو، به همراه نام ماژول کلاس‌ها نیز می‌باشد.


          خاصیت عمومی form که با new ControlGroup تعریف شده‌است، حاوی تعاریف صریح کنترل‌های موجود در فرم خواهد بود. در اینجا سازنده‌ی ControlGroup، یک شیء را می‌پذیرد که کلیدهای آن، همان نام کنترل‌های تعریف شده‌ی در قالب فرم و مقدار هر کدام، یک Control جدید است که پارامتر اول آن یک مقدار پیش فرض و پارامتر دوم، اعتبارسنجی مرتبطی را تعریف می‌کند (این اعتبارسنجی معرفی شده، یک متد استاتیک در کلاس توکار Validators است).
          بنابراین چون سه المان ورودی، در فرم جاری تعریف شده‌اند، سه کلید جدید هم نام نیز در پارامتر ورودی ControlGroup ذکر گردیده‌اند.

          اکنون که خاصیت عمومی form، در کلاس کامپوننت فوق تعریف شد، آن‌را در قالب فرم، به ngFormModel بایند می‌کنیم:
          <form [ngFormModel]="form" (ngSubmit)="onSubmit()">
          به این ترتیب به AngularJS 2.0 اعلام می‌کنیم که ControlGroup و Controlهای آن‌را به صورت صریح ایجاد کرده‌ایم و بجای وهله‌‌های پیش فرض خود، از خاصیت عمومی form کلاس کامپوننت، این مقادیر را تامین کن.
          مراحل بعد آن، با مراحلی که در قسمت قبل بررسی کردیم، تفاوتی ندارند:
          الف) در اینجا به هر المان موجود، یک ngControl نسبت داده شده‌است تا هر المان را تبدیل به یک کنترل AngularJS2 2.0 کند.
          ب) به هر المان، یک متغیر محلی شروع شده با # نسبت داده شده‌است تا با اتصال آن به ngForm بتوان به ngControl تعریف شده دسترسی پیدا کرد.
          البته اکنون می‌توان از خاصیت form متصل به ngFormModel نیز بجای تعریف این متغیر محلی، به نحو ذیل استفاده کرد:
           <label class="text-danger" *ngIf="!form.controls['name'].valid">
          ج) از این متغیر محلی جهت نمایش یا عدم نمایش پیام‌های خطای اعتبارسنجی، در ngIfهای تعریف شده، استفاده شده‌است.
          د) و در آخر متد onSumbit موجود در کلاس کامپوننت را به رخداد ngSubmit متصل کرده‌ایم. همانطور که ملاحظه می‌کنید اینبار دیگر پارامتری را به آن ارسال نکرده‌ایم. از این جهت که خاصیت form موجود در سطح کلاس، اطلاعات کاملی را از اشیاء موجود در آن دارد و در متد onSubmit کلاس، به آن دسترسی داریم.
              onSubmit(): void {
                  console.log(this.form.value);
              }
          this.form.value حاوی یک شیء است که تمام مقادیر پر شده‌ی فرم را به همراه دارد.

          بنابراین تا اینجا تنها تفاوت فرم جدید تعریف شده با قسمت قبل، تعریف صریح ControlGroup و کنتر‌ل‌های آن در کلاس کامپوننت و اتصال آن به ngFormModel است. به این نوع فرم‌ها، فرم‌های model driven هم می‌گویند.


          نمایش فرم افزودن کاربران توسط سیستم Routing

          با نحوه‌ی تعریف مسیریابی‌ها در قسمت نهم آشنا شدیم. برای نمایش فرم افزودن کاربران، می‌توان تغییرات ذیل را به فایل app.component.ts اعمال کرد:
          //same as before...
          import { SignupFormComponent } from './users/signup-form.component';
           
          @Component({
              //same as before…
              template: `
                          //same as before…                    
                          <li><a [routerLink]="['AddUser']">Add User</a></li>
                         //same as before…
              `,
              //same as before…
          })
          @RouteConfig([
              //same as before…    
              { path: '/adduser', name: 'AddUser', component: SignupFormComponent }
          ])
          //same as before...
          ابتدا به RouteConfig، مسیریابی کامپوننت فرم افزودن کاربران، اضافه شده‌است. سپس ماژول این کلاس در ابتدای فایل import شده و در آخر routerLink آن به قالب سایت و منوی بالای سایت اضافه شده‌است.


          معرفی کلاس FormBuilder

          روش دیگری نیز برای ساخت ControlGroup و کنترل‌های آن با استفاده از کلاس و سرویس فرم ساز توکار AngularJS 2.0 وجود دارد:
          import { Control, ControlGroup, Validators, FormBuilder } from '@angular/common';
          
          form: ControlGroup;
           
          constructor(formBuilder: FormBuilder) {
              this.form = formBuilder.group({
                  name: ['', Validators.required],
                  email: ['', Validators.required],
                  password: ['', Validators.required]
              });
          }
          کلاس و سرویس FormBuilder نیز در ماژول angular/common@ قرار دارد. برای استفاده‌ی از آن، آن‌را در سازنده‌ی کلاس تزریق کرده و سپس از متد group آن استفاده می‌کنیم. نحوه‌ی تعریف کلی اعضای آن با اعضای ControlGroup یکی است؛ با این تفاوت که اینبار بجای ذکر new Control، یک آرایه تعریف می‌شود که دقیقا اعضای آن، همان پارامترهای شیء کنترل هستند. این روش در کل خلاصه‌تر است و در آن تعریف چندین گروه مختلف، ساده‌تر می‌باشد. همچنین با روش تزریق وابستگی‌های بکار رفته‌ی در این فریم ورک نیز سازگاری بیشتری دارد.


          پیاده سازی اعتبارسنجی سفارشی

          فرض کنید می‌خواهیم ورود نام کاربر‌های دارای فاصله را غیر معتبر اعلام کنیم. برای این منظور فایل جدید usernameValidators.ts را به پوشه‌ی app\users اضافه کنید؛ با این محتوا:
          import { Control } from '@angular/common';
           
          export class UsernameValidators {
              static cannotContainSpace(control: Control) {
                  if (control.value.indexOf(' ') >= 0) {
                      return { cannotContainSpace: true };
                  }
                  return null;
              }
          }
          کلاس UsernameValidators می‌تواند شامل تمام اعتبارسنجی‌های سفارشی خاصیت نام کاربری باشد. به همین جهت نام آن جمع است و به s ختم شد‌ه‌است.
          هر متد پیاده سازی کننده‌ی یک اعتبار سنجی سفارشی در این کلاس، استاتیک تعریف می‌شود؛ با نام دلخواهی که مدنظر است.
          پارامتر ورودی این متدهای استاتیک، یک وهله از شیء کنترل است که توسط آن می‌توان برای مثال به خاصیت value آن دسترسی یافت و بر این اساس منطق اعتبارسنجی خود را پیاده سازی نمود. به همین جهت import آن نیز به ابتدای فایل جاری اضافه شده‌است.
          خروجی این متد دو حالت دارد:
          الف) اگر null باشد، یعنی اعتبارسنجی موفقیت آمیز بوده‌است.
          ب) اگر اعتبارسنجی با شکست مواجه شود، خروجی این متد یک شیء خواهد بود که کلید آن، نام اعتبارسنجی مدنظر است و مقدار این کلید، هر چیزی می‌تواند باشد؛ یک true و یا یک شیء دیگر که اطلاعات بیشتری را در مورد این شکست ارائه دهد.

          برای مثال اگر اعتبارسنج توکار required با شکست مواجه شود، یک چنین شی‌ءایی را بازگشت می‌دهد:
           { required:true }
          و یا اگر اعتبارسنج minlength باشکست مواجه شود، اطلاعات بیشتری را در قسمت مقدار این کلید بازگشتی، ارائه می‌دهد:
          {
            minlength : {
               requiredLength : 3,
               actualLength : 1
            }
          }
          در کل اینکه چه چیزی را بازگشت دهید، بستگی به طراحی مدنظر شما دارد.

          پس از پیاده سازی یک اعتبارسنجی سفارشی، برای استفاده‌ی از آن، ابتدا ماژول آن‌را به ابتدای ماژول signup-form.component.ts اضافه می‌کنیم:
           import { UsernameValidators } from './usernameValidators';
          پس از آن، شبیه به افزودن متد استاتیک توکار Validators.required، این متد جدید را به لیست اعتبارسنجی‌های خاصیت name اضافه می‌کنیم. از آنجائیکه پیشتر المان دوم این آرایه مقدار دهی شده‌است، برای ترکیب چندین اعتبارسنجی با هم، از متد Validators.compose که آرایه‌ای از متدهای اعتبارسنجی را قبول می‌کند، کمک خواهیم گرفت:
           name: ['', Validators.compose([Validators.required, UsernameValidators.cannotContainSpace])],

          و مرحله‌ی آخر، نمایش یک پیام اعتبارسنجی مناسب و متناظر با متد cannotContainSpace است. برای این منظور فایل signup-form.component.html را گشوده و تغییرات ذیل را اعمال کنید:
          <div class="form-group">
              <label form="name">Username</label>
              <input id="name" type="text" class="form-control"
                     ngControl="name"
                     #name="ngForm" />
              <div *ngIf="name.touched && name.errors">
                  <label class="text-danger" *ngIf="name.errors.required">
                      Username is required.
                  </label>
                  <label class="text-danger" *ngIf="name.errors.cannotContainSpace">
                      Username can't contain space.
                  </label>
              </div>
          </div>
          همانطور که در قسمت قبل نیز عنوان شد، چون اکنون به یک المان، بیش از یک اعتبارسنجی اعمال شده‌است، استفاده از خاصیت valid، بیش از اندازه عمومی بوده و باید از خاصیت errors استفاده کرد. به همین جهت این دو اعتبارسنجی را در یک div محصور کننده قرار می‌دهیم و در صورت وجود خطایی، خاصیت name.errors، دیگر نال نبوده و دو برچسب قرار گرفته‌ی در آن بر اساس شرط‌های ngIf آن، پردازش خواهند شد.
          نام خاصیت بازگشت داده شده‌ی در اعتبارسنجی سفارشی، به عنوان یک خاصیت جدید شیء errors قابل استفاده است؛ مانند name.errors.cannotContainSpace.

          به عنوان تمرین ماژول جدید emailValidators.ts را افزوده و سپس اعتبارسنجی سفارشی بررسی معتبر بودن ایمیل وارد شده را تعریف کنید:
          import {Control} from '@angular/common';
           
          export class EmailValidators {
              static email(control: Control) {
                  var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                  var valid = regEx.test(control.value);
                  return valid ? null : { email: true };
              }
          }
          در ادامه آن‌را به لیست formBuilder.group افزوده و همچنین پیام اعتبارسنجی ویژه‌ای را نیز به قالب فرم اضافه کنید (کدهای کامل آن، در فایل zip انتهای بحث موجود است).


          یک نکته

          اگر نیاز است از regular expressions مانند مثال فوق استفاده شود، می‌توان از متد توکار Validators.pattern نیز استفاده کرد و نیازی به تعریف یک متد جداگانه برای آن وجود ندارد؛ مگر اینکه نیاز به بازگشت شیء خطای کاملتری با خواص بیشتری وجود داشته باشد.


          اعتبارسنجی async یا اعتبارسنجی از راه دور (remote validation)

          یک سری از اعتبارسنجی‌ها را در سمت کلاینت می‌توان تکمیل کرد؛ مانند بررسی معتبر بودن فرمت ایمیل وارده. اما تعدادی دیگر، نیاز به اطلاعاتی از سمت سرور دارند. برای مثال آیا نام کاربری در حال ثبت، تکراری است یا خیر؟ این نوع اعتبارسنجی‌ها در رده‌ی async validation قرار می‌گیرند.
          سازنده‌ی شیء Control در AngularJS 2.0 که در مثال‌های بالا نیز مورد استفاده قرار گرفت، پارامتر اختیاری سومی را نیز دارد که یک AsyncValidatorFn را قبول می‌کند:
           control(value: Object, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : Control
          پیاده سازی async validators، بسیار شبیه به سایر اعتبارسنج‌ها هستند. اما از آنجائیکه نیاز به کار با سرور را دارند، استاتیک تعریف کردن آن‌ها، سبب قطع شدن دسترسی آن‌ها از context کلاس جاری شده و امکان تزریق وابستگی‌ها را از دست خواهیم داد. برای مثال دیگر نمی‌توان به سادگی، سرویس دریافت اطلاعات کاربران را در اینجا تزریق کرد. یک راه حل رفع این مشکل، تعریف همان متد اعتبارسنج در کلاس کامپوننت فرم است:
          nameShouldBeUnique(control: Control) {
              let name: string = control.value;
              return new Promise((resolve) => {
                  this._userService.isUserNameUnique(<IUser>{ "name": name }).subscribe(
                      (result: IResult) => {
                          resolve(                    
                              result.result ? null : { 'nameShouldBeUnique': true }
                          );
                      },
                      error => {
                          resolve(null);
                      }
                  );
              });
          }
          و سپس فراخوانی آن به صورت ذیل، به عنوان سومین عنصر آرایه‌ی تعریف شده:
          this.form = _formBuilder.group({
              name: ['', Validators.compose([
                  Validators.required,
                  UsernameValidators.cannotContainSpace
              ]),
                  (control: Control) => this.nameShouldBeUnique(control)],
          در اینجا با استفاده از arrow functions، امکان دسترسی به این متد تعریف شده‌ی در سطح کلاس، که استاتیک هم نیست، وجود خواهد داشت. به این ترتیب دیگر context کلاس را از دست نداده‌ایم و اینبار می‌توان به this._userService، که آن‌را در ادامه تکمیل خواهیم کرد، بدون مشکلی دسترسی یافت.
          امضای متد nameShouldBeUnique تفاوتی با سایر متدهای اعتبارسنج نداشته و پارامتر ورودی آن، همان کنترل است که توسط آن می‌توان به مقدار وارد شده‌ی توسط کاربر دسترسی یافت. اما تفاوت اصلی آن در اینجا است که این متد باید یک شیء Promise را بازگشت دهد. یک Promise، بیانگر نتیجه‌ی یک عملیات async است. در اینجا دو حالت resolve و error را باید پیاده سازی کرد. در حالت error، یعنی عملیات async صورت گرفته با شکست مواجه شده‌است و در حالت resolve، یعنی عملیات تکمیل شده و اکنون می‌خواهیم نتیجه‌ی نهایی را بازگشت دهیم. نتیجه نهایی بازگشت داده شده‌ی در اینجا، همانند سایر validators است و اگر نال باشد، یعنی اعتبارسنجی موفقیت آمیز بوده و اگر یک شیء را بازگشت دهیم، یعنی اعتبارسنجی با شکست مواجه شده‌است.

          این Promise، از یک سرویس تعریف شده‌ی در فایل جدید user.service.ts استفاده می‌کند:
          import { Injectable } from '@angular/core';
          import { Http, Response } from '@angular/http';
          import { Observable } from 'rxjs/Observable';
          import { Headers, RequestOptions } from '@angular/http';
          import { IUser } from  './user';
          import { IResult } from './result';
           
          @Injectable()
          export class UserService {
              private _checkUserUrl = '/home/checkUser';
           
              constructor(private _http: Http) { }
           
              private handleError(error: Response) {
                  console.error(error);
                  return Observable.throw(error.json().error || 'Server error');
              }
           
              isUserNameUnique(user: IUser): Observable<IResult> {
                  let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
                  let options = new RequestOptions({ headers: headers });
           
                  return this._http.post(this._checkUserUrl, JSON.stringify(user), options)
                      .map((response: Response) => <IResult>response.json())
                      .do(data => console.log("User: " + JSON.stringify(data)))
                      .catch(this.handleError);
              }
          }
          با نحوه‌ی تعریف سرویس‌ها و همچنین کار با سرور و دریافت اطلاعات، در قسمت‌های قبلی بیشتر آشنا شدیم. در اینجا یک درخواست get، به آدرس home/checkuser سرور، ارسال می‌شود. سپس نتیجه‌ی آن در قالب اینترفیس IResult بازگشت داده خواهد شد. این اینترفیس را در فایل result.ts به صورت ذیل تعریف کرده‌ایم:
          export interface IResult {
              result: boolean;
          }

          کدهای سمت سرور برنامه که کار بررسی یکتا بودن نام کاربری را انجام می‌دهند، به صورت ذیل در فایل Controllers\HomeController.cs تعریف شده‌اند:
          namespace MVC5Angular2.Controllers
          {
              public class HomeController : Controller
              {
                  [HttpPost]
                  public ActionResult CheckUser(User user)
                  {
                      var isUnique = new { result = true };
                      if (user.Name?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
                      {
                          isUnique = new { result = false };
                      }
           
                      return new ContentResult
                      {
                          Content = JsonConvert.SerializeObject(isUnique, new JsonSerializerSettings
                          {
                              ContractResolver = new CamelCasePropertyNamesContractResolver()
                          }),
                          ContentType = "application/json",
                          ContentEncoding = Encoding.UTF8
                      };
                  }
              }
          }
          در اینجا اگر نام کاربری وارد شده مساوی Vahid بود، یک شیء anonymous، مطابق امضای اینترفیس IResult سمت کاربر (همان فایل result.ts عنوان شده) بازگشت داده می‌شود.

          بنابراین تا اینجا مسیر سمت سرور home/checkuser تکمیل شده‌است. این مسیر توسط سرویس کاربر صدا زده شده و اگر نام کاربری وارد شده موجود باشد، نتیجه‌ای را مطابق امضای قرارداد IResult سفارشی ما بازگشت می‌دهد.
          پس از آن مجددا به فایل signup-form.component.ts مراجعه کرده و سرویس جدید UserService را به سازنده‌ی آن تزریق کرده‌ایم. همچنین قسمت providers این کامپوننت را هم جهت تکمیل اطلاعات تزریق کننده‌ی توکار AngularJS 2.0 مقدار دهی کرده‌ایم. البته همانطور که در مبحث تزریق وابستگی‌ها نیز عنوان شد، اگر این سرویس قرار نیست در کلاس دیگری استفاده شود، نیازی نیست تا آن‌را در بالاترین سطح ممکن و در فایل app.component.ts ثبت و معرفی کرد:
          @Component({
              selector: 'signup-form',
              templateUrl: 'app/users/signup-form.component.html',
              providers: [ UserService ]
          })
          export class SignupFormComponent {
           
              constructor(private _formBuilder: FormBuilder, private _userService: UserService) {
          پس از ترزیق وابستگی private _userService: UserService، اکنون این سرویس به سادگی و به حالت متداولی در متد nameShouldBeUnique(control: Control) قابل دسترسی خواهد بود و از آن می‌توان جهت اعتبارسنجی‌های غیرهمزمان استفاده کرد.

          اکنون که کدهای فعال سازی اعتبارسنجی از راه دور ما تکمیل شده‌است، به فایل signup-form.component.html مراجعه کرده و پیام مناسبی را نمایش خواهیم داد:
          <div *ngIf="name.touched && name.errors">
              <label class="text-danger" *ngIf="name.errors.required">
                  Username is required.
              </label>
              <label class="text-danger" *ngIf="name.errors.cannotContainSpace">
                  Username can't contain space.
              </label>
              <label class="text-danger" *ngIf="name.errors.nameShouldBeUnique">
                  This username is already taken.
              </label>
          </div>
          در ادامه اگر برنامه را اجرا کنید، با ورود نام کاربری Vahid، یک چنین پیام خطایی، مشاهده خواهد شد:



          نمایش پیام loading در حین انجام اعتبارسنجی از راه دور

          شاید بد نباشد که در حین انجام عملیات اعتبارسنجی از راه دور و ارسال درخواستی به سرور و بازگشت نتیجه‌ی آن، یک پیام loading را نیز نمایش داد. برای انجام این‌کار نیاز است تغییرات ذیل را به فایل signup-form.component.html اضافه کنیم:
          <input id="name" type="text" class="form-control"
                 ngControl="name"
                 #name="ngForm" />
          <div *ngIf="name.control.pending">
              Checking server, Please wait ...
          </div>
          در اینجا یک div جدید را ذیل المان ورود نام کاربری اضافه کرده‌ایم. همچنین نحوه‌ی نمایش آن‌را با دسترسی به متغیر name# و کنترل منتسب، به آن مدیریت می‌کنیم. اگر عملیات async ایی بر روی این کنترل در حال اجرا باشد، Promise تعریف شده، وضعیت pending را بازگشت می‌دهد. به همین جهت می‌توان از این خاصیت، جهت نمایش دادن یا مخفی کردن عبارت و یا تصویری استفاده کرد.

           
          اعتبارسنجی ترکیبی در حین submit یک فرم

          فرض کنید می‌خواهید منطقی را که حاصل اعتبارسنجی تمام فیلدهای فرم است (و نه هر کدام به تنهایی)، در حین submit آن اعمال کنید. برای مثال آیا ترکیب نام کاربری و کلمه‌ی عبور شخصی در حین login معتبر است یا خیر؟ در این حالت پس از بررسی‌های لازم در متد onSubmit، می‌توان با استفاده از متد find شیء form، به یکی از کنترل‌های فرم دسترسی یافت و سپس با استفاده از متد setErrors، خطای اعتبارسنجی سفارشی را به آن اضافه کرد:
          onSubmit(): void {
              console.log(this.form.value);
           
              this.form.find('name').setErrors({
                  invalidData : true
              }); 
          }
          سپس در سمت قالب این کامپوننت، نحوه‌ی نمایش این اعتبارسنجی سفارشی، همانند قبل است:
          <div *ngIf="name.touched && name.errors">
              <label class="text-danger" *ngIf="name.errors.invalidData">
                  Check the inputs....
              </label>
          </div>


          اتصال المان‌های فرم به مدلی جهت ارسال به سرور

          اکنون که دسترسی به خاصیت this.form را داریم و این خاصیت توسط [ngFormModel] به تمام اشیاء تعریف شده‌ی در فرم و تغییرات آن‌ها دسترسی دارد، می‌توان از آن برای دسترسی به شیء‌ایی که حاوی مدل فرم است، استفاده کرد. برای نمونه در مثال فوق، خاصیت value آن، چنین خروجی را دارد:
            { name="VahidN", email="email@site.com", password="123"}
          بنابراین برای ارسال اطلاعات این فرم به سرور، تنها کافی است این شیء را ارسال کنیم. به همین جهت در فایل user.service.ts، به کلاس سرویس کاربران، متد addUser را اضافه می‌کنیم:
          import { Injectable } from '@angular/core';
          import { Http, Response } from '@angular/http';
          import { Observable } from 'rxjs/Observable';
          import { Headers, RequestOptions } from '@angular/http';
          import { IUser } from  './user';
          import { IResult } from './result';
           
          @Injectable()
          export class UserService {
              private _addUserUrl = '/home/addUser';
           
              constructor(private _http: Http) { }
           
              private handleError(error: Response) {
                  console.error(error);
                  return Observable.throw(error.json().error || 'Server error');
              }
           
              addUser(user: IUser): Observable<IUser> {
                  let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
                  let options = new RequestOptions({ headers: headers });
           
                  return this._http.post(this._addUserUrl, JSON.stringify(user), options)
                      .map((response: Response) => <IUser>response.json())
                      .do(data => console.log("User: " + JSON.stringify(data)))
                      .catch(this.handleError);
              }
          }
          کدهای سمت سرور آن در فایل Controllers\HomeController.cs نیز چنین شکلی را می‌توانند داشته باشند:
          [HttpPost]
          public ActionResult AddUser(User user)
          {
              user.Id = 1; //todo: save user and get id from db
           
              return new ContentResult
              {
                  Content = JsonConvert.SerializeObject(user, new JsonSerializerSettings
                  {
                      ContractResolver = new CamelCasePropertyNamesContractResolver()
                  }),
                  ContentType = "application/json",
                  ContentEncoding = Encoding.UTF8
              };
          }
          و پس از آن کدهای متد onSubmit فایل signup-form.component.ts برای ارسال این شیء به صورت ذیل خواهند بود:
          onSubmit(): void {
              console.log(this.form.value);
           
              /*this.form.find('name').setErrors({
                      invalidData : true
                  });*/
           
              this._userService.addUser(<IUser>this.form.value)
                  .subscribe((user: IUser) => {
                      console.log(`ID: ${user.id}`);
                  });
          }


          کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: (این کدها مطابق نگارش RC 1 هستند)
          MVC5Angular2.part11.zip


          خلاصه‌ی بحث

          برای اینکه بتوان کنترل بیشتری را بر روی المان‌های فرم داشت، ابتدا سرویس FormBuilder را در سازنده‌ی کلاس کامپوننت فرم تزریق می‌کنیم. سپس با استفاده از متد group آن، المان‌های فرم را به صورت کلیدهای شیء پارامتر آن تعریف می‌کنیم. در اینجا می‌توان اعتبارسنجی‌های توکار AngularJS 2.0 را که در کلاس پایه‌ی Validators مانند Validators.required وجود دارند، تعریف کرد. با استفاده از متد compose آن‌ها را ترکیب نمود و یا پارامتر سومی را جهت اعتبارسنجی‌های async اضافه نمود. در این حالت شیء form تعریف شده به صورت [ngFormModel] به قالب فرم متصل می‌شود و از تغییرات آن آگاه خواهد شد.
          مطالب
          کار با اشیاء COM در NET Core.
          COM، یک فناوری قدیمی و مختص به ویندوز است؛ هرچند NET Core. به صورت چندسکویی طراحی شده‌است، اما حداقل نگارش ویندوز آن، از کار با اشیاء COM پشتیبانی می‌کند. البته باید درنظر داشت که نگارش 1x آن اینچنین نیست و پشتیبانی از آن، از نگارش 2x شروع شده‌است.


          محدودیت‌های کار با اشیاء COM در NET Core 2x.

          پیاده سازی پشتیبانی از اشیاء COM در NET Core 2x. به همراه اینترفیس IDispatch نیست. به این معنا که از مفهوم «late binding» پشتیبانی نمی‌کند. حدود 10 سال قبل در زمان ارائه‌ی C# 4.0، واژه‌ی کلیدی dynamic نیز ارائه شد که یکی از مهم‌ترین اهداف آن، ساده سازی کار با اشیاء COM و پشتیبانی از Late binding بود:
          dynamic excel = Activator.CreateInstance(Type.GetTypeFromProgID("Excel.Application", true));
          excel.Visible = true;
          Console.WriteLine("Press Enter to close Excel.");
          Console.ReadLine();
          excel.Quit();
          این قطعه کد که در Full .NET Framework بدون مشکل اجرا می‌شود، در NET Core 2x. با خطای زیر متوقف خواهد شد:
           System.__ComObject does not contain a definition for 'Visible'
          البته اگر به task manager ویندوز در این حالت مراجعه کنید، مشاهده خواهید کرد که Excel.exe واقعا اجرا شده‌است؛ اما چون پیاده سازی IDispatch در اینجا وجود ندارد، امکان کار با واژه‌ی کلیدی dynamic و late binding برای دسترسی به خاصیت Visible پشتیبانی نمی‌شود.

          یک نکته: NET Core 3x. از Late binding پشتیبانی می‌کند.


          روش کار با اشیاء COM در NET Core 2x.

          چون NET Core 2x. از late binding اشیاء COM پشتیبانی نمی‌کند، می‌توان در اینجا از روش قدیمی‌تر کار با اشیاء COM که استفاده‌ی از «Interop assemblies» نام دارد، استفاده کرد. Interop assemblies در حقیقت محصور کننده‌های اشیاء COM هستند که امکان کار مستقیم با آن‌ها را از طریق early binding میسر می‌کنند. در یک چنین حالتی، کدهای فوق برای دسترسی به اشیاء COM کار با اکسل، به صورت زیر که early binding نام دارد، تغییر می‌کند:
          using Excel = Microsoft.Office.Interop.Excel;
          // ...
          var excel = new Excel.Application();
          excel.Visible = true;
          Console.WriteLine("Press Enter to close Excel.");
          Console.ReadLine();
          excel.Quit();


          روش تولید Interop assemblies

          هنوز خود NET Core. روشی را برای تولید Interop assemblies ارائه نداده‌است و تولید آن‌ها یکی از معدود مواردی است که نیاز به نصب Visual Studio را دارد. برای این منظور یک پروژه‌ی خالی (از هر نوعی) را که بر اساس NET Framework 4x. تهیه می‌شود، در VS آغاز کنید و سپس در solution explorer بر روی پروژه‌ی ایجاد شده کلیک راست کرده و گزینه‌ی Add > Reference را انتخاب کنید. در صفحه‌ی باز شده، گزینه‌ی COM آن‌را باید انتخاب کنید. در اینجا است که می‌توانید با انتخاب یکی از موارد، ارجاعی را به آن شیء COM اضافه کنید.
          پس از اینکار:
          - ابتدا این ارجاع اضافه شده را در solution explorer انتخاب کرده و در پایین صفحه، در قسمت برگه‌ی خواص آن، گزینه‌ی «Embed Interop Types» آن‌را به false تنظیم کنید.
          - سپس یکبار پروژه را نیز کامپایل کنید.
          این مراحل سبب تولید یک فایل dll خواهند شد که Interop assembly نام دارد و هم در برنامه‌های NET. و هم NET Core.، قابل استفاده‌است.


          روش استفاده از Interop assemblies در برنامه‌های NET Core.

          اکنون که یک فایل dll را از شیء COM انتخابی، در یک پروژه‌ی مجزای مبتنی بر NET 4x. تولید کردیم، روش استفاده‌ی از آن در یک برنامه‌ی دیگر مبتنی بر NET Core. به صورت زیر است:
            <ItemGroup>
              <Reference Include="Interop.WIA">
                <HintPath>..\DNTScanner.Core.TypeLibrary\bin\Debug\Interop.WIA.dll</HintPath>
                <EmbedInteropTypes>True</EmbedInteropTypes>
              </Reference>
            </ItemGroup>
          فایل csproj را گشوده و ابتدا نام اسمبلی را منهای dll آن در قسمت Reference Include ذکر کنید. سپس مسیر فایل dll تولید شده‌ی در قسمت قبل را به صورت HintPath مشخص کنید. اگر می‌خواهید این dll را به صورت جداگانه‌ای به همراه برنامه‌ی خود توزیع نکنید، خاصیت EmbedInteropTypes را در اینجا به true تنظیم کنید. در این حالت کامپایلر، قسمت‌هایی از Interop.WIA.dll را که در برنامه‌ی شما استفاده شده‌است، جزئی از خروجی نهایی آن می‌کند.

          یک نکته: اگر EmbedInteropTypes را به true تنظیم کردید، نیاز به بسته‌ی Microsoft.CSharp را نیز خواهید داشت:
            <ItemGroup Condition=" '$(TargetFramework)' == 'net40' ">
              <Reference Include="Microsoft.CSharp" />
            </ItemGroup>
            <ItemGroup Condition="'$(TargetFramework)' == 'netstandard2.0'">
              <PackageReference Include="Microsoft.CSharp" Version="4.5.0" />
            </ItemGroup>


          روش دیگر استفاده از Interop assemblies در برنامه‌های NET Core.

          روش فوق، جهت کار با فایل‌های dll ای است که خودمان تولید کرده‌ایم. برای سایر حالاتی که این موارد در سیستم نصب شده‌اند (مانند Office Primary Interop Assemblies (PIA))، پس از افزودن ارجاعی به COM reference مدنظر، فایل csproj همان پروژه‌ی NET 4x. را باز کرده و قسمت COMReference آن‌را در اینجا (در فایل csproj پروژه‌ی NET Core.) کپی کنید:
          <Project Sdk="Microsoft.NET.Sdk">
          <PropertyGroup>
              <OutputType>Exe</OutputType>
              <TargetFramework>netcoreapp3.0</TargetFramework>
            </PropertyGroup>
            
            <!--
              The following 'COMReference' items were copied from a .NET Framework project.
              They were added by using the Visual Studio COM References window. 
              See https://docs.microsoft.com/en-us/visualstudio/ide/managing-references-in-a-project?view=vs-2017.
              Observe the 'EmbedInteropTypes' tag value.
              See https://docs.microsoft.com/en-us/visualstudio/msbuild/common-msbuild-project-items?view=vs-2017#comreference
            -->
            <ItemGroup>
              <COMReference Include="Microsoft.Office.Core">
                <Guid>{2DF8D04C-5BFA-101B-BDE5-00AA0044DE52}</Guid>
                <VersionMajor>2</VersionMajor>
                <VersionMinor>8</VersionMinor>
                <Lcid>0</Lcid>
                <WrapperTool>primary</WrapperTool>
                <Isolated>False</Isolated>
                <EmbedInteropTypes>True</EmbedInteropTypes>
              </COMReference>
              <COMReference Include="Microsoft.Office.Interop.Excel">
                <Guid>{00020813-0000-0000-C000-000000000046}</Guid>
                <VersionMajor>1</VersionMajor>
                <VersionMinor>9</VersionMinor>
                <Lcid>0</Lcid>
                <WrapperTool>primary</WrapperTool>
                <Isolated>False</Isolated>
                <EmbedInteropTypes>True</EmbedInteropTypes>
              </COMReference>
              <COMReference Include="VBIDE">
                <Guid>{0002E157-0000-0000-C000-000000000046}</Guid>
                <VersionMajor>5</VersionMajor>
                <VersionMinor>3</VersionMinor>
                <Lcid>0</Lcid>
                <WrapperTool>primary</WrapperTool>
                <Isolated>False</Isolated>
                <EmbedInteropTypes>True</EmbedInteropTypes>
              </COMReference>
            </ItemGroup>
          </Project>
          اطلاعات COMReference فوق از یک پروژه‌ی NET 4x. و فایل csproj آن پس از افزودن ارجاعی به اشیاء COM آفیس و اکسل، در اینجا کپی شده‌اند.
          سپس یک نمونه از MS Office automation را توسط اشیاء COM آن به صورت زیر می‌توان پیاده سازی کرد:
          using System;
          using System.Reflection;
          using Excel = Microsoft.Office.Interop.Excel;
          namespace ExcelDemo
          {
              class Program
              {
                  public static void Main(string[] args)
                  {
                      Excel.Application excel;
                      Excel.Workbook workbook;
                      Excel.Worksheet sheet;
                      Excel.Range range;
          try
                      {
                          // Start Excel and get Application object.
                          excel = new Excel.Application();
                          excel.Visible = true;
          // Get a new workbook.
                          workbook = excel.Workbooks.Add(Missing.Value);
                          sheet = (Excel.Worksheet)workbook.ActiveSheet;
          // Add table headers going cell by cell.
                          sheet.Cells[1, 1] = "First Name";
                          sheet.Cells[1, 2] = "Last Name";
                          sheet.Cells[1, 3] = "Full Name";
                          sheet.Cells[1, 4] = "Salary";
          // Format A1:D1 as bold, vertical alignment = center.
                          sheet.get_Range("A1", "D1").Font.Bold = true;
                          sheet.get_Range("A1", "D1").VerticalAlignment =
                          Excel.XlVAlign.xlVAlignCenter;
          // Create an array to multiple values at once.
                          string[,] saNames = new string[5, 2];
          saNames[0, 0] = "John";
                          saNames[0, 1] = "Smith";
                          saNames[1, 0] = "Tom";
                          saNames[1, 1] = "Brown";
                          saNames[2, 0] = "Sue";
                          saNames[2, 1] = "Thomas";
                          saNames[3, 0] = "Jane";
                          saNames[3, 1] = "Jones";
                          saNames[4, 0] = "Adam";
                          saNames[4, 1] = "Johnson";
          // Fill A2:B6 with an array of values (First and Last Names).
                          sheet.get_Range("A2", "B6").Value2 = saNames;
          // Fill C2:C6 with a relative formula (=A2 & " " & B2).
                          range = sheet.get_Range("C2", "C6");
                          range.Formula = "=A2 & \" \" & B2";
          // Fill D2:D6 with a formula(=RAND()*100000) and apply format.
                          range = sheet.get_Range("D2", "D6");
                          range.Formula = "=RAND()*100000";
                          range.NumberFormat = "$0.00";
          // AutoFit columns A:D.
                          range = sheet.get_Range("A1", "D1");
                          range.EntireColumn.AutoFit();
          // Make sure Excel is visible and give the user control
                          // of Microsoft Excel's lifetime.
                          excel.Visible = true;
                          excel.UserControl = true;
                      }
                      catch (Exception e)
                      {
                          Console.WriteLine($"Error: {e.Message} Line: {e.Source}");
                      }
                  }
              }
          }
          مثال فوق، معادل NET Core. این مثال قدیمی است:
          How to automate Microsoft Excel from Microsoft Visual C#.NET
          مطالب
          استفاده از ماژول Remote
          همانطور که در مقاله «آغاز کار با الکترون» گفتیم، فرآیند اصلی، تنها فرآیندی است که توانایی استفاده از گرافیک بومی سیستم عامل را دارد. ولی بسیاری از اوقات نیاز است در سمت renderProcess توانایی انجام این کار‌ها را داشته باشیم. در این مقاله قصد داریم که همان دیالوگ‌های open و save را از طریق Render Process اجرا نماییم.
          الکترون برای اینکار از یک ماژول به نام remote استفاده می‌کند که وظیفه آن برقراری ارتباط IPC از Render Process به Main Process است و مواردی را که لازم است، در اختیار شما قرار می‌دهد. در این شیوه لازم نیست شما مرتبا به ارسال پیام بپردازید، بلکه این ارتباطات را ماژول remote فراهم می‌کند. این مورد شبیه به سیستم RMI در جاواست.

          برای استفاده از remote در فایل html، کدهای زیر را در تگ اسکریپت اضافه می‌کنیم:
            const remote=require("electron").remote;
              const dialog=remote.dialog;
          اینبار هم مانند قسمت قبلی، کدها را به شیوه دیگری انتساب دادیم. قصد ما از تغییر این رویه این است که با انواع حالت‌های انتساب اشیاء، آشنا شویم. بعد از آن توابع زیر را اضافه می‌کنیم:
            function OpenDialog()
              {
                dialog.showOpenDialog({
                  title:'باز کردن فایل متنی',
                   properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ]
                  ,filters:[
                  {name:'فایل‌های نوشتاری' , extensions:['txt','text']},
                  {name:'جهت تست' , extensions:['doc','docx']}
                   ]
                },
                  (filename)=>{
                    if(filename===undefined)
                       return;
                       var content=  fs.readFileSync(String(filename),'utf8');
                       document.getElementById("TextFile").value=content;
              });
              }
          
              function SaveDialog()
              {
                dialog.showSaveDialog({
                  title:'باز کردن فایل متنی',
                   properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ]
                  ,filters:[
                  {name:'فایل‌های نوشتاری' , extensions:['txt','text']}
                   ]
                },
                  (filename)=>{
                    if(filename===undefined)
                       return;
                       var content=document.getElementById("TextFile").value;
                       fs.writeFileSync(String(filename),content,'utf8');
                 });
              }
          برای استفاده از این توابع، کدهای زیر را نیز به فایل اضافه می‌کنیم تا دکمه‌های open و save به صفحه اضافه شوند:
          <button onclick="OpenDialog();" > Open File</button>
          <button onclick="SaveDialog();" > Save File</button>
          حالا برنامه را اجرا و تست کنید.

          عبارت remote شامل متدهای فراوانی است که تعدادی از آن‌ها را بر می‌شماریم:
          remote.getCurrentWindow()
          شیء BrowserWindow صفحه جاری را باز می‌گرداند.

          remote.getCurrentWebContents()
          شیء webContents صفحه جاری را باز می‌گرداند.

          remote.getGlobal(name)
          این متد، دسترسی به شیء global را داراست و یکی از اشیاء ارتباطی بین Main Process و RenderProcess است که می‌تواند هر نوع داده‌ای را جابجا نماید. برای مشاهده بهتر از نحوه کارکرد این متد کد زیر را مشاهده نمایید:
          Main Process
          global.testData={year:1395};

          Render Process
          alert(remote.getGlobal("testData").year);
          از این پس هر موقع renderProcess به این کد برسد، پیام 1395 را روی صفحه نمایش خواهد داد.

          remote.process
          شیء، process را از main process دریافت می‌کند و با کد زیر برابر است. ولی مزیت این متد این است که از کش نیز استفاده می‌نماید.
          remote.getGlobal('process')

          در مورد شیء process باید گفت که شامل خصوصیات و متدهایی در مورد پروسه اصلی اپلیکیشن می‌باشد. این اطلاعات مثل دریافت شماره نسخه الکترون، شماره نسخه کرومیوم، دریافت اطلاعات حافظه در مورد پروسه اپلیکیشن و حتی دریافت اطلاعات حافظه در مورد کل سیستم و ... می‌شود.