نظرات مطالب
استخراج اطلاعات از صفحات وب با کمک HtmlAgilityPack
Crawler همونطور که در متن هم نوشته شده دست سازه و مهم نیست و تابع GetXHtmlFromUri میتونه مثل نمونه زیر باشه و دقت کنید خالی نبودن  UseAgent خیله مهمه وگرنه ارور The remote server returned an error: (409) Conflict رو میده.
من با همین تابع یک سایت فارسی رو چک کردم و اروری نداد و متن فارسی قابل کوئری گرفتن بود.
کامل‌تر و با ارور هندلینگ بهترش رو میتونید در برنامه مفید plrip آقای وحید نصیری ببینید
private static HtmlDocument GetXHtmlFromUri(string uri)   {
            HtmlDocument htmlDoc = new HtmlDocument()
            {
                OptionCheckSyntax = true,
                OptionFixNestedTags = true,
                OptionAutoCloseOnEnd = true,
                OptionDefaultStreamEncoding = Encoding.UTF8
            };

            var request = (HttpWebRequest)WebRequest.Create(uri);
            request.Method = "GET";
//important  request.UserAgent = "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)"; request.Accept = "text/html"; request.AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate; using (var response = request.GetResponse() as HttpWebResponse) { using (var stream = response.GetResponseStream()) { htmlDoc.Load(stream, Encoding.UTF8); } } return htmlDoc; }
اینم روش دوم که بازم UserAgent باید اضافه بشه
private static HtmlDocument GetXHtmlFromUri2(string uri)        {
            WebClient client = new WebClient() { Encoding = Encoding.UTF8 };
            client.Headers.Add("user-agent", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)");

            HtmlDocument htmlDoc = new HtmlDocument()
            {
                OptionCheckSyntax = true,
                OptionFixNestedTags = true,
                OptionAutoCloseOnEnd = true,
                OptionDefaultStreamEncoding = Encoding.UTF8
            };

            htmlDoc.LoadHtml(client.DownloadString(uri));

            return htmlDoc;
        }

مطالب
CoffeeScript #4

Syntax

Loops

for name in ["Vahid", "Hamid", "Saeid"]
  alert "Hi #{name}"
نتیجه‌ی کامپایل کد بالا می‌شود:
var i, len, name, ref;

ref = ["Vahid", "Hamid", "Saeid"];
for (i = 0, len = ref.length; i < len; i++) {
  name = ref[i];
  alert("Hi " + name);
}
درصورتیکه نیاز به شمارنده‌ی حلقه داشته باشید، کافیست یک آرگومان اضافه را ارسال کنید. برای نمونه:
for name, i in ["Vahid", "Hamid", "Saeid"]
  alert "#{i} - Hi #{name}"
همچنین می‌توانید حلقه را به صورت یک خطی نیز بنویسید:
alert name for name in ["Vahid", "Hamid", "Saeid"]
همچنین مانند Python نیز می‌توانید از فیلتر کردن در حلقه، استفاده کنید.
names = ["Vahid", "Hamid", "Saeid"]
alert name for name in names when name[0] is "V"
و نتیجه کامپایل کد بالا می‌شود:
var i, len, name, names;

names = ["Vahid", "Hamid", "Saeid"];

for (i = 0, len = names.length; i < len; i++) {
  name = names[i];
  if (name[0] === "V") {
    alert(name);
  }
}
شما می‌توانید حلقه را برای یک object نیز استفاده کنید. به جای استفاده از کلمه‌ی کلیدی in، از کلمه کلیدی of استفاده کنید.
names = "Vahid": "Mohammad Taheri", "Ali": "Ahmadi"
alert("#{first} #{last}") for first, last of names
پس از کامپایل نتیجه می‌شود:
var first, last, names;

names = {
  "Vahid": "Mohammad Taheri",
  "Ali": "Ahmadi"
};

for (first in names) {
  last = names[first];
  alert(first + " " + last);
}
حلقه while در CoffeeScript به مانند جاوااسکریپت عمل می‌کند؛ ولی مزیتی نیز به آن اضافه شده است که آرایه‌ای از نتایج را بر می‌گرداند. به عنوان مثال مانند تابع ()Array.prototype.map .
num = 6
minstrel = while num -= 1
  num + " Hi"
نتیجه‌ی کامپایل آن می‌شود:
var minstrel, num;
num = 6;
minstrel = (function() {
  var _results;
  _results = [];
  while (num -= 1) {
    _results.push(num + " Hi");
  }
  return _results;
})();


Arrays

CoffeeScript با الهام گرفتن از Ruby، به وسیله تعیین محدوده، آرایه را ایجاد می‌کند. محدوده آرایه به وسیله دو عدد تعیین می‌شوند که با .. یا ... از هم جدا می‌شوند.
range = [1..5]
نتیجه‌ی کامپایل می‌شود:
var range;
range = [1, 2, 3, 4, 5];
در صورتی که محدوده‌ی آرایه بلافاصله بعد از یک متغیر بیاید CoffeeScript، کد نوشته شده را به تابع ()slice تبدیل می‌کند.
firstTwo = ["one", "two", "three"][0..1]
نتیجه کامپایل می‌شود:
var firstTwo;
firstTwo = ["one", "two", "three"].slice(0, 2);
در مثال بالا محدوده تعیین شده سبب می‌شود که یک آرایه جدید با دو عنصر "one" و "two" ایجاد شود. همچنین می‌توانید برای جایگزینی مقادیر جدید، در یک آرایه از قبل تعریف شده نیز از روش زیر استفاده کنید.
numbers = [0..9]
numbers[3..5] = [-3, -4, -5]
نکته: در صورتیکه متغیری قبل از تعریف محدوده آرایه قرار گیرد، اگر رشته باشد، نتیجه‌ی خروجی، آرایه‌ای از کاراکترهای آن می‌شود.
my = "my string"[0..2]
چک کردن وجود یک مقدار در آرایه، یکی از مشکلاتی است که در جاوااسکریپت وجود دارد (عدم پشتیبانی از ()indexOf در IE کمتر از 9). CoffeeScript با استفاده از کلمه‌ی کلیدی in این مشکل را برطرف کرده است.
words = ["Vahid", "Hamid", "Saeid", "Ali"]
alert "Stop" if "Hamid" in words
نکات مهم
  1. در صورت تعریف محدوده آرایه به صورت [..3]numbers (که آرایه numbers از قبل تعریف شده باشد)، خروجی، آرایه‌ای از مقادیر موجود در numbers را از خانه شماره 4 تا انتهای آن برمی گرداند.
  2. در صورت تعریف محدوده آرایه به صورت [..3-]numbers (که آرایه numbers از قبل تعریف شده باشد)، خروجی، آرایه‌ای از مقادیر موجود در numbers را از خانه انتهایی به میزان 3 خانه به سمت ابتدای آرایه برمیگرداند.
  3. در صورت عدم تعریف محدوده آرایه و فقط استفاده از [..] یا [...] (یک شکل عمل می‌کنند)، کل مقادیر آرایه اصلی (که از قبل تعریف شده باشد)، برگردانده می‌شود.
  4. تفاوت .. و ... در حالتی که دو عدد برای محدوده تعریف شود، در این است که ... آرایه به صورت عدد انتهایی - 1 تعریف می‌شود. مثلا [3...0] یعنی خانه‌های آرایه از 0 تا 2 را به عنوان خروجی برگردان.

Aliases

CoffeeScript شامل یک سری نام‌های مستعار است که برای خلاصه نویسی بیشتر بسیار مفید هستند. یکی از آن نام ها، @ است که به جای نوشتن this به کار می‌رود.
@name = "Vahid"
نتیجه کامپایل آن می‌شود:
this.name = "Vahid";
یکی دیگر از این نام ها، :: می‌باشد که به جای نوشتن prototype به کار می‌رود.
User::first = -> @records[0]
نتیجه کامپایل آن می‌شود:
User.prototype.first = function() {
  return this.records[0];
};
یکی از عمومی‌ترین شرط هایی که در جاوااسکریپت استفاده می‌شود، شرط چک کردن not null است. CoffeeScript این کار را با استفاده از ? انجام می‌دهد و در صورتی که متغیر برابر با null یا undefined نباشد، مقدار true را برمی گرداند. این ویژگی همانند ?nil در Ruby است.
alert "OK" if name?
نتیجه‌ی کامپایل آن می‌شود:
if (typeof name !== "undefined" && name !== null) {
  alert("OK");
}
از ? به جای || نیز می‌توانید استفاده کنید.
name = myName ? "-"
نتیجه‌ی کامپایل آن می‌شود:
var name;

name = typeof myName !== "undefined" && myName !== null ? myName : "-";
در صورتیکه بخواهید به یک property از یک شیء دسترسی داشته باشید و بخواهید null نبودن آن را قبل از دسترسی به آن چک کنید، می‌توانید از ? استفاده کنید.
user.getAddress()?.getStreetName()
نتیجه‌ی کامپایل آن می‌شود:
var ref;

if ((ref = user.getAddress()) != null) {
  ref.getStreetName();
}
همچنین در صورتیکه بخواهید چک کنید یک property در واقع یک تابع است یا نه (مثلا برای مواقعی که می‌خواهید callback بسازید) و سپس آن را فراخوانی کنید، نیز از ? می‌توانید استفاده کنید.
user.getAddress().getStreetName?()
و نتیجه‌ی کامپایل آن می‌شود:
var base;

if (typeof (base = user.getAddress()).getStreetName === "function") {
  base.getStreetName();
}
مطالب
یکدست کردن "ی" و "ک" در ASP.NET MVC با پیاده‌سازی یک Model Binder

قبلا در همین وب‌سایت در مورد یکسان‌سازی حروف "ی" و "ک" مطلبی بیان شده است. تمرکز آن مطلب بر روی اعمال تغییرات، قبل از ذخیره در دیتابیس با استفاده از EF است. به عبارتی، متن‌هایی که توسط مدیر سایت یا هر کاربر دیگری برای ذخیره شدن در دیتابیس وارد شده است. اما در صورتی که کاربری در جستجوی خود از حروف "ی" و "ک" عربی استفاده کند چه می‌شود؟ در اینجا می‌خواهیم روشی را پیاده‌سازی کنیم که عمومی بوده و بتواند هر دوی این حالات را پوشش دهد.

مسئله این است که بایستی تمام ورودی‌های کاربران سایت که از نوع رشته هستند چک و در صورت نیاز اصلاح شوند. بهترین روشی که به ذهن من می‌رسد این است که در فرایند Model Binding این عمل انجام بگیرد. با تعریف یک Model Binder برای نوع رشته می‌توانیم عمل یکدست‌سازی را به صورت عمومی در تمام وب‌سایت اعمال کنیم.

در MVC یک Model Binder پیش‌فرض داریم به نام DefaultModelBinder . ما هم از همین کلاس استفاده می‌کنیم تا تمام کارها را برای ما انجام دهد. تنها بایستی در متد BindModel آن کد موردنظر خود را اضافه کنیم و سپس اجازه دهیم بقیه فرایند به شکل عادی ادامه پیدا کند.

کلاسی به نام StringModelBinder اضافه کرده و کلاس DefaultModelBinder را به عنوان کلاس پایه آن تعریف می‌کنیم. سپس متد BindModel آنرا override کرده، کد مربوط به یکدست‌سازی را اضافه می‌کنیم :

    public class StringModelBinder : DefaultModelBinder
    {
        public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            object value = base.BindModel(controllerContext, bindingContext);

            if (value == null)
            {
                return value;
            }

            return value.ToString().Replace((char)1610, (char)1740).Replace((char)1603, (char)1705);
        }
    }

ابتدا مقدار به دست آمده توسط متد پیش‌فرض را می‌گیریم. سپس در صورت نیاز یکسان‌سازی را انجام می‌دهیم.

برای فعال کردن این Model Binder بایستی آنرا در رویداد Application_start برنامه، برای نوع رشته به ModelBinder‌های برنامه اضافه کنیم :

ModelBinders.Binders.Add(typeof(string), new StringModelBinder());

 
مطالب
یک تکنیک جالب در نحوه نام گذاری فیلدهای دیتابیس به منظور استفاده بهینه از فایل های T4 در MVC5
بدون شک دوستانی که با تکنولوژی محبوب ASP.NET MVC5 کار کرده اند این نکته را می‌دانند که اگر فایل‌های T4 که وظیفه Scaffolding را به عهده دارند به پروژه خود اضافه کنند می‌توانند نحوه تولید خودکار Controller‌ها و View‌های متناظر را سفارشی کنند. مثلا می‌توان این فایل‌ها را طوری طراحی کرد که Controller و View‌های تولیدی به طور اتوماتیک چند زبانه و یا Responsive تولید شوند (این موضوعات بحث اصلی مقاله نیستند) و اما بحث اصلی را با یک مثال آغاز می‌کنیم :
فرض کنید در دیتابیس خود یک Table دارید که قرار است اطلاعات یک Slider  را در خود نگه دارد. این Table دارای یک فیلد از نوع nvarchar برای ذخیره آدرس تصویر ارسالی توسط کاربر است.
در حالت عادی اگر از روی مدل این Table اقدام به تولید خودکار Controller و View متناظر کنید، یک editor (تکست باکس) برای دریافت آدرس تصویر تولید خواهد شد که برنامه نویس یا طراح باید به طور دستی آن را (به طور مثال) با Kendo uploader جایگزین نماید. ما می‌خواهیم برای فیلدهایی که قرار است آدرس تصویر را در خود نگه دارد به طور اتوماتیک از Kendo uploader استفاده شود. راه حل چیست؟
بسیار ساده است. ابتدا باید در نظر داشت که هنگام طراحی Table در دیتا بیس فیلد مورد نظر را به این شکل نامگذاری کنید : ExampleIMGURL (نحوه نام گذاری دلخواه است) مقصود آن است که نام هر فیلدی که قرار است آدرس یک تصویر  را در خود نگه دارد باید حاوی کلمه (IMGURL) باشد. مجددا ذکر می‌شود که نحوه نامگذاری اختیاری است. سپس  فایل Create.t4 را باز کنید و کد :
@Html.EditorFor(model => model.<#= property.PropertyName #>)
را با کد زیر جایگزین کنید :
<#
if (GetAssociationName(property).Contains ("IMGURL")
{
#>
     @Html.Kendo().Upload().Name("<#= property.PropertyName #>")
<#
}
else
{
#>
     @Html.EditorFor(model => model.<#= property.PropertyName #>) 
<#
}
#>
کد بالا چک می‌کند اگر نام فیلد مد نظر حاوی " IMGURL  " باشد یک کندو آپلودر تولید کرده در غیر این صورت یک ادیتور ساده تولید می‌کند. البته این فقط یک مثال است و بدون شک دامنه استفاده از این تکنیک وسیع‌تر است.

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

Hello,
you should definitely check this thing out http://www.newsl5.net/biz/?page=xyz

این ایمیل‌ها هم جعلی نبودند. یعنی واقعا از اکانت یاهوی من ارسال شده بودند و در قسمت sent وجود خارجی داشتند! فقط IP ارسال کننده آن (115.78.224.246) متعلق به کشور ویتنام بود (IP ارسال کننده را در هدر ایمیل ارسالی می‌توان مشاهده کرد).
این مساله باعث شد که من سیستم را چندین بار چک کنم؛ از لحاظ بحث ویروس تا اسپای‌ور و غیره. «هیچ» مشکلی مشاهده نشد.
مرحله بعد کمی در مورد یاهو جستجو کردم و مشخص شد که یاهو با session hijacking به شدت مشکل دارد. همچنین ابزار دیگری که می‌تواند به این session hijacking کمک کند خود «فایرفاکس» است. فایرفاکس حاوی گزینه‌ای است که سشن‌های قبلی شما را ذخیره می‌کند. زمانیکه مرورگر را بسته و پس از مدتی آن‌را باز می‌کنیم، یک راست و قشنگ همان سشن قبلی مثلا یاهو را بازیابی کرده و کار ادامه پیدا می‌کند.
کمی گشتم و این قابلیت رو به کل غیرفعال کردم. برای غیرفعال کردن آن «Disable Session Restore in Firefox» را در گوگل جستجو کنید.
و خلاصه آن به صورت زیر است:
در نوار آدرس فایرفاکس تایپ کنید about:config
در ادامه موارد زیر را یافته و غیرفعال کنید:
browser.sessionstore.resume_from_crash;false
browser.sessionstore.resume_session_once;false
browser.sessionstore.restore_pinned_tabs_on_demand;false
browser.sessionstore.restore_hidden_tabs;false
services.sync.prefs.sync.browser.sessionstore.restore_on_demand;false

راه ساده‌تر:
افزونه session manager را نصب کنید
در قسمت session manager options در برگه startup & shutdown آن کلا بحث ذخیره سازی سشن در حین بسته شدن مرورگر را غیرفعال کنید.


و به صورت خلاصه: تنظیمات پیش فرض فایرفاکس از لحاظ امنیتی مناسب نیستند.
ضمن اینکه ایمیل فوق رو من هفته‌ای یکی دو بار از تمام افرادی که می‌شناسم دریافت می‌کنم! به عبارتی خیلی‌ها گرفتار این مساله شده‌اند.
ذخیره سازی سشن‌ها به نظر کارها رو ساده می‌کنه. مرورگر رو باز می‌کنی همه چیز مثل قبل از بسته شدن آن است و ... همین یعنی مشکل امنیتی. خصوصا مراجعه به سایت‌ها و لینک‌هایی که از باگ‌های XSS سوء استفاده می‌کنند.
 
مطالب
تنظیمات شیرپوینت برای فعال سازی Session در هنگام کد نویسی

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

اگر کد خود را بعد از پیاده سازی Session اجرا کنید چنین پیغامی را مشاهده خواهید کرد: 

Server Error in '/' Application.
 
Session state can only be used when enableSessionState is set to true, either in a configuration file or in the Page directive. Please also make sure that System.Web.SessionStateModule or a custom session state module is included in the <configuration>\<system.web>\<httpModules> section in the application configuration. 

این پیغام نشان می دهد که تنظیمات Session در فایل web.config فعال نیست .یکی از راه حل های این مشکل چک کردن ویژگی enableSessionState="true" در هدر صفحه و در تگ Page است 

اگر این ویژگی True باشد و همچنان همان پیغام فوق را مشاهده کردید به فایلweb.config وبسایت مورد نظر مراجعه کرده و به روش زیر عمل کنید : 

// 1 - Find This Node
<modules runAllManagedModulesForAllRequests="true">
// 2 - Add These Nodes
<remove name="Session" />
<add name="Session" type="System.Web.SessionState.SessionStateModule" preCondition="" /> 

اکنون امکان استفاده از Session برای شما فراهم شده است . 

در غیر این صورت باید تغییراتی در Permission Policy های شیرپوینت که در فایل های wss_minimaltrust.config و wss_mediumtrust.config و ... انجام دهید و یک Permission Set به آن اضافه کنید 

این فایل ها در زیر مجموعه 14 و در پوشه CONFIG قرار دارند . 

موفق باشید

مطالب
ساخت ActionResult سفارشی
پیشتر با انواع ActionResult آشنا شدید. حال فرض کنید می‌خواهید نوعی رو برگردونید که براش ActionResult موجود نباشه مثلا RSS و یا فایل از نوع Excel و...
خوب، فرض کنید می‌خواهید اکشن متدی رو بنویسید که قراره نام یک فایل متنی رو بگیره و انو تو مروگر به کاربر نمایش بده.
برای اینکار از کلاس ActionResult، کلاس دیگه‌ی رو بنام TextResult به ارث می‌بریم و از این ActionResult سفارشی شده، در اکشن متد مربوطه استفاده می‌کنیم:
public class TextResult : ActionResult
{
    public string FileName { get; set; }
    public override void ExecuteResult(ControllerContext context)
    {
        var filePath = Path.Combine(context.HttpContext.Server.MapPath(@"~/Files/"), FileName);
        var data = File.ReadAllText(filePath);
        context.HttpContext.Response.Write(data);
    }
}
نحوه استفاده
    public ActionResult DownloadTextFile(string fileName)
    {
        return new TextResult { FileName = fileName };
    }
در واقع متد اصلی اینجا ExecuteResult هست که نتیجه‌ی کار یک اکشن رو می‌تونیم پردازش کنیم.
خوب، سوالی که اینجا پیش میاد اینه که چرا این همه کار اضافی، چرا از Return File  استفاده نمی‌کنی؟
    public ActionResult DownloadTextFile(string fileName)
    {
        var filePath = Path.Combine(HttpContext.Server.MapPath(@"~/Files/"), fileName);
        return File(filePath, "text");
    }
 یا کلا دلیل استفاده از ActionResult سفارشی چیه؟

  • جلوگیری از پیچیدگی و  تکرار کد
همیشه کار مثل مورد بالا راحت و کم کد! نیست.
به مثال زیر توجه کنید که قراره خروجی CSV  بهمون بده.
public class CsvActionResult : ActionResult
{
    public IEnumerable ModelListing { get; set; }

    public CsvActionResult(IEnumerable modelListing)
    {
        ModelListing = modelListing;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        byte[] data = new CsvFileCreator().AsBytes(ModelListing);
        var fileResult = new FileContentResult(data, "text/csv")
        {
            FileDownloadName = "CsvFile.csv"
        };
        fileResult.ExecuteResult(context);
    }
}
و نحوه استفاده:
    public ActionResult ExportUsers()
    {
        IEnumerable<User> model = UserRepository.GetUsers();
        return new CsvActionResult(model);
    }
حال فرض کنید بخواهیم همه این کدها رو داخل اکشن متد داشته باشیم، یکم پیچیده میشه و یا فرض کنید کنترلر دیگه‌‌ای نیاز به خروجی CSV  داشته باشه، تکرار کد زیاد میشه.

  • راحت کردن گرفتن تست واحد از اکشن‌ها متدها
کاربرد ActionResult سفارشی تو تست واحد اینه که وابستگی‌های یک اکشن رو که Mock کردنش سخته می‌بریم داخل ActionResult و هنگام نوشتن تست واحد درگیر کار با اون وابستگی نمی‌شیم.
به مثال زیر توجه کنید که قراره برای اکشن Logout  تست واحد بنویسیم
ابتدا بردن وابستگی‌ها به خارج از اکشن به کمک ActionResult سفارشی
public class LogoutActionResult : ActionResult
{
    public RedirectToRouteResult ActionAfterLogout { get; set; }
    public LogoutActionResult(RedirectToRouteResult actionAfterLogout)
    {
        ActionAfterLogout = actionAfterLogout;
    }
    public override void ExecuteResult(ControllerContext context)
    {
        FormsAuthentication.SignOut();
        ActionAfterLogout.ExecuteResult(context);
    }
}
نحوه استفاده از ActionResult سفارشی
    public ActionResult Logout()
    {
        var redirect = RedirectToAction("Index", "Home");
        return new LogoutActionResult(redirect);
    }
و سپس نحوه تست واحد نوشتن
    [TestMethod]
    public void The_Logout_Action_Returns_LogoutActionResult()
    {
        //arrange
        var account = new AccountController();

        //act
        var result = account.Logout() as LogoutActionResult;

        //assert
        Assert.AreEqual(result.ActionAfterLogout.RouteValues["Controller"], "Home");
    }
خوب به راحتی ما میایم فراخوانی متد SignOut رو از داخل اکشن می‌کشیم بیرون و این کار از اجرای متد SignOut  از داخل اکشن متد جلوگیری می‌کنه و همچنین با این کار هنگام تست واحد نوشتن نیاز نیست با Mock  کردن کلاس FormsAuthentication سروکار داشته باشیم و فقط کافیه چک کنیم خروجی از نوع LogoutActionResult هست یا خیر و یا می‌تونیم ActionAfterLogout رو چک کنیم.

منابع و مراجع: + و +
 
مطالب
آشنایی با Gridify
Gridify چیست ؟

به طور خلاصه Gridify یک کتابخانه ساده و سریع است که عملیات‌های Filtering , Pagination و Sorting را با استفاده از شرط‌های متنی (string based) امکان پذیر میکند.
به طور مثال فرض کنید که یک API را برای دریافت لیست کاربران با نام UsersList نوشته‌اید. مثال:
 [HttpGet("[action]")]
 public async Task<IActionResult> UsersList()
 {
    var users =  await _dbContext.Users.AsNoTracking().ToListAsync();
    return Ok(users);
 }
طبیعتا بخش FrontEnd نرم افزار شما نیاز دارد این اطلاعات را به کاربر نمایش دهد. به همین جهت در بیشتر مواقع از یک گرید برای نمایش این اطلاعات استفاده میشود.
پس از دریافت اطلاعات از سرور با مشکلات زیر مواجه خواهیم شد.
  1. عدم پشتیبانی از Pagination: چون API، تمامی کاربران را به سمت کلاینت ارسال میکند؛ به همین جهت، هم با مشکل کارآیی (performance) در آینده مواجه میشویم و هم امکان گذاشتن صفحه بندی (Pagination) وجود نخواهد داشت. 
  2. عدم پشتیبانی از Sorting: اگر در گرید نمایش داده شده کاربر بخواهد اطلاعات را Sort کند، چون چنین امکانی هنوز برای API ما تعریف نشده، این عملیات سمت سرور امکان پذیر نیست.
  3. عدم پشتیبانی از Filtering: همیشه نمایش تمامی اطلاعات مفید نیست. در اکثر مواقع ما نیاز داریم تا قسمتی از اطلاعات را با شرطی خاص، برگردانیم. به طور مثال لیست کاربران فعال در سامانه یا لیست کاربران غیرفعال. 
این مشکلات بدون استفاده از هیچ کتابخانه‌ای قابل حل است ولی نه به سادگی؛ به طور مثال یا باید چندین API مختلف با امکانات مختلف بنویسیم، یا یک API را برای پشتیبانی از این موارد تغییر بسیار دهیم. من برای اینکه از بحث دور نشویم، به پیاده سازی نمونه دستی پشتیبانی از این موارد در اینجا نمی‌پردازم، چرا که اگر یکبار تلاشی را برای اینکار انجام داده باشیم، طبیعتا  مشکلات و کد کثیفی که در نهایت تولید شده است، یادآوری خواهد شد. 
برای رفع این مشکلات میتوان از کتابخانه Gridify استفاده کرد. مثال :
 [HttpGet("[action]")]
 public async Task<IActionResult> UsersList(GridifyQuery filter)
 {
    var users =  await _dbContext.Users.AsNoTracking().GridifyAsync(filter);
    return Ok(users);
 }
در مثال بالا با استفاده از کلاس GridifyQuery میتوانیم به کنترل هر سه مشکل Sorting - Pagination - Filtering سمت کلاینت بپردازیم. (در ادامه با این کلاس بیشتر آشنا خواهیم شد).


استفاده از Gridify به API‌ها محدود نمیشود. به طور کلی ما میتوانیم در هر نوع لیستی که امکان استفاده از IQueryable  را به ما میدهد از آن استفاده نماییم. 
فرض کنید در یک برنامه Console Application قصد داریم یک فیلتر را از کاربر دریافت کرده و آن را روی لیست خروجی خود اعمال کنیم. به دلیل اینکه امکان جستجوی متنی در دات نت وجود ندارد، برای انجام اینکار مجبور خواهیم شد که برای تک تک فیلدهایی که قرار است برای فیلترینگ پشتیبانی کنیم، یک query جداگانه بنویسیم؛ ولی این عملیات توسط کتابخانه Gridify امکان پذیر است. به طور مثال فرض کنید قصد داریم در لیست کاربران، کاربرانی را  با نام Ali، پیدا کنیم. 
var result = Users.AsQueryable().ApplyFiltering("name==Ali");
این کد دقیقا معادل کد زیر است.
var result = Users.AsQueryable().Where(q => q.Name == "Ali");
در اینجا با استفاده از کتابخانه Gridify ما توانستیم یک static Linq را به یک dynamic Linq که در runtime مقدار دهی خواهد شد، تغییر دهیم. به همین جهت استفاده از مورد اول در برنامه‌ی Console ما امکان پذیر است. تا اینجا ما با امکانات کلی این کتابخانه آشنا شدیم. در مقالات بعدی سعی میکنم به سایر امکانات این کتابخانه و بیشتر به جزئیات بپردازم. همینطور برای کسب اطلاعات بیشتر میتوانید به لینک زیر مراجعه نمایید.
مطالب
Virtual Scrolling در Angular 7
یکی از امکانات Angular 7، ویژگی Virtual Scrolling می‌باشد. در صورتیکه شما قصد داشته باشید یک لیست بزرگ از المنت‌ها را  بارگذاری کنید، این‌کار می‌تواند بر روی کارآیی برنامه‌ی شما تاثیر بگذارد . تگ زیر
<cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>
می تواند برای بارگذاری تنها بخش‌های قابل مشاهده‌ی از یک لیست، بر روی صفحه نمایش استفاده شود و همچنین تنها آیتم‌هایی Render خواهند شد که می‌تواند آن‌ها را در صفحه نمایش جا دهد. اگر لیست بارگذاری شده را اسکرول کنیم، در این حالت المنت‌ها در DOM  به صورت پویا  load و unload می‌شوند. 
قبل از پیاده سازی ، لازم است Angular CLI  را به آخرین نسخه بروز رسانی کنیم. برای بروز رسانی Angular CLI  دستور زیر را اجرا می‌کنیم:
npm install -g @angular/cli
بعد از نصب با استفاده از ng version  نسخه‌ی Angular CLI  را بررسی می‌کنیم که باید بزرگتر از 7 باشد:

حالا نوبت به ایجاد یک پروژه‌ی جدید می‌باشد. با استفاده از دستور زیر یک پروژه جدید ایجاد می‌شود:
ng new angular7-virtualScrolling
بعد از تایید دستور بالا،  دو سؤال از شما پرسیده می‌شود؟
1- آیا قصد دارید Angular routing اضافه شود یا نه؟ ( در نسخه‌های قبلی با استفاده از routing--  این کار را انجام می‌دادیم)


2-انتخاب فرمت stylesheet که قصد استفاده‌ی از آن‌را دارید ( با کلید‌های جهتی بالا و پایین روی صحفه کلید می‌توانید یکی از گزینه‌ها را انتخاب کنید )


برای استفاده از Virtual Scrolling نیاز است پکیج زیر را نصب کنیم : 
npm install @angular/cdk@latest
بعد از نصب، دستور ng serve را اجرا می‌کنیم تا بررسی کنیم که برنامه به درستی اجرا می‌شود یا نه. سپس فایل app.module.ts را باز می‌کنیم و ScrollingModule را در بخش imports اضافه می‌کنیم. اکنون نیاز است تا یک آرایه را برای نمایش آیتم‌های لیست، تولید کنیم. قطعه کد زیر در فایل app.component.ts  قرار دارد که یک آرایه عددی را ایجاد می‌کند و تعدادی آیتم را به آن اضافه می‌کند:
  title = 'Angular 7 – Virtual Scrolling feature';
  scrollItems: number[] = [];
  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.scrollItems.push(index);
    }
  }

در فایل app.component.html  قطعه کد زیر را قرار می‌دهیم:
    <div>
      <h4>
        {{this.title}}
      </h4>
      <cdk-virtual-scroll-viewport itemSize="100">
        <div *cdkVirtualFor="let n of scrollItems">Item {{n}}</div>
      </cdk-virtual-scroll-viewport>
    </div>

داخل تگ  cdk-virtual-scroll-viewport، یک div را ایجاد و سپس یک دایرکتیو را به نام cdkVirtualFor* به آن اضافه می‌کنیم. این دایرکتیو، ngFor* را درون cdk-virtual-scroll-viewport، جایگزین می‌کند که شما با استفاده از آن می‌توانید یک حلقه بر روی آرایه  scrollItems  جهت پیمایش ایجاد کنید.
تمام ! اکنون پروژه را اجرا کنید.
در اولین بار اجرا :    


بعد از اسکرول کردن لیست : 


همانطور که مشاهده می‌کنیم المنت‌های قبلی unload شدند و المنت‌های جدید load شدند
DEMO 


مطالب
جایگزین کردن jQuery با JavaScript خالص - قسمت چهارم - ایجاد تغییرات در DOM
Document Object Model و یا به اختصار DOM به ظهور زبان JavaScript  گره خورده‌است. این مدل به همراه یک API پیاده سازی شده‌ی با JavaScript است که امکان دسترسی به اسناد HTML را مسیر می‌کند. علاوه بر امکاناتی مانند انتخاب عناصر، کار با ویژگی‌ها و ذخیره‌ی اطلاعات که تاکنون بررسی کردیم، DOM API به همراه روش‌هایی برای ایجاد عناصر جدید، حذف عناصر موجود و جابجایی آن‌ها در صفحه می‌باشد. یکی از مهم‌ترین اهداف jQuery کار ساده‌تر با DOM است و تعداد متدهایی را که برای کار با DOM ارائه می‌کند، تاکنون کمتر از 20 درصد کل DOM API اصلی را پوشش می‌دهند.


حرکت دادن المان‌ها در صفحه

ابتدا قطعه کد HTML زیر را درنظر بگیرید:
  <body>
    <h2>Flavors</h2>
    <ul class="flavors">
      <li>chocolate</li>
      <li>strawberry</li>
      <li>vanilla</li>
    </ul>

    <h2>Types</h2>
    <ul class="types">
      <li>frozen yogurt</li>
      <li>custard</li>
      <li>Italian ice</li>
    </ul>

    <ul class="unassigned">
      <li>rocky road</li>
      <li>gelato</li>
    </ul>
  </body>
می‌خواهیم با تغییر DOM، به خروجی زیر برسیم که در آن لیست‌ها جابجا، تکمیل و یا خالی شده‌اند:
  <body>
    <h2>Types</h2>
    <ul class="types">
      <li>frozen yogurt</li>
      <li>Italian ice</li>
      <li>custard</li>
      <li>gelato</li>
    </ul>

    <h2>Flavors</h2>
    <ul class="flavors">
      <li>chocolate</li>
      <li>vanilla</li>
      <li>rocky road</li>
      <li>strawberry</li>
    </ul>

    <ul class="unassigned">
    </ul>
  </body>

حرکت دادن المان‌ها توسط jQuery
var $flavors = $('.flavors');
var $chocolate = $flavors.find('li').eq(0);
var $vanilla = $flavors.find('li').eq(2);
$chocolate.after($vanilla);
به این ترتیب vanilla به بعد از chocolate در لیست flavors منتقل می‌شود.
در ادامه می‌خواهیم لیست types را به همراه عنوان آن‌، به قبل از لیست flavors منتقل کنیم:
var $typesHeading = $('h2').eq(1);
$typesHeading.prependTo('body');
$typesHeading.after($('.types'));
متد prependTo سبب درج عنوان types دقیقا پس از تگ body می‌شود. سپس لیست types را پس از این عنصر جابجا شده اضافه می‌کنیم.
سپس در لیست unassigned ابتدا rocky road آن‌را یافته و به بالای strawberry در لیست flavors اضافه می‌کنیم. همچنین gelato آن‌را نیز یافته و به انتهای لیست types اضافه خواهیم کرد:
var $unassigned = $('.unassigned');
var $rockyRoad = $unassigned.find('li').eq(0);
var $gelato = $unassigned.find('li').eq(1);

$vanilla.after($rockyRoad);
$gelato.appendTo($('.types'));

حرکت دادن المان‌ها توسط جاوا اسکریپت خالص (سازگار با IE 8.0 به بعد)

در ابتدا می‌خواهیم المان vanilla را به قبل از المان strawberry حرکت دهیم. برای اینکار می‌توان از متد استاندارد insertBefore استفاده کرد:
var flavors = document.querySelector('.flavors');
var strawberry = flavors.children[1];
var vanilla = flavors.children[2];

flavors.insertBefore(vanilla, strawberry);
flavors در اینجا والد نودی است که قرار است جابجا شود. اولین پارامتری که به متد insertBefore ارسال می‌شود، المانی است که قرار است جابجا شود. دومین پارامتر آن «نود مرجع» است. چون می‌خواهیم vanilla را قبل از strawberry درج کنیم، المان strawberry نود مرجع خواهد بود.
سپس کار انتقال عنوان لیست types و خود آن به قبل از لیست flavors صورت می‌گیرد:
var headings = document.querySelectorAll('h2');
var flavorsHeading = headings[0];
var typesHeading = headings[1];
var typesList = document.querySelector('.types');

document.body.insertBefore(typesHeading, flavorsHeading);
document.body.insertBefore(typesList, flavorsHeading);
در اینجا ابتدا عنوان types، به ابتدای document.body منتقل می‌شود (چون والد این عنوان document.body است، متد insertBefore بر روی آن فراخوانی می‌شود). سپس می‌خواهیم خود typesList را نیز حرکت دهیم. به همین جهت نیاز به نود مرجع عنوان flavors است که به عنوان پارامتر دوم متد insertBefore ذکر شده‌است تا این لیست، پیش از آن درج شود.
در آخر می‌خواهیم آیتم‌های لیست unassigned را به لیست‌های مرتبط با آ‌ن‌ها انتقال دهیم:
flavors.insertBefore(document.querySelector('.unassigned > li'), strawberry); 
document.querySelector('.types').appendChild(document.querySelector('.unassigned > li'));
در اولین سطر، querySelector تعریف شده، اولین المان لیست یا همان rocky road را بازگشت می‌دهد. به این ترتیب المان rocky road لیست unassigned به لیست flavors منتقل می‌شود . به همین جهت flavors به عنوان والد متد insertBefore تعریف شده‌است. نود مرجع نیز strawberry است؛ زیرا می‌خواهیم rocky road را به پیش از آن منتقل کنیم.
در سطر دوم، چون هم اکنون المان rocky road از لیست unassigned حذف شده‌است، متد querySelector فراخوانی شده، اولین عنصر لیست یا همان gelato را بازگشت می‌دهد. این المان را توسط متد appendChild به انتهای لیست types اضافه خواهیم کرد. متد appendChild نیز همانند متد insertBefore نیاز به یک والد دارد که همان عنصری است که قرار است المان‌ها به آن افزوده شوند.


کپی کردن المان‌ها

  <ol class="numbers">
    <li>one</li>
    <li>two</li>
  </ol>
در جی‌کوئری برای تهیه‌ی یک کپی از این المان خواهیم داشت:
 // deep clone: return value is an exact copy
$('.numbers').clone();
اگر به این متد پارامتر true نیز ارسال شود، اطلاعات و همچنین رخ‌دادهای منتسب به آن نیز کپی می‌شوند. البته این کپی فقط شامل اطلاعات تدارک دیده شده‌ی توسط jQuery API است و نه خارج از آن.
و در جاوا اسکریپت خالص (سازگار با IE 8.0 به بعد) برای کپی کردن المان‌ها دو روش shallow و deep وجود دارد:
// shallow clone: return value is an empty <ol>
document.querySelector('.numbers').cloneNode();

// deep clone: return value is an exact copy of the tree
document.querySelector('.numbers').cloneNode(true);
Shallow clone به معنای کپی المان ol بدون فرزندان آن است. در حالت deep clone المان ol و تمام فرزندان آن با هم کپی می‌شوند.
باید دقت داشت که متد cloneNode آنچه را که مشاهده می‌کنید یا همان اصل markup را کپی می‌کند. بنابراین اگر از طریق جاوا اسکریپت تغییراتی را در آن شیء داده باشید در متد cloneNode لحاظ نمی‌شود.
بدیهی است المان‌های clone شده تا زمانیکه با متدهایی مانند insertBefore و یا appendChild به صفحه اضافه نشوند، در صفحه نمایان نخواهند شد.


ایجاد و حذف المان‌ها

فرض کنید می‌خواهیم به لیست flavors مثال ابتدای بحث، دو مورد جدید را اضافه کنیم.
روش افزودن المان‌های جدید توسط جی‌کوئری:
var $flavors = $('.flavors');

// add two new flavors
$('<li>pistachio</li>').appendTo($flavors);
$('<li>neapolitan</li>').appendTo($flavors);
و یا حذف یک آیتم موجود توسط جی‌کوئری:
// remove the "gelato" type
$('.types li:last').remove();
در اینجا last: اصطلاحا یک pseduo-class ابداعی توسط jQuery است که آنچنان کارآیی بالایی هم ندارد.

روش افزودن المان‌های جدید توسط جاوا اسکریپت خالص:
var flavors = document.querySelector('.flavors');

// add two new flavors
flavors.insertAdjacentHTML('beforeend', '<li>pistachio</li>')
flavors.insertAdjacentHTML('beforeend', '<li>neapolitan</li>')
و برای حذف آخرین آیتم یک لیست توسط جاوا اسکریپت خالص:
// remove the "gelato" type
document.querySelector('.types li:last-child').remove();
در اینجا last-child: یک CSS3 pseudo-class selector استاندارد است.
روش دیگر انجام اینکار به صورت زیر توسط متد removeChild است:
var gelato = document.querySelector('.types li:last-child');

// remove the "gelato" type
gelato.parentNode.removeChild(gelato);


کار با المان‌های متنی

در جی‌کوئری متد ()text آن امکان دریافت محتوای متنی و همچنین به روز رسانی آن‌را میسر می‌کند:
 $('.types li').eq(1).text('italian ice');
در اینجا متن دومین المان لیست types به italian ice با i کوچک به روز رسانی می‌شود.

در جاوا اسکریپت خالص، دو خاصیت textContent و همچنین innerText برای خواندن و یا به روز رسانی محتوای متنی عناصر مورد استفاده قرار می‌گیرند. برای مثال معادل قطعه کد جی‌کوئری فوق که از متد text استفاده می‌کند با جاوا اسکریپت خالص به صورت زیر است:
 document.querySelectorAll('.types li')[1].textContent = 'italian ice';
توسط querySelectorAll تمام liهای types یافت شده و سپس خاصیت textContent دومین عنصر آن با italian ice به روز رسانی شده‌است.
خاصیت innerText هرچند بر روی اینترفیس HTMLElement تعریف شده‌است، اما جزء هیچکدام از استانداردهای وب نیست؛ ولی توسط تمام مرورگرهای امروزی پشتیبانی می‌شود. در این حالت به روز رسانی متن توسط آن با خاصیت textContent دقیقا یکی است؛ اما خروجی آن برعکس حالت‌های قبل، متن رندر شده‌ی المان‌ها را بازگشت می‌دهد. برای مثال در اینجا شامل فاصله‌های پیش از این المان‌ها در markup نمی‌شود.
برای مثال این قسمتی از خروجی خاصیت textContent است:
   Flavors

      chocolate
      vanilla
      rocky road
      strawberry
اما در این همین حالت خروجی innerText به این صورت است:
Flavors

chocolate
vanilla
rocky road
strawberry
کار با محتوای HTML ایی رشته‌ای

گاهی از اوقات از سرور قطعه‌ای کد HTML ایی را دریافت می‌کنیم (که هنوز به صورت المان یا المان‌های DOM در نیامده‌است) و در سمت کلاینت می‌خواهیم آن‌را به قسمتی از صفحه اضافه کنیم. روش انجام اینکار در jQuery به صورت زیر است:
var container = '<h2>Containers</h2><ul><li>cone</li><li>cup</li></ul>';
$('<div>').html(container).appendTo('body');
ابتدا یک المان div جدید را ایجاد کرده‌ایم. سپس محتوای این div را با اطلاعات دریافتی از سرور مقدار دهی و در آخر آن‌را به انتهای body اضافه می‌کنیم.
روش دریافت محتوای رشته‌ای HTML قابل ارسال به سرور نیز به صورت زیر است:
  var contents = $('body').html();
روش انجام اینکار با جاوا اسکریپت خالص به صورت زیر است:
var div = document.createElement('div');
div.innerHTML = container;
document.body.appendChild(div);
در اینجا با استفاده از متد استاندارد createElement یک div جدید منقطع از DOM را ایجاد و سپس محتوای آن‌را توسط خاصیت innerHTML به HTML دریافتی از سرور تنظیم کرده‌ایم. در آخر این المان منقطع را توسط متد appendChild به انتهای document.body افزوده‌ایم.
روش خواندن این محتوای نهایی نیز به صورت زیر است:
var contents = document.body.innerHTML;
در حالت کار با جاوا اسکریپت خالص به خاصیت outerHTML یک المان نیز دسترسی داریم که خواندن و یا به روز رسانی آن، صرفا بر روی خود المان اصلی تاثیر می‌گذارد؛ اما innerHTML بر روی المان‌های فرزند این المان (محتوای آن) تاثیر گذار است.