مطالب
مقدمه‌ای بر LINQ بخش اول
کلمه‌ی LINQ مخفف Language Integrated Query یا زبان پرس و جوی یکپارچه می‌باشد. LINQ برای اولین بار در ویژوال استودیوی 2008 و دات نت فریم ورک 3.5 برای پرکردن خلع بین دنیای اشیاء برنامه نویسی (Object Oriented World) و دنیای داده‌ها (Data World) ارائه شد.

چرا LINQ؟ 
در نگاهی کلی، مزایایی که از طریق LINQ حاصل می‌شوند عبارتند از:
• کاهش حجم کدنویسی 
• درک بهتر از عملکرد کد‌های نوشته شده
• پس از یادگیری اصول LINQ به راحتی می‌توانید از این اصول پرس و جو نویسی برای کار بر روی مجموعه داده‌های مختلف استفاده کنید
• کنترل صحت کدهای پرس و جو‌ها در زمان کامپایل ( Compile-Time Type Checking )

اجزای سازنده‌ی LINQ
دو جزء اصلی سازنده‌ی LINQ عبارت است از:
  • Elements عناصر
  • Sequences توالی‌ها
توالی‌ها می‌توانند لیستی از اطلاعات مختلف باشند. هر آیتم در لیست را عنصر می‌گوییم. توالی نمونه‌ای از یک کلاس است که اینترفیس <IEnumarable<T را پیاده سازی کرده باشد. این اینترفیس تضمین می‌کند که توالی قابلیت پیمایش عناصر را دارد.
به آرایه‌ی تعریف شده‌ی زیر دقت کنید:
int[] fibonacci = {0, 1, 1, 2, 3, 5};
متغیر fibonacci در اینجا نشان دهنده‌ی توالی و هر یک از اعداد آرایه، یک عنصر محسوب می‌شوند.
توالی می‌تواند درون حافظه‌ای باشد (In Memory Object) که به آن Local Sequence می‌گویند و یا می‌تواند یک بانک اطلاعاتی SQL Server باشد که به آن Remote Sequence می‌گویند.
در حالت Remote باید اینترفیس <IQuerable<T پیاده سازی شده باشد.
پرس و جو هایی را که بر روی توالی‌های محلی اجرا می‌شوند، اصطلاحا Local Query و یا LINQ-To-Object  نیز می‌نامند.
عملگرهای پرس و جوی  زیادی به شکل متد الحاقی در کلاس System.Linq.Enumerable طراحی شده‌اند. این مجموعه از عملگرهای پرس جو را اصطلاحا Standard Query Operator می‌گویند.
نکته‌ی مهم این است که عملگرهای پرس و جو تغییری را در توالی ورودی نمی‌دهند و نتیجه‌ی خروجی یک مجموعه جدید و یا یک مقدار عددی می‌باشد.

توالی خروجی و مقدار بازگشتی Scalar
در بخش قبل گفتیم که خروجی یک پرس و جو می‌تواند یک مجموعه و یا یک مقدار عددی باشد. در مثال زیر عملگر Count را بر روی مجموعه‌ی fibonacci  اعمال کردیم و عددی که نشان دهنده‌ی تعداد عناصر مجموعه است، بعنوان خروجی بازگردانده شده است.
int[] fibonacci = { 0, 1, 1, 2, 3, 5 };
int numberOfElements = fibonacci.Count();
Console.WriteLine($"{numberOfElements}");
IEnumerable<int> distinictNumbers = fibonacci.Distinct();
Console.WriteLine("Elements in output sequence:");
foreach (var number in distinictNumbers)
{
    Console.WriteLine(number);
}
در کد بالا توسط تابع Distinct، عناصر یکتا را از توالی ورودی استخراج کرده و بازگردانده‌ایم.
خروجی برنامه‌ی فوق به شکل زیر است :
6
Elements in output sequence:
0
1
2
3
5

مفهوم Deffer Execution  (
اجرای به تاخیر افتاده )
عمده‌ی عملگر‌های پرس و جو بلافاصله پس از ایجاد، اجرا نمی‌شوند. این عملگرها در طول اجرای برنامه اجرا خواهند شد (اجرای با تاخیر). به همین خاطر می‌توان بعد از ساخت پرس و جو  تغییرات دلخواهی را به توالی ورودی اعمال کرد.
در کد زیر  قبل از اجرای پرس و جو ، توالی ورودی ویرایش شده :
int[] fibonacci = { 0, 1, 1, 2, 3, 5 };
// ایجاد پرس و جو 
IEnumerable<int> numbersGreaterThanTwoQuery = fibonacci.Where(x => x > 2);
// در این مرحله پرس و جو ایجاد شده ولی هنوز اجرا نشده است
// تغییر عنصر اول توالی
fibonacci[0] = 99;
// حرکت بر روی عناصر توالی باعث اجرای پرس و جو می‌شود
foreach (var number in numbersGreaterThanTwoQuery)
{
   Console.WriteLine(number);
}
پرس و جو تا زمان اجرای حلقه‌ی Foreach اجرا نخواهد شد. خروجی مثال بالا به شکل زیر است :
99
3
5

به غیر از بعضی از عملگرها مثل Count,Min,Last سایر عملگر‌ها بصورت اجرای با تاخیر عمل می‌کنند. عملگری مثل Count باعث اجرای فوری پرس و جو می‌شود.
تعدادی عملگر تبدیل (Conversion Operator) هم وجود دارد که باعث می‌شوند پرس و جو بلافاصله اجرا شود :
• ToList
• ToArray
• ToLookup
• ToDictionary
عملگر‌های فوق پس از اجرا، خروجی را در یک ساختمان داده‌ی جدید باز می‌گردانند.
در کد زیر اصلاح توالی متغیر Fibonacci بعد از اجرای تابع ToArray صورت گرفته است.
int[] fibonacci = { 0, 1, 1, 2, 3, 5 };
// ساخت پرس و جو
IEnumerable<int> numbersGreaterThanTwoQuery = fibonacci.Where(x => x > 2) .ToArray();
// در این مرحله به خاطر عملگر استفاده شده پرس و جو اجرا می‌شود
// تغییر اولین عنصر توالی
fibonacci[0] = 99;
// حرکت بر روی نتیجه
foreach (var number in numbersGreaterThanTwoQuery)
{
   Console.WriteLine(number);
}
خروجی مثال بالا:
3
5
همانطور که می‌بینید عدد 99 در خروجی مشاهده نمی‌شود. علت فراخوانی عملگر ToArray است که بلافاصله باعث اجرای پرس و جو شده و خروجی را باز می‌گرداند . به همین خاطر تغییر عنصر اول توالی ورودی، تاثیری بر روی نتیجه‌ی خروجی ندارد. 
نظرات مطالب
تفاوت بین Interface و کلاس Abstract در چیست؟
به روز رسانی نکات مطرح شده‌ی در این مطلب، بر اساس امکانات C# 8.0 به بعد

1- یک کلاس معمولی تنها می‌تواند از یک کلاس Abstract ارث بری کند ولی همان کلاس میتواند از چندین Interface ارث ببرد.
وضعیت فعلی: هنوز هم برقرار است. اما چون اینبار اینترفیس‌ها هم می‌توانند به همراه کد باشند، می‌توان به multiple inheritance از طریق اینترفیس‌ها نیز رسید. هنگامیکه پیاده سازی‌های پیش‌فرض اینترفیس‌ها فراخوانی می‌شوند، فراخوان باید نوع اینترفیس متناظر را هم دقیقا مشخص کند. این ویژگی، مشکل معروفی را به نام «diamond problem»، که در ارث بری چندگانه‌ی از کلاس‌های پایه در زبان‌های دیگر وجود دارد، حل می‌کند: زمانیکه دو یا چند کلاس پایه، متد هم نامی را داشته باشند.
 
2- یک Interface  فقط میتواند اعلان متدها و خصوصیتها را داشته باشد؛ اما یک کلاس Abstract  علاوه بر آنها میتوانید متدها و خصوصیتهایی با کدهای کامل داشته باشد.
وضعیت فعلی: دیگر اینطور نیست. اینترفیس‌ها در C# 8.0 می‌توانند به همراه «default implementation» هم باشند.


3- عناصر موجود در کلاس Abstract میتوانند مانند یک کلاس معمولی دارای سطح دسترسی باشند؛ ولی Interface‌ها فاقد این امکان هستند.
وضعیت فعلی: دیگر اینطور نیست. از زمان C# 8.0 به بعد، اعضای یک اینترفیس هم می‌توانند دارای access modifiers باشند. حالت پیش‌فرض، public است. اما اکنون اینترفیس‌ها می‌توانند دارای اعضای private هم باشند که فقط داخل همان اینترفیس قابل دسترسی هستند. این مورد برای خواناتر کردن پیاده سازی‌های پیش‌فرض متدها در اینترفیس‌ها می‌تواند مفید باشد. در اینجا امکان تعریف اعضای protected نیز میسر است.


4- وقتی شما متدی را به کلاس Abstract اضافه می‌کنید، به طور خودکار به همه زیر کلاسها اعمال می‌شود؛ اما در Interface اگر متدی اضافه کنید باید در تمام زیر کلاسها آن را اعمال کنید . 

وضعیت فعلی: دیگر اینطور نیست؛ به علت امکان تعریف «default implementation» در اینترفیس‌ها.

5- کلاس‌های Abstract مانند کلاسهای معمولی می‌توانند دارای فیلد و عناصر دیگری (مثل ثابت‌ها) باشند؛ در حالیکه یک Interface فاقد این امکان می‌باشد. همچنین کلاس abstract میتواند شامل سازنده باشد، اما اینترفیس نمیتواند.
وضعیت فعلی: هنوز هم تا حدودی برقرار است. با تغییرات زبان #C، اکنون اینترفیس‌ها می‌توانند دارای فیلدها، سازنده‌ها و تخریب‌گرهای استاتیک هم باشند. یک فیلد استاتیک، فیلدی است که مقدار آن متعلق به یک وهله‌ی خاص نیست (هنوز هم نمی‌توان instance filed در اینجا داشت) و به اشتراک گذاشته می‌شود (دقیقا مانند فیلدهای استاتیک کلاس‌ها عمل می‌کند).
مطالب
آموزش (jQuery) جی کوئری 4#
در ادامه مطلب قبلی  آموزش (jQuery) جی کوئری 3# به ادامه بحث  می‌پردازیم.

با توجه به حالت‌های مختلف و گزینه‌های گوناگونی که انتخاب کننده‌ها در اختیار ما گذاشته اند، اگر هنوز دنبال قدرت بیشتری از انتخاب کننده‌ها هستید در ادامه به چند مورد از آنها اشاره خواهیم کرد.
3-1- انتخاب عناصر بر اساس موقعیت
گاهی اوقات انتخاب عناصر با توجه به مکان آنها و یا موقعیت مکانی آن‌ها نسبت به سایر اجزا صورت می‌پذیرد؛ برای مثال اولین لینک  صفحه و یا اولین لینک هر پاراگراف و یا گزینه‌ی آخر از لیست، jQuery شیوه ای خاص را برای چنین انتخاب هایی ارایه کرده است. برای مثال دستور زیر اولین لینک موجود در صفحه را انتخاب می‌کند:
a:first

دستور زیر چکاری انجام می‌دهد؟
p:odd

دستور بالا تمامی پاراگراف‌های فرد را انتخاب می‌کند. روش‌های دیگری هم ممکن است بخواهیم استفاده کنیم؛ مثلا دستور زیر تمامی پاراگراف‌های زوج را انتخاب می‌کند:
p:even

یا با استفاده از دستور زیر میتوان آخرین فرزند یک والد را انتخاب کرد؛ در زیر آخرین <lii> فرزند یک <ul> انتخاب می‌شود. علاوه بر انتخاب کننده هایی که ذکر شد؛ تعداد قابل توجه دیگری نیز وجود دارند که در جدول 2-2 ذکر شده اند.

جدول 2-2: انتخاب گر‌های پیشرفته موقعیت عناصر که توسط jQuery پشتیبانی می‌شوند
 توضیح فیلتر
اولین عنصر که با شرط ما مطابقت می‌کند را انتخاب می‌کند، li a:first اولین لینکی را که فرزند لیست به حساب می‌آیند؛ را بر می‌گرداند
:first
آخرین عنصری که با شرط ما مطابقت کند را انتخاب می‌کند. li a:last آخرین لینک از فرزندان لیست را برمی گرداند.
:last
اولین فرزند عنصر که با شرط ما مطابقت می‌کند را انتخاب می‌کند. li a:first-child اولین عنصر لینک از هر لیست را برمی گرداند.
:first-child
آخرین فرزند عنصر که با شرط ما مطابقت می‌کند را انتخاب می‌کند. li a:last-child اولین عنصر لینک از هر لیست را برمی گرداند.
:last-child
تمام عناصری که پدر انها تنها همان فرزند را داد، برمی گرداند.
:only-child
nامین فرزند عنصری که با شرط ما مطابقت داشته باشد را انتخاب می‌کند. li: nth-child:(2) //comment دومین عنصر از هر لیست را برمی گرداند.
:nth-child(n)
فرزندان زوج یا فرد عنصر را انخاب می‌کند. li:nth-child(even) //commentتمام عناصر زوج لیست‌ها را بر می‌گرداند.
:nth-child(even یا odd)
nامین فرزند عنصری که از طریق فرمول ارایه شده به دست می‌آید را انتخاب می‌کند. اگر Y صفر باشد، نیازی به نوشتن آن نیست. li:nth-child(3n)//comment تمام عناصر ضریب 3 لیست‌ها را بر می‌گرداند، در حالی که li:nth-child(5n+1)// comment عناصری از لیست را برمیگرداند که بعد از عنصرهای ضریب 5 لیست‌ها قرار گرفته باشند.
:nth-child(Xn+Y)
تمام عناصر زوج یا فرد که با شرط ما مطابقت کنند را انتخاب می‌کند. li:evenتمامی عناصر زوج لیست‌ها را بر می‌گرداند.
:even 
یا
:odd
n امین عنصر انتخاب شده را برمی گرداند.
:eq(n)
عناصر بعد از n امین عنصر را بر میگرداند. (در واقع عناصری که بزرگتر از عنصر n ام هستند را بر می‌گرداند)
:gt(n)
عناصر قبل از n امین عنصر را بر میگرداند. (در واقع عناصری که کوچکتر از عنصر n ام هستند را بر می‌گرداند) 
:lt(n)
  پ.ن : در جدول بالا در توضیحات بعضی از انتخاب گرها comment// نوشه شده است، اینها جز دستور نبوده و فقط برای نمایش صحیح پردانتز در صفحه اینترنتی نوشته شده است، در عمل نیازی به اینها نیست.

نکته ای که در مورد انتخاب گرهای جدول بالا وجود دارد این است که در فیلتر nth-child: برای سازگاری با CSS، مقدار شمارشگر از 1 آغاز می‌شود، اما در سایر فیلترها از قاعده ای که اکثر زبانهای برنامه نویسی استفاده شده است و شمارشگر آنها از صفر اغاز می‌شود. برای درک این موضوع مثال زیر را در نظر بگیرید:
<table id="languages">
     <thead>
          <tr>
               <th>Language</th>
               <th>Type</th>
               <th>Invented</th>
          </tr>
     </thead>
<tbody>
<tr>
     <td>Java</td>
     <td>Static</td>
     <td>1995</td>
</tr>
<tr>
     <td>Ruby</td>
     <td>Dynamic</td>
     <td>1993</td>
</tr>
<tr>
     <td>Smalltalk</td>
     <td>Dynamic</td>
     <td>1972</td>
</tr>
<tr>
     <td>C++</td>
     <td>Static</td>
     <td>1983</td>
</tr>
</tbody>
</table>

حال می‌خواهیم از این جدول، محتویات تمام خانه هایی که نام یک زبان برنامه نویسی در آنهاست را انتخاب نماییم. از انجا که نام این زبانها در اولین ستون از هر سطر قرار دارد. می‌توانیم دستوری مانند زیر بنویسیم:
table#languages tbody td:first-child

و یا با استفاده از دستور زیر این کار را انجام دهیم:
table#languages tbody td:nth-child(1)

اما دستور اول مختصر‌تر و خواناتر است. پس از آن برای دسترسی به نوع هریک از زبانهای برنامه نویسی، دستور انتخاب کننده دوم را به صورت
:nth-child(2)
تغییر می‌دهیم، و همچنین با تغییر پارامتر 2 به 3 سالی که هر یک از زبانها ابداع شده اند ، انتخاب می‌شوند. بدیهی است در این حالت دو دستور
:nth-child(3)
یا
:last-child
با یکدیگر برابرند. اما هردوی آنها ستون آخر از هر سطر را انخاب می‌کنند، در شرایطی که بخواهیم آخرین خانه جدول انتخاب شود (خانه ای با مقدار 1983)، از td:last استفاده می‌کنیم. توجه کنید در حالی که دستور td:eq(2) //comment خانه ای با مقدار 1995 را انتخاب می‌کند، دستور td:nth-child(2)//comment تمام خانه‌های بیان کننده نوع زبانها را انتخاب می‌کند. بنابراین به خاطر داشته باشید که مقدار ابتدایی شمارشگر فیلتر eq: از صفر است و این مقدار برای فیلتر nth-child: یک تعیین شده است.

در پست بعدی انتخاب گرهای CSS و فیلتر‌های سفارشی jQuery را بررسی خواهیم کرد.
نظرات مطالب
سازماندهی برنامه‌های Angular توسط ماژول‌ها
- «Organizing Angular applications»


- یک نمونه‌اش در سری «احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular» بحث شده‌است؛ با این کدها.
├───authentication
│   ├───access-denied
│   └───login
├───core
│   ├───component
│   │   └───header
│   ├───models
│   └───services
├───dashboard
│   ├───call-protected-api
│   └───protected-page
├───page-not-found
├───shared
│   └───directives
└───welcome
بازخوردهای پروژه‌ها
عدم اجرای درست پس از بروزرسانی
با سلام و تشکر
بنده فایل پروژه را دریافت 3.14mb کردم - با VS2012 پروژه را باز کردم.
تمامی بسته ای مورد نیاز را از nuget دریافت نموده و به پروژه اضافه کردم. با توجه به بروزرسانی کامل پروژه در هنگام build کردن با خطای ذیل برخوردم :
Error 1 Running transformation: System.Runtime.Serialization.SerializationException: Type 'Microsoft.VisualStudio.Platform.WindowManagement.DTE.WindowBase' in Assembly 'Microsoft.VisualStudio.Platform.WindowManagement, Version=11.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' is not marked as serializable.

Server stack trace:
at System.Runtime.Serialization.FormatterServices.InternalGetSerializableMembers(RuntimeType type)
at System.Runtime.Serialization.FormatterServices.GetSerializableMembers(Type type, StreamingContext context)
at System.Runtime.Serialization.Formatters.Binary.WriteObjectInfo.InitMemberInfo()
at System.Runtime.Serialization.Formatters.Binary.WriteObjectInfo.InitSerialize(Object obj, ISurrogateSelector surrogateSelector, StreamingContext context, SerObjectInfoInit serObjectInfoInit, IFormatterConverter converter, ObjectWriter objectWriter, SerializationBinder binder)
at System.Runtime.Serialization.Formatters.Binary.WriteObjectInfo.Serialize(Object obj, ISurrogateSelector surrogateSelector, StreamingContext context, SerObjectInfoInit serObjectInfoInit, IFormatterConverter converter, ObjectWriter objectWriter, SerializationBinder binder)
at System.Runtime.Serialization.Formatters.Binary.ObjectWriter.Serialize(Object graph, Header[] inHeaders, __BinaryWriter serWriter, Boolean fCheck)
at System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Serialize(Stream serializationStream, Object graph, Header[] headers, Boolean fCheck)
at System.Runtime.Remoting.Channels.CrossAppDomainSerializer.SerializeMessageParts(ArrayList argsToSerialize)
at System.Runtime.Remoting.Messaging.SmuggledMethodReturnMessage..ctor(IMethodReturnMessage mrm)
at System.Runtime.Remoting.Messaging.SmuggledMethodReturnMessage.SmuggleIfPossible(IMessage msg)
at System.Runtime.Remoting.Channels.CrossAppDomainSink.DoDispatch(Byte[] reqStmBuff, SmuggledMethodCallMessage smuggledMcm, SmuggledMethodReturnMessage& smuggledMrm)
at System.Runtime.Remoting.Channels.CrossAppDomainSink.DoTransitionDispatchCallback(Object[] args)

Exception rethrown at [0]:
at System.Runtime.Remoting.Proxies.RealProxy.HandleReturnMessage(IMessage reqMsg, IMessage retMsg)
at System.Runtime.Remoting.Proxies.RealProxy.PrivateInvoke(MessageData& msgData, Int32 type)
at EnvDTE.ProjectItem.Open(String ViewKind)
at Microsoft.VisualStudio.TextTemplating68537376E7602BEF0BC78F6865AE7CA51045AC19A14311A88D27E9D58C4AD4FF79D1048D4111C0DB61E161576D974579F27F8615BF9334E571707272502A1653.GeneratedTextTransformation.XmlSettings.Init(ITextTemplatingEngineHost host) in d:\Downloads\ASP.NET MVC\IRISCMS\Iris\Iris.Web\T4MVC.tt:line 2129
at Microsoft.VisualStudio.TextTemplating68537376E7602BEF0BC78F6865AE7CA51045AC19A14311A88D27E9D58C4AD4FF79D1048D4111C0DB61E161576D974579F27F8615BF9334E571707272502A1653.GeneratedTextTransformation.XmlSettings.Load[T](ITextTemplatingEngineHost host) in d:\Downloads\ASP.NET MVC\IRISCMS\Iris\Iris.Web\T4MVC.tt:line 2102
at Microsoft.VisualStudio.TextTemplating68537376E7602BEF0BC78F6865AE7CA51045AC19A14311A88D27E9D58C4AD4FF79D1048D4111C0DB61E161576D974579F27F8615BF9334E571707272502A1653.GeneratedTextTransformation.MvcSettings.Load(ITextTemplatingEngineHost host) in d:\Downloads\ASP.NET MVC\IRISCMS\Iris\Iris.Web\T4MVC.tt:line 1795
at Microsoft.VisualStudio.TextTemplating68537376E7602BEF0BC78F6865AE7CA51045AC19A14311A88D27E9D58C4AD4FF79D1048D4111C0DB61E161576D974579F27F8615BF9334E571707272502A1653.GeneratedTextTransformation.TransformText() in d:\Downloads\ASP.NET MVC\IRISCMS\Iris\Iris.Web\T4MVC.tt:line 39 d:\Downloads\ASP.NET MVC\IRISCMS\Iris\Iris.Web\T4MVC.tt 2129 1 Iris.Web
 

و یک خطای دیگر نیز دارم :
Error 2 The type or namespace name 'Extensibility' does not exist in the namespace 'MvcSiteMapProvider' (are you missing an assembly reference?)

هر کاری کردم نتونستم مشکل را حل کنم :
پیشنهاد : 
1 -فایل کامل را در یکی از سایتهای اشتراک فایل مانند mediafire.com , uploadbaz بارگذاری و لینک دانلود را در بخش دانلود فایلهای قراردهید.
2-راهنمایی ، جهت رفع مشکلات فوق را ارائه فرمائید.
 
مطالب
آموزش Linq - بخش ششم: عملگرهای پرس و جو قسمت چهارم
عملگر‌های تولید  Generation Operator

عملگر‌های تولید، برای ما توالی ایجاد می‌کنند و تفاوت‌های عمده‌ای با سایر عملگرهای پرس و جو دارند که در بخش زیر به آنها اشاره می‌کنیم:
 1- هیچ توالی ورودی را دریافت نمی‌کنند.
 2- این عملگر‌ها بصورت متد الحاقی پیاده سازی نشده‌اند و بصورت متد‌های استاتیک در کلاس Enumerable قرار گرفته‌اند.
امضاء زیر مربوط به متد Empty  می‌باشد:
 public static IEnumerable<TResult> Empty<TResult>()

Empty

عملگر Empty یک توالی بدون عنصر (Empty) را بر اساس نوع مشخص شده، ایجاد می‌کند.
در کد زیر نحوه ایجاد یک توالی خالی از نوع Ingredient نشان داده شده است.
IEnumerable<Ingredient> ingredients = Enumerable.Empty<Ingredient>();
Console.WriteLine(ingredients.Count());
خروجی کد بالا :
 0
پیاده سازی توسط عبارت‌های جستجو
معادل عملگر Empty، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

Range
عملگر پرس و جوی Range، یک توالی از مقادیر صحیح متوالی را برای ما ایجاد می‌کند. اولین پارامتر این عملگر عنصر آغاز کننده توالی است و دومین پارامتر این عملگر تعداد کل عناصر توالی تولید شده، با احتساب عنصر اول خواهد بود.
مثال:
IEnumerable<int> fiveToTen = Enumerable.Range(5,6);
foreach (var num in fiveToTen)
{
   Console.WriteLine(num);
}
خروجی مثال بالا:
5
6
7
8
9
10
همانطور که ملاحظه کردید مجموعا 6 عنصر برای توالی تولید شدند و اولین عنصر، با عدد 5 آغاز شده است.

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Range، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

Repeat
عملگر پرس و جوی Repeat یک عدد را به تعداد بار مشخصی در توالی خروجی تکرار می‌کند.
مثال:
IEnumerable<int> fiveToTen = Enumerable.Repeat(42, 6);
foreach (var num in fiveToTen)
{
    Console.WriteLine(num);
}
خروجی مثال بالا:
42
42
42
42
42
42
پیاده سازی توسط عبارت‌های جستجو
معادل عملگر Repeat، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.


عملگرهای  کمی (Quantifier Operators)
عملگرهای Quantifier یک توالی ورودی را گرفته، آن را ارزیابی کرده و یک مقدار منطقی را باز می‌گردانند.

عملگر Contains
عملگر Contains  عناصر یک توالی را ارزیابی می‌کند و در صورتیکه مقدار مورد نظر ما در توالی وجود داشته باشد، ارزش True باز می‌گرداند.
مثال:
int[] nums = {1, 2, 3};
bool isTowThere = nums.Contains(2);
bool isFiveThere = nums.Contains(5);

Console.WriteLine(isTowThere);
Console.WriteLine(isFiveThere);
خروجی مثال بالا :
True
False

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Contains، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

عملگر Any
عملگر Any دو امضاء مختلف را دارد:
 1- اولین امضاء: در صورتیکه توالی شامل حداقل یک عنصر باشد، ارزش True بازگردانده می‌شود.
 2- دومین امضاء: یک عبارت پیش بینی را قبول می‌کند. در صورتیکه حداقل یکی از عناصر توالی، عبارت پیش بینی را تامین کند، ارزش صحیح باز گردانده می‌شود.
مثال: بررسی امضاء اول عملگر Any
int[] nums = { 1, 2, 3 };
IEnumerable<int> noNums = Enumerable.Empty<int>();

Console.WriteLine(nums.Any());
Console.WriteLine(noNums.Any());
خروجی مثال بالا:
True
False
مثال: بررسی امضاء دوم عملگر Any
int[] nums = { 1, 2, 3 };
bool areAnyEvenNumbers = nums.Any(x => x % 2 == 0);
Console.WriteLine(areAnyEvenNumbers);
خروجی مثال بالا:
 True
در مثال بالا، عبارت پیش بینی مشخص می‌کند که اعداد زوج در توالی وجود داشته باشند یا خیر.

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

عملگر All
عملگر پرس و جوی All، یک عبارت پیش بینی را دریافت می‌کند و عناصر توالی ورودی را بر مبنای آن ارزیابی می‌کند تا مشخص شود همه عناصر، شرط پیش بینی را تامین می‌کنند.
در کد زیر بررسی می‌کنیم که آیا همه عناصر توالی مواد غذایی، جزء مواد غذایی کم چرب می‌باشند یا خیر .
Ingredient[] ingredients =
{
new Ingredient { Name = "Sugar", Calories = 500 },
new Ingredient { Name = "Egg", Calories = 100 },
new Ingredient { Name = "Milk", Calories = 150 },
new Ingredient { Name = "Flour", Calories = 50 },
new Ingredient { Name = "Butter", Calories = 400 }
};
bool isLowFatRecipe = ingredients.All(x => x.Calories < 200);
Console.WriteLine(isLowFatRecipe);
خروحی کد بالا :
False

نکته : عملگر All به محض پیدا کردن عنصری که شرط مشخص شده را نقض کند، ارزش False را باز می‌گرداند و ادامه بررسی عناصر باقی مانده را متوقف می‌کند.

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

عملگر SequenceEqual
عملگر SequenceEqual دو توالی را با هم مقایسه کرده و در صورتیکه عناصر هر دو توالی برابر و ترتیب قرار گیری آنها نیز یکسان باشند، ارزش True باز گردانده می‌شود.
مثال:
IEnumerable<int> sequence1 = new[] {1, 2, 3};
IEnumerable<int> sequence2 = new[] { 1, 2, 3 };
bool isSeqEqual = sequence1.SequenceEqual(sequence2);
Console.WriteLine(isSeqEqual);
خروجی مثال بالا:
 True

در صورتی که دو توالی عناصر یکسانی داشته باشند، ولی ترتیب قرار گیری عناصر با هم یکسان نباشند، عملگر ارزش False را باز می‌گرداند.
مثال :
IEnumerable<int> sequence1 = new[] { 1, 2, 3 };
IEnumerable<int> sequence2 = new[] { 3, 2, 1 };
bool isSeqEqual = sequence1.SequenceEqual(sequence2);
Console.WriteLine(isSeqEqual);
خروجی مثال بالا:
False
پیاده سازی توسط عبارت‌های جستجو
معادل عملگر SequenceEqual، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.
 
عملگر‌های تجمیع/تجمعی Aggregate Operators
عملگرهای Aggregate یک توالی ورودی را دریافت و یک مقدار عددی (Scalar Value) را باز می‌گردانند. مقدار بازگردانده شده، حاصل یک عملیات محاسباتی می‌باشد.
لیستی از عملگر‌های تجمیع ( Aggregate Operators ):
 • Count
 • LongCount
 • Sum
 • Min
 • Max
 • Average
 • Aggregate

عملگر Count
عملگر Count، تعداد عناصر توالی ورودی را باز می‌گرداند. عملگر Count، دو امضاء مختلف دارد. یکی از این امضاء‌ها یک عبارت پیش بینی را می‌پذیرد.
کد زیر، امضاء اول عملگر Count را نشان می‌دهد:
int[] nums = { 1, 2, 3 };
int numberOfElements = nums.Count();
Console.WriteLine(numberOfElements);
خروجی کد بالا:
 3

وقتی عبارت پیش بینی بکار گرفته می‌شود، عملگر Count تنها عناصری را که شرط را تامین کنند، شمارش می‌کند.
در کد زیر عملگر Count، همه عناصر زوج توالی ورودی را شمارش می‌کند:
int[] nums = { 1, 2, 3 };
int numberOfEvenElements = nums.Count(x => x % 2 == 0);
Console.WriteLine(numberOfEvenElements);
خروجی کد بالا :
1

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Count ، کلمه‌ی کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

عملگر LongCount
این عملگر مثل عملگر Count عمل می‌کند، اما با این تفاوت که خروجی آن به جای نوع int از نوع long می‌باشد. این عملگر برای شمارش توالی‌های  ورودی بسیار بزرگ مورد استفاده قرار می‌گیرد.

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر LongCount، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

عملگر Sum

این عملگر  مجموع تمامی عناصر یک توالی را باز می‌گرداند.
در کد زیر جمع عناصر یک توالی از نوع int را مشاهده می‌کنید:
int[] nums = { 1, 2, 3 };
int total = nums.Sum();
Console.WriteLine(total);
خروجی کد بالا :
 6

عملگر Sum می‌تواند بر روی توالی‌هایی از نوع <IEnumerable<T و بر روی اعضای عددی آنها اعمال شود.
مثال:
Ingredient[] ingredients =
{
new Ingredient { Name = "Sugar", Calories = 500 },
new Ingredient { Name = "Egg", Calories = 100 },
new Ingredient { Name = "Milk", Calories = 150 },
new Ingredient { Name = "Flour", Calories = 50 },
new Ingredient { Name = "Butter", Calories = 400 }
};
int totalCalories = ingredients.Sum(x => x.Calories);
Console.WriteLine(totalCalories);
خروحی مثال بالا :
 1200

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Sum، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

عملگر Average

این عملگر میانگین عناصر توالی‌های عددی را محاسبه می‌کند.
مثال:
int[] nums = { 1, 2, 3 };
var avg = nums.Average();
Console.WriteLine(avg);
خروجی مثلا بالا :
 2

همانطور که در کد بالا مشاهده می‌کنید، نوع متغیر avg صراحتا مشخص نشده و از نوع var استفاده شده است. تابع average بر اساس توالی ورودی، انواع مختلفی از نوع داده‌های عددی را به خروجی ارسال می‌کند (double,float,decimal).
همانند عملگر Sum، عملگر Average می‌تواند بر روی اعضای عددی توالی‌هایی که از نوع<IEnumarable<T هستند، اعمال شود.
مثال:
Ingredient[] ingredients =
{
new Ingredient { Name = "Sugar", Calories = 500 },
new Ingredient { Name = "Egg", Calories = 100 },
new Ingredient { Name = "Milk", Calories = 150 },
new Ingredient { Name = "Flour", Calories = 50 },
new Ingredient { Name = "Butter", Calories = 400 }
};
var avgCalories = ingredients.Average(x => x.Calories);
Console.WriteLine(avgCalories);
خروجی مثال بالا :
 240

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Average، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

عملگر Min

عملگر Min کوچکترین عنصر توالی را باز می‌گرداند.
مثال:
int[] nums = { 3, 2, 1 };
var smallest = nums.Min();
Console.WriteLine(smallest);
خروجی مثال بالا:
 1
امضاء دیگر Min می‌تواند یک عبارت پیش بینی را بپذیرد:
مثال:
Ingredient[] ingredients =
{
new Ingredient { Name = "Sugar", Calories = 500 },
new Ingredient { Name = "Egg", Calories = 100 },
new Ingredient { Name = "Milk", Calories = 150 },
new Ingredient { Name = "Flour", Calories = 50 },
new Ingredient { Name = "Butter", Calories = 400 }
};
var smallestCalories = ingredients.Min(x => x.Calories);
Console.WriteLine(smallestCalories);

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

عملگر Max
عملگر Max بزرگترین عنصر توالی را باز می‌گرداند.
مثال:
int[] nums = { 1 ,3, 2 };
var largest = nums.Max();
Console.WriteLine(largest);
خروجی مثال بالا:
 3
همچون عملگر Min، عملگر Max نیز یک امضاء دارد که می‌توان از طریق آن یک عبارت پیش بینی را مشخص کرد.

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Max، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.

Aggregate
عملگر‌های تجمعی که  تا اینجا معرفی شدند، تنها یک کار را انجام می‌دادند. اما عملگر Aggregate امکان تعریف یک پرس و جوی تجمیع سفارشی و پیشرفته‌تر را که بر روی توالی ورودی اعمال می‌شود نیز مهیا می‌کند.
عملگر Aggregate  دو نسخه دارد:
 1- نسخه‌ای که اجازه استفاده از یک عدد را به عنوان مقدار Seed، به ما می‌دهد (مقدار آغازین یا Seed).
 2- نسخه‌ای که از عنصر ابتدایی توالی به عنوان مقدار Seed استفاده می‌کند.
هر دو نسخه این عملگر به یک تابع  انباره (accumulator function) جهت نگهداری نتیجه نیاز دارند.
کد زیر شبیه سازی عملگر Sum  توسط عملگر Aggregate می‌باشد:
int[] nums = {1, 2, 3};
var result = nums.Aggregate(0,
(currentElement, runningTotal) => runningTotal + currentElement);
Console.WriteLine(result);
خروجی قطعه کد بالا:
 6
در قطعه کد بالا، نسخه‌ای از عملگر aggregate استفاده شد که مقدار شروع آن با عدد صفر مقدار دهی اولیه شد‌ه‌است.
کد زیر شبیه سازی عملیات فاکتوریل را با در نظر گرفتن عنصر اول توالی، به عنوان مقدار Seed نشان می‌دهد:
 int[] nums = { 1, 2, 3 ,4,5};
var result = nums.Aggregate((runningProduct, nextfactor) => runningProduct * nextfactor);
Console.WriteLine(result);
خروجی کد بالا:
 120

پیاده سازی توسط عبارت‌های جستجو

معادل عملگر Aggregate، کلمه کلیدی در عبارت‌های جستجو وجود ندارد. ترکیب دو روش می‌تواند خروجی دلخواه را تولید کند.
مطالب
طراحی یک گرید با Angular و ASP.NET Core - قسمت دوم - پیاده سازی سمت کلاینت
در قسمت قبل، کار پیاده سازی سمت سرور نمایش اطلاعات یک گرید، به پایان رسید. در این قسمت می‌خواهیم از سمت کلاینت، اطلاعات صفحه بندی و مرتب سازی را به سمت سرور ارسال کرده و همچنین نتیجه‌ی دریافتی از سرور را نمایش دهیم.



پیشنیازهای نمایش اطلاعات گرید به همراه صفحه بندی اطلاعات

در مطلب «Angular CLI - قسمت ششم - استفاده از کتابخانه‌های ثالث» نحوه‌ی نصب و معرفی کتابخانه‌ی ngx-bootstrap را بررسی کردیم. دقیقا همان مراحل، در اینجا نیز باید طی شوند و از این مجموعه تنها به کامپوننت Pagination آن نیاز داریم. همان قسمت ذیل گرید تصویر فوق که شماره صفحات را جهت انتخاب، نمایش داده‌است.
بنابراین ابتدا فرض بر این است که دو بسته‌ی بوت استرپ و ngx-bootstrap را نصب کرده‌اید:
> npm install bootstrap --save
> npm install ngx-bootstrap --save
در فایل angular-cli.json. شیوه‌نامه‌ی بوت استرپ را نیز افزوده‌اید:
  "apps": [
    {
      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
پس از آن باید به‌خاطر داشت که کامپوننت نمایش صفحه بندی این مجموعه PaginationModule نام دارد و باید در نزدیک‌ترین ماژول مورد نیاز، ثبت و معرفی شود:
import { PaginationModule } from "ngx-bootstrap";

@NgModule({
  imports: [
    PaginationModule.forRoot()
  ]
برای نمونه در این مثال، ماژولی به نام simple-grid.module.ts دربرگیرنده‌ی گرید مطلب جاری است و به صورت ذیل به برنامه اضافه شده‌است:
 >ng g m SimpleGrid -m app.module --routing
بنابراین تعریف PaginationModule باید به قسمت imports این ماژول اضافه شود و تعریف آن در app.module.ts تاثیری بر روی این قسمت نخواهد داشت.

کامپوننتی هم که مثال جاری را نمایش می‌دهد به صورت ذیل به ماژول SimpleGrid فوق اضافه شده‌است:
 >ng g c SimpleGrid/products-list


تهیه معادل‌های قراردادهای سمت سرور در سمت Angular

در قسمت قبل، تعدادی قرارداد مانند پارامترهای دریافتی از سمت کلاینت و ساختار اطلاعات ارسالی به سمت کلاینت را تعریف کردیم. اکنون جهت کار strongly typed با آن‌ها در سمت یک برنامه‌ی تایپ اسکریپتی Angular، کلاس‌های معادل آن‌ها را تهیه می‌کنیم.

ساختار شیء محصول دریافتی از سمت سرور
 >ng g cl SimpleGrid/app-product
با این محتوا
export class AppProduct {
  constructor(
    public productId: number,
    public productName: string,
    public price: number,
    public isAvailable: boolean
  ) {}
}
که در اینجا هر کدام از خواص ذکر شده، معادل camel case نمونه‌ی سمت سرور خود هستند (چون JSON.NET در ASP.NET Core، به صورت پیش فرض یک چنین خروجی را تولید می‌کند).

ساختار معادل پارامترهای صفحه بندی و مرتب سازی ارسالی به سمت سرور
 >ng g cl SimpleGrid/PagedQueryModel
با این محتوا
export class PagedQueryModel {
  constructor(
    public sortBy: string,
    public isAscending: boolean,
    public page: number,
    public pageSize: number
  ) {}
}
در اینجا همان ساختار IPagedQueryModel سمت سرور را مشاهده می‌کنید. از آن جهت مشخص سازی جزئیات صفحه بندی و نحوه‌ی مرتب سازی اطلاعات، استفاده می‌شود.

ساختار معادل اطلاعات صفحه بندی شده‌ی دریافتی از سمت سرور
 >ng g cl SimpleGrid/PagedQueryResult
با این محتوا
export class PagedQueryResult<T> {
  constructor(public totalItems: number, public items: T[]) {}
}
این ساختار جنریک نیز دقیقا معادل همان PagedQueryResult سمت سرور است و حاوی تعداد کل ردیف‌های یک کوئری و تنها قسمتی از اطلاعات صفحه بندی شده‌ی آن می‌باشد.

ساختار ستون‌های گرید نمایشی
 >ng g cl SimpleGrid/GridColumn
با این محتوا
export class GridColumn {
  constructor(
    public title: string,
    public propertyName: string,
    public isSortable: boolean
  ) {}
}
هر ستون نمایش داده شده، دارای یک برچسب، خاصیتی مشخص در سمت سرور و بیانگر قابلیت مرتب سازی آن می‌باشد. اگر isSortable به true تنظیم شود، با کلیک بر روی سرستون‌ها می‌توان اطلاعات را بر اساس آن ستون، مرتب سازی کرد.


تهیه سرویس ارسال اطلاعات صفحه بندی به سرور و دریافت اطلاعات از آن

پس از تدارک این مقدمات، اکنون کار تعریف سرویسی که این اطلاعات را به سمت سرور ارسال می‌کند و نتیجه را باز می‌گرداند، به صورت ذیل خواهد بود:
 >ng g s SimpleGrid/products-list -m simple-grid.module
این دستور سبب ایجاد کلاس ProductsListService شده و همچنین قسمت providers ماژول simple-grid را نیز بر این اساس به روز رسانی می‌کند.
پیش از تکمیل این سرویس، نیاز است متدی را جهت تبدیل یک شیء، به معادل کوئری استرینگ آن تهیه کنیم:
  toQueryString(obj: any): string {
    const parts = [];
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const value = obj[key];
        if (value !== null && value !== undefined) {
          parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
        }
      }
    }
    return parts.join("&");
  }
در قسمت قبل امضای متد GetPagedProducts دارای ویژگی HttpGet است. بنابراین، نیاز است اطلاعات را به صورت کوئری استرینگ از سمت کلاینت دریافت کند و متد toQueryString فوق به صورت خودکار بر روی تمام خواص یک شیء دلخواه حرکت کرده و آن‌ها را تبدیل به یک رشته‌ی حاوی کوئری استرینگ‌ها می‌کند.
[HttpGet("[action]")]
public PagedQueryResult<Product> GetPagedProducts(ProductQueryViewModel queryModel)
برای نمونه متد toQueryString فوق است که سبب ارسال یک چنین درخواستی به سمت سرور می‌شود:
 http://localhost:5000/api/Product/GetPagedProducts?sortBy=productId&isAscending=true&page=2&pageSize=7

پس از این تعریف، سرویس ProductsListService  به صورت ذیل تکمیل خواهد شد:
@Injectable()
export class ProductsListService {
  private baseUrl = "api/Product";

  constructor(private http: Http) {}

  getPagedProductsList(
    queryModel: PagedQueryModel
  ): Observable<PagedQueryResult<AppProduct>> {
    return this.http
      .get(`${this.baseUrl}/GetPagedProducts?${this.toQueryString(queryModel)}`)
      .map(res => {
        const result = res.json();
        return new PagedQueryResult<AppProduct>(
          result.totalItems,
          result.items
        );
      });
  }
در اینجا از متد toQueryString، جهت تکمیل متد get ارسالی به سمت سرور استفاده شده‌است تا پارامترها را به صورت کوئری استرینگ‌ها تبدیل کرده و ارسال کند.
سپس در متد map آن، res.json دقیقا همان ساختار PagedQueryResult سمت سرور را به همراه دارد. اینجا است که فرصت خواهیم داشت نمونه‌ی سمت کلاینت آن‌را که در ابتدای بحث تهیه کردیم، وهله سازی کرده و بازگشت دهیم (نگاشت فیلدهای دریافتی از سمت سرور به سمت کلاینت).


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

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


  <table class="table table-striped table-hover table-bordered table-condensed">
    <thead>
      <tr>
        <th class="text-center" style="width:3%">#</th>
        <th *ngFor="let column of columns" class="text-center">
          <div *ngIf="column.isSortable" (click)="sortBy(column.propertyName)" style="cursor: pointer">
            {{ column.title }}
            <i *ngIf="queryModel.sortBy === column.propertyName" class="glyphicon"
              [class.glyphicon-sort-by-order]="queryModel.isAscending" [class.glyphicon-sort-by-order-alt]="!queryModel.isAscending"></i>
          </div>
          <div *ngIf="!column.isSortable" style="cursor: pointer">
            {{ column.title }}
          </div>
        </th>
      </tr>
    </thead>
در اینجا ابتدا بررسی می‌شود که آیا یک ستون قابلیت مرتب سازی را دارد، یا خیر؟ اگر اینطور است، در کنار آن یک گلیف آیکن مرتب سازی درج می‌شود. اگر خیر، صرفا متن عنوان آن نمایش داده خواهد شد. می‌شد تمام این موارد را به ازای هر ستون به صورت مجزایی ارائه داد، اما در این حالت به کدهای تکراری زیادی می‌رسیدیم. به همین جهت از یک حلقه بر روی تعریف ستون‌های این گرید استفاده شده‌است. آرایه‌ی این ستون‌ها نیز به صورت ذیل تعریف می‌شود:
export class ProductsListComponent implements OnInit {
  columns: GridColumn[] = [
    new GridColumn("Id", "productId", true),
    new GridColumn("Name", "productName", true),
    new GridColumn("Price", "price", true),
    new GridColumn("Available", "isAvailable", true)
  ];

همچنین در کدهای قالب این کامپوننت، مدیریت کلیک بر روی یک سر ستون را نیز مشاهده می‌کنید:
export class ProductsListComponent implements OnInit {
  itemsPerPage = 7;
  queryModel = new PagedQueryModel("productId", true, 1, this.itemsPerPage);

  sortBy(columnName) {
    if (this.queryModel.sortBy === columnName) {
      this.queryModel.isAscending = !this.queryModel.isAscending;
    } else {
      this.queryModel.sortBy = columnName;
      this.queryModel.isAscending = true;
    }
    this.getPagedProductsList();
  }
}
در این‌حالت اگر ستونی که بر روی آن کلیک شده، پیشتر مرتب سازی شده‌است، صرفا خاصیت صعودی بودن آن برعکس خواهد شد. در غیراینصورت، نام خاصیت درخواستی مرتب سازی و جهت آن نیز مشخص می‌شود. سپس مجددا این گرید توسط متد getPagedProductsList رندر خواهد شد.

کار رندر بدنه‌ی اصلی گرید توسط همین چند سطر در قالب آن مدیریت می‌شود:
    <tbody>
      <tr *ngFor="let item of queryResult.items; let i = index">
        <td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
        <td class="text-center">{{ item.productId }}</td>
        <td class="text-center">{{ item.productName }}</td>
        <td class="text-center">{{ item.price | number:'.0' }}</td>
        <td class="text-center">
          <input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
            disabled="disabled" />
        </td>
      </tr>
    </tbody>
  </table>
اولین ستون آن، اندکی ابتکاری است. در اینجا شماره ردیف‌های خودکاری در هر صفحه درج خواهند شد. این شماره ردیف نیز جزو ستون‌های منبع داده‌ی فرضی برنامه نیست. به همین جهت برای درج آن، توسط let i = index در ngFor، به شماره ایندکس ردیف جاری دسترسی پیدا می‌کنیم. سپس توسط محاسباتی بر اساس تعداد ردیف‌های هر صفحه و شماره‌ی صفحه‌ی جاری، می‌توان شماره ردیف فعلی را محاسبه کرد.

در اینجا حلقه‌ای بر روی queryResult.items تشکیل شده‌است. این منبع داده به صورت ذیل در کامپوننت متناظر مقدار دهی می‌شود:
export class ProductsListComponent implements OnInit {
  itemsPerPage = 7;
  currentPage: number;
  numberOfPages: number;
  isLoading = false;
  queryModel = new PagedQueryModel("productId", true, 1, this.itemsPerPage);
  queryResult = new PagedQueryResult<AppProduct>(0, []);

  constructor(private productsListService: ProductsListService) {}

  ngOnInit() {
    this.getPagedProductsList();
  }

  private getPagedProductsList() {
    this.isLoading = true;
    this.productsListService
      .getPagedProductsList(this.queryModel)
      .subscribe(result => {
        this.queryResult = result;
        this.isLoading = false;
      });
  }
}
ابتدا سرویس ProductsListService را که در ابتدای بحث تکمیل شد، به سازنده‌ی این کامپوننت تزریق می‌کنیم. به کمک آن می‌توان در متد getPagedProductsList، ابتدا queryModel جاری را که شامل اطلاعات مرتب سازی و صفحه بندی است، به سرور ارسال کرده و سپس نتیجه‌ی نهایی را به queryResult انتساب دهیم. به این ترتیب تعداد کل رکوردها و همچنین آیتم‌های صفحه‌ی جاری دریافت می‌شوند. اکنون حلقه‌ی ngFor نمایش بدنه‌ی گرید، کار تکمیل صفحه‌ی جاری را انجام خواهد داد.

قسمت آخر کار، افزودن کامپوننت نمایش شماره صفحات است:


  <div align="center">
    <pagination [maxSize]="8" [boundaryLinks]="true" [totalItems]="queryResult.totalItems"
      [rotate]="false" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;"
      lastText="&raquo;" (numPages)="numberOfPages = $event" [(ngModel)]="currentPage"
      (pageChanged)="onPageChange($event)"></pagination>
  </div>
  <pre class="card card-block card-header">Page: {{currentPage}} / {{numberOfPages}}</pre>
در اینجا از کامپوننت pagination مجموعه‌ی ngx-bootstarp استفاده شده‌است و یک سری از خواص مستند شده‌ی آن‌، مقدار دهی شده‌اند؛ مانند متن‌های صفحه‌ی بعد و قبل و امثال آن. مدیریت کلیک بر روی شماره‌های آن، در کامپوننت جاری به صورت ذیل است:
export class ProductsListComponent implements OnInit {
  itemsPerPage = 7;
  currentPage: number;
  numberOfPages: number;

  onPageChange(event: any) {
    this.queryModel.page = event.page;
    this.getPagedProductsList();
  }
}
علت تعریف دو خاصیت اضافه‌ی currentPage و numberOfPages، استفاده‌ی از آن‌ها در قسمت ذیل این شماره‌ها (خارج از کامپوننت نمایش شماره صفحات) جهت نمایش page 1/x است.
هر زمانیکه کاربر بر روی شما‌ره‌ای کلیک می‌کند، رخ‌داد onPageChange فراخوانی شده و در این‌حالت تنها کافی است شماره صفحه‌ی درخواستی queryModel جاری را به روزرسانی کرده و سپس آن‌را در اختیار متد getPagedProductsList جهت دریافت اطلاعات این صفحه‌ی درخواستی قرار دهیم.


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید.
پاسخ به بازخورد‌های پروژه‌ها
مدیریت نمایش Header
            .PagesHeader(header =>
            {
                header.CacheHeader(cache: true); // It's a default setting to improve the performance.
تنظیم پیش فرض کش کردن هدر را لغو کنید.