اشتراک‌ها
انتشار ReSharper Ultimate 2018.3.2

ReSharper 2018.3.2 bug-fix update fixes:

- Many issues in C#, VB.NET, and TypeScript Code Analysis.
- More than a dozen issues related to parameter name hints.
- Missing “Find Code Dependent on Module” item in a context menu for a project node in the Solution Explorer tab.
- Several issues in Unit Testing.
- Some issues related to auto-detect naming style.
 

انتشار ReSharper Ultimate 2018.3.2
مطالب
نمایش پیام هشدار در Blazor با استفاده از کامپوننت Alert بوت استرپ ۵

بر اساس آموزش مدیریت حالت در Blazor، قصد داریم یک سرویس پیام هشدار ساده، ولی زیبا را بوسیله کامپوننت Alert بوت استرپ ۵ ، بدون استفاده از توابع جاوا اسکریپتی، طراحی کنیم.

در ابتدا کتابخانه‌های css زیر را بوسیله LibMan به پروژه اضافه کرده و مداخل فایل‌های را  css   نیز اضافه می‌کنیم:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "bootstrap@5.0.0",
      "destination": "wwwroot/lib/bootstrap"
    },
    {
      "provider": "unpkg",
      "library": "open-iconic@1.1.1",
      "destination": "wwwroot/lib/open-iconic"
    },
   
    {
      "provider": "unpkg",
      "library": "animate.css@4.1.1",
      "destination": "wwwroot/lib/animate"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap-icons@1.5.0",
      "destination": "wwwroot/lib/bootstrap-icons/"
    }
   ]
}

در ادامه کلاس سرویس پیام را  پیاده سازی و   آن‌ را با طول عمر Scoped به سیستم تزریق وابستگی‌های برنامه، معرفی میکنیم
    public enum  AlertType
    {
        Success,
        Info,
        Danger,
        Warning
    }

    public class AlertService
    {
        
        public void ShowAlert(string message, AlertType alertType,  string animate = "animate__fadeIn")
            {
             OnChange?.Invoke(message, alertType,animate);
            }

           public event Action<string,AlertType, string> OnChange;        
        }
services.AddScoped<AlertService>();

توضیحات:

در کدهای نهایی برنامه قرار است به این نحو کار نمایش Alertها را در کامپوننت‌های مختلف انجام دهیم:

@inject AlertService AlertService

@code {
    private void Success()
    {
        AlertService.ShowAlert("Success!", AlertType.Success);
    }
این کامپوننت‌ها هم الزاما در یک سلسله مراتب قرار ندارند و ارسال پارامترهای آبشاری به آن‌ها صدق نمی‌کند. به همین جهت یک سرویس Scoped را طراحی کرده‌ایم که در برنامه‌های Blazor WASM، طول عمر آن، با طول عمر برنامه یکی است؛ یعنی به صورت Singleton عمل می‌کند و در تمام کامپوننت‌ها و سرویس‌های دیگر نیز در دسترس خواهد بود. زمانیکه متد AlertService.ShowAlert فراخوانی می‌شود، سبب بروز رویداد OnChange خواهد شد و تمام گوش دهندگان به آن که در اینجا تنها کامپوننت Alert سفارشی ما است (برای مثال آن‌را در MainLayout.razor قرار می‌دهیم )، مطلع شده و بلافاصله محتوایی را نمایش می‌دهند.

کدهای کامپوننت Alert.razor

@inject AlertService AlertService
@implements IDisposable
 <style>
        .alert-show {
            display: flex;
            flex-direction: row;
           }

        .alert-hide {
            display: none;
        }
  </style>
    <div style="z-index: 5">
        <div " + "alert-show" :"alert-hide")">
            <i width="24" height="24"></i>
            <div>
                @Message
            </div>
            <button type="button" data-bs-dismiss="alert" aria-label="Close" @onclick="CloseClick"></button>
        </div>
    </div>


        @code {

            AlertType AlertType { get; set; }
            string Icon { get; set; }
            string Css { get; set; }
            string Animation { get; set; }
            private bool IsVisible { get; set; }
            private string Message { get; set; }
            System.Timers.Timer _alertTimeOutTimer;
            protected override void OnInitialized()
            {
              AlertService.OnChange += ShowAlert;
            }

            private void ShowAlert(string message, AlertType alertType, string animate)
            {
                _alertTimeOutTimer = new System.Timers.Timer
                {
                    Interval = 5000,
                    Enabled = true,
                    AutoReset = false
                };
                _alertTimeOutTimer.Elapsed += HideAlert;
                Message = message;
                switch (alertType)
                {
                    case AlertType.Success:
                        Css = "bg-success";
                        Icon = "bi-check-circle";
                        break;
                    case AlertType.Info:
                        Css = "bg-info";
                        Icon = "bi-info-circle-fill";
                        break;
                    case AlertType.Danger:
                        Css = "bg-danger";
                        Icon = "bi-exclamation-circle";
                        break;
                    case AlertType.Warning:
                        Css = "bg-warning";
                        Icon = "bi-exclamation-triangle-fill";
                        break;
                    default:
                        Css = Css;
                        break;
                }
                AlertType = alertType;
                Animation = animate;
                IsVisible = true;
                InvokeAsync(StateHasChanged);
            }
            private void HideAlert(Object source, System.Timers.ElapsedEventArgs e)
            {
                IsVisible = false;
                InvokeAsync(StateHasChanged);
                _alertTimeOutTimer.Close();
            }
            public void Dispose()
            {
                if (AlertService != null) AlertService.OnChange -= ShowAlert;
                if (_alertTimeOutTimer != null)
                {
                    _alertTimeOutTimer.Elapsed -= HideAlert;
                    _alertTimeOutTimer?.Dispose();
                }
            }
            private void CloseClick()
            {
                IsVisible = false;
                _alertTimeOutTimer.Close();
                InvokeAsync(StateHasChanged);
            }

        }
توضیحات:
همانطور که مشاهده می‌کنید، کامپوننت Alert، از سرویس تزریق شده‌ی AlertService استفاده می‌کند. بنابراین در هرجائی از برنامه که AlertService.ShowAlert فراخوانی شود، سبب بروز رویداد OnChange شده و به این ترتیب کامپوننت فوق، Alert ای را نمایش می‌دهد که البته نمایش آن به همراه یک Timeout و محو شدن خودکار نیز هست. برای استفاده از کامپوننت Alert.razor، آن‌را در صفحه اصلی MainLayout یا هرجای دلخواهی قرار می‌دهیم:
<div>
        <Alert></Alert>
و سپس با تزریق AlertService در کامپوننت مورد نظر (که محل آن مهم نیست) و اجرای متد ShowAlert آن به‌همراه پارامترهای آن، پیام هشداری را که توسط MainLayout نمایش داده می‌شود، مشاهده خواهیم کرد.

دریافت کدهای کامل برنامه:  BlazorBootstrapAlert.zip
مطالب
breeze js به همراه ایجاد سایت آگهی قسمت سوم
در مطلب قبلی، پیش نیازهای مربوطه را نصب کردیم. در این قسمت به ساخت صفحات ورود و خروج، ثبت نام کاربران و تغییر رمز عبور خواهیم پرداخت.
در اینجا ما از Account Controller پیش فرض Asp.net Mvc استفاده میکنیم که متدهای مورد استفاده ما در آن قرار دارد و به BreezeController مزین شده است.
 [BreezeController]
    public class AccountController : ApiController
    {
      ...
    }

 اینترفیس IAuthService:
module Interfaces {
    export interface IAuthService {
        user: Models.IUserToken
        getUserInfo(accessToken);
        login(data);
        logOut();
        register(data);
        changePassword(data);
        accessToken(accessToken, data);
    }
}

سرویس AuthService 
پیاده سازی اینترفیس IAuthService را برعهده دارد. در سازنده آن، وابستگی‌های آن مقداردهی شده‌است و همچنین تنظیمات manager را انجام داده‌ایم.
متد accessToken: وظیفه ارسال توکن  را به سرور و همچنین نگهداری آن‌را در local storage، برعهده دارد.
متد getUserInfo: اطلاعات کاربر لاگین شده را  از سرور دریافت مینماید.
متد login: فرمت مورد قبول سرور به نحو زیر میباشد. در صورت موفقیت آمیز بودن، توکن را به متد accessToken  پاس میدهیم و آبجکت user را با مقادیر دریافتی پر می‌نماییم.
"grant_type=password & username=myusername & password=mypassword";
برای فراخوانی متدهای post، همانطوری که در مطلب ارسال کوئری‌های پست به آن اشاره شده‌است، عمل می‌نماییم. در ابتدا فایل breeze.ajaxpost.js را اضافه می‌کنیم سپس در فایل breeze.angular  قطعه کد زیر را در متد useNgHttp اضافه می‌کنیم.
var ajaxAdapter = breeze.config.getAdapterInstance("ajax");
breeze.ajaxpost(ajaxAdapter);
با این تنظیمات میتوانیم توسط withParameters، متدهای post را فراخوانی کنیم. 
.withParameters({
                    $method: 'POST',
                    $encoding: 'JSON',
                    $data: newData
                }
متد logOut: خروج از برنامه را برای ما انجام می‌دهد و درصورت موفقیت آمیز بودن، به صفحه اصلی هدایت می‌شود.
متد register: ثبت نام کاربران را بر عهده دارد.
متد changePassword: تغییر رمز عبور کاربران را برعهده دارد.
module AdApps {
    var securityUrls = {
        site: '/',
        login: '/token',
        logout: 'logout',
        register: 'register',
        userInfo: 'getUserInfo',
        changePassword: 'changePassword',
    }
    export class AuthService implements Interfaces.IAuthService {
        private manager: breeze.EntityManager;

        constructor(
            private _breeze: typeof breeze,
            private $http: ng.IHttpProvider,
            private toaster: ngtoaster.IToasterService,
            private $location: ng.ILocationService) {

            var dataService = new _breeze.DataService({
                serviceName: "/breeze/Account",
                hasServerMetadata: false
            });
            var metadataStore = new _breeze.MetadataStore({
                namingConvention: _breeze.NamingConvention.camelCase
            });
            this.manager = new _breeze.EntityManager({
                dataService: dataService,
                metadataStore: metadataStore,
                saveOptions: new _breeze.SaveOptions({
                    allowConcurrentSaves: true, tag: [{}]
                })
            });
        }

        user: Models.IUserToken;
        accessToken(accessToken, data): string {
            if (accessToken === 'clear') {
                localStorage.removeItem('accessToken');
                delete this.$http.defaults.headers.common.Authorization;
            }
            else {
                window.localStorage.setItem("accessToken", accessToken);
                this.$http.defaults.headers.common.Authorization = 'Bearer ' + accessToken;
            }
            return accessToken;
        }
        getUserInfo(): ng.IPromise<any> {
            var query = this._breeze.EntityQuery.from(securityUrls.userInfo);
            return this.manager.executeQuery(query).then(data => {
                return data.results[0];
            });
        }
        login(data: any): ng.IPromise<any> {
            var newData = "grant_type=password&username=" + data.userName + "&password=" + data.password;
            var query = this._breeze.EntityQuery.from(securityUrls.login)
                .withParameters({
                    $method: 'POST',
                    $encoding: 'JSON',
                    $data: newData
                });
            return this.manager.executeQuery(query).then(data => {
                var self = this;
                var result = data.results[0] as any;
                self.accessToken(result.access_token, data.results[0]);
                self.user = <Models.IUserToken>{};
                self.user = <Models.IUserToken>result;
                return result;
            });
        }
        logOut(): ng.IPromise<any> {
            var query = this._breeze.EntityQuery.from(securityUrls.logout)
                .withParameters({
                    $method: 'POST',
                    $encoding: 'JSON',
                });
            return this.manager.executeQuery(query).then(data => {
                this.user = null;
                this.accessToken('clear', null);
                this.$location.path("/");
            });
        }
        register(data: Object): ng.IPromise<any> {
            var query = this._breeze.EntityQuery.from(securityUrls.register)
                .withParameters({
                    $method: 'POST',
                    $encoding: 'JSON',
                    $data: data
                });
            return this.manager.executeQuery(query).then(data => { });
        }
        changePassword(data: Object): ng.IPromise<any> {
            var query = this._breeze.EntityQuery.from(securityUrls.changePassword)
                .withParameters({
                    $method: 'POST',
                    $encoding: 'JSON',
                    $data: data
                });
            return this.manager.executeQuery(query).then(data => { });
        }
    }
}

سرویس HttpInterceptor 
: رهگیری و پیگیری کردن نتیجه درخواست‌های http را بر عهده دارد.
درrequest : توکن امنیتی را به هدر درخواست‌ها اضافه میکنیم.
در response : در صورت موفقیت درخواست http، پیغام مناسبی را نمایش میدهیم.
در responseError : در صورت عدم موفقیت درخواست http، پیغام مناسبی را نمایش میدهیم.
module AdApps {
    export class HttpInterceptor {
        private static _toaster: ngtoaster.IToasterService;
        private static _$q: ng.IQService;
        constructor(
            private $q: ng.IQService,
            private toaster: ngtoaster.IToasterService,
            private $location: ng.ILocationService) {
            HttpInterceptor._toaster = toaster;
            HttpInterceptor._$q = $q;
        }
        request(config): string {
            config.headers = config.headers || {};
            var authData = window.localStorage.getItem("accessToken");
            if (authData) {
                config.headers.Authorization = "Bearer " + authData;
            }
            return config;
        };
        response(response): ng.IPromise<any> {
            if (response.data && response.data.message && response.status === 200) {
                HttpInterceptor._toaster.success(response.data.message)
            }
            return HttpInterceptor._$q.resolve(response);
        };
        responseError(response): ng.IPromise<any> {
            var self = this;
            var data = response.data;
            var title = "خطا";
            var messages = [];
            if (data) {
                if (data.error) {
                    title = data.error;
                }
                if (data.message) {
                    messages.push(data.message);
                }
                if (data.Message) {
                    messages.push(data.Message);
                }
                if (data.ModelState) {
                    angular.forEach(data.ModelState, function (errors, key) {
                        if (key.substr(0, 1) != "$")
                        { messages.push(errors); }

                    });
                }
                if (data.exceptionMessage) {
                    messages.push(data.exceptionMessage);
                }
                if (data.ExceptionMessage) {
                    messages.push(data.ExceptionMessage);
                }
                if (data.error_description) {
                    messages.push(data.error_description);
                }
                if (messages.length > 0) {
                    HttpInterceptor._toaster.error(title, messages.join("<br/>"));
                }
                if (response.status === "401") {
                    self.$location.path("/ورود");
                }
            }
            return HttpInterceptor._$q.reject(response);
        }
    }
}

معرفی کردن مسیرهای ورود، ثبت نام و تغییر رمز عبور به انگولار
module AdApps {
    class SecurityCtrl {
        constructor(private $scope: Interfaces.IAuthScope, private authService: AuthService) {
            $scope.authService = authService;
            if (window.localStorage.getItem("accessToken") != null) {
                authService.getUserInfo().then(function (data) {
                    $scope.authService.user = data;
                });
            }
            $scope.logOut = function () {
                return authService.logOut().then(function () { });
            }
        }
    }
    define(["angularAmd", "angular", "factory/AuthService", "factory/httpInterceptor"], (angularAmd, ng) => {
        angularAmd = angularAmd.__proto__;
        var app = ng.module("AngularTypeScript", ['ngRoute', 'breeze.angular', 'toaster']);
        var viewPath = "app/views/";
        var controllerPath = "app/controller/";
        app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
            $httpProvider.interceptors.push("HttpInterceptor");
            $routeProvider
                .when("/", angularAmd.route({
                    templateUrl: viewPath + "home.html",
                    controllerUrl: controllerPath + "home.js"
                }))
                .when("/login", angularAmd.route({
                    templateUrl: viewPath + "login.html",
                    controllerUrl: controllerPath + "login.js"
                }))
                .when("/register", angularAmd.route({
                    templateUrl: viewPath + "register.html",
                    controllerUrl: controllerPath + "register.js"
                }))
                .when("/changePassword", angularAmd.route({
                    templateUrl: viewPath + "change-password.html",
                    controllerUrl: controllerPath + "changePassword.js"
                }))
                .otherwise({ redirectTo: '/' });
        }
        ]);
        app.service('AuthService', ['breeze', '$http', 'toaster', '$location', AuthService]);
        app.service("HttpInterceptor", ["$q", "toaster", "$location", HttpInterceptor]);
        app.controller('SecurityCtrl', ['$scope', 'AuthService', SecurityCtrl]);
        return angularAmd.bootstrap(app);
    });
}

ایجاد کنترلر .login.ts و ارسال سرویس‌های لازم به کلاس LoginCtrl
در صورت صحیح بودن نام کاربری و رمز عبور به صفحه اصلی هدایت خواهد شد.
module AdApps {
    define(['app'], function (app) {
        app.controller('LoginCtrl', ["$scope", "AuthService", "$location", LoginCtrl]);
    });
   export  class LoginCtrl {
        constructor($scope: Interfaces.ILoginScope, authService: AuthService, $location: ng.ILocationService) {
           $scope.submit = function () {
               authService.login(angular.copy($scope.form))
                    .then(function (data) {
                        this.$location.path("/");
                    })
            };
        }
    }
}

ایجاد login.html
<div  ng-controller="LoginCtrl">
    <div>
        <i></i>
        <span>ورود</span>
        <div>
            <div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <form name="Form" id="form1">
                    <fieldset>
                        <div>
                            <div>
                                <input
                                       name="username"
                                       ng-model="form.userName"
                                       placeholder="نام کاربری"
                                       required>
                                <span>
                                    <i></i>
                                </span>
                            </div>
                        </div>
                        <div>
                            <div>
                                <input name="password"
                                       type="password"
                                       ng-model="form.password"
                                       placeholder="{{'Password'}}"
                                       validator="required">
                                <span>
                                    <i></i>
                                </span>
                            </div>
                        </div>

                    </fieldset>
                    <div>
                        <button type="submit" ng-click="submit()">ورود</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
فایل‌های مربوط به ثبت نام و تغییر رمز عبور، مشابه لاگین می‌باشد و از ذکر آن خودداری می‌نماییم و فایل‌های مربوطه در پروژه قرار دارند.
با تغییرات بالا، فایل main.ts دارای محتویات زیر میباشد:
requirejs.config({
    paths: {
        "app": "app",
        "angularAmd": "/Scripts/angularAmd",
        "angular": "/Scripts/angular",
        "breezeAjaxpost": "/Scripts/breeze/breeze.ajaxpost",
        "breeze": "/Scripts/breeze/breeze.debug",
        "breezeAngular": "/Scripts/breeze/breeze.angular",
        "bootstrap": "/Scripts/bootstrap",
        "angularRoute": "/Scripts/angular-route",
        "jquery": "/Scripts/jquery-2.2.2",
        "entityManagerService": "factory/entityManagerService",
        "toaster": "/Scripts/toaster",
    },
    waitSeconds: 0,
    shim: {
        "angular": { exports: "angular" },
        "angularRoute": { deps: ["angular"] },
        "bootstrap": { deps: ["jquery"] },
        "breeze": { deps: ["jquery"] },
        "breezeAngular": {
            deps: ["angular", "breeze"]
        },
        "toaster": { deps: ["angular"] },
        "app": {
            deps: ["bootstrap", "angularRoute", "toaster", "breezeAngular", "breezeAjaxpost"]
        }
    }
});
require(["app"]);
فایل پروژه :AngularTypeScript.zip
در قسمت‌های بعدی به ثبت و نمایش آگهی در سایت خواهیم پرداخت.  
مطالب
نمایش Breadcrumbs در برنامه‌های Angular
داشتن Breadcrumbs یکی از گزینه‌های مفید بهبود کاربری هر سایتی است و در برنامه‌های Angular با کوئری گرفتن از سیستم مسیریابی آن می‌توان به سادگی آن‌ها را تولید کرد.



ایجاد ساختاری برای نگهداری آرایه‌ی breadcrumbs

کامپوننت نمایش breadcrumbs را در مسیر src\app\core\bread-crumb ایجاد می‌کنیم. یعنی قصد داریم آن‌را به CoreModule برنامه اضافه کنیم؛ از این جهت که کامپوننت آن، تکمیل کننده‌ی app.component است و هر کامپوننتی که تنها در این کامپوننت ویژه بکار رود، محل تعریف آن در CoreModule خواهد بود.
به همین جهت کامپوننت bread-crumb را به صورت ذیل ایجاد می‌کنیم:
 ng g c core/bread-crumb
که تعاریف آن در فایل src\app\core\core.module.ts در قسمت exports و declarations درج خواهد شد:
import { BreadCrumbComponent } from "./bread-crumb/bread-crumb.component";

@NgModule({
  imports: [CommonModule, RouterModule],
  exports: [
    // components that are used in app.component.ts will be listed here.
    BreadCrumbComponent
  ],
  declarations: [
    // components that are used in app.component.ts will be listed here.
    BreadCrumbComponent
  ]
})
export class CoreModule {}
و سپس اینترفیس bread-crumb.ts را در مسیر src\app\core\bread-crumb\bread-crumb.ts به نحو زیر تعریف می‌کنیم:
export interface BreadCrumb {
  label: string;
  url: string;
};
برچسب و url، دو حداقل پیش‌فرض نمایش قطعات منوی breadcrumbs هستند.


تکمیل کامپوننت Breadcrumb

کدهای کامل کامپوننت Breadcrumb را در ذیل مشاهده می‌کنید:
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { BreadCrumb } from "./bread-crumb";
import { Observable } from "rxjs/Observable";

@Component({
  selector: "app-bread-crumb",
  templateUrl: "./bread-crumb.component.html",
  styleUrls: ["./bread-crumb.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class BreadCrumbComponent implements OnInit {

  breadcrumbs$: Observable<BreadCrumb[]>;

  constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.breadcrumbs$ = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .distinctUntilChanged()
      .map(event => event ? this.buildBreadCrumbs(this.activatedRoute.root) : []);
  }

  buildBreadCrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
    const routeDataBreadCrumbKey = "breadcrumb";
    const routeConfig = route.routeConfig;
    const path = routeConfig && routeConfig.path !== undefined ? routeConfig.path : "";

    let label = path;
    if (url === "") {
      label = "Home";
    } else if (routeConfig && routeConfig.data !== undefined) {
      label = routeConfig.data[routeDataBreadCrumbKey];
    }

    const nextUrl = `${url}${path}/`;
    const breadcrumb: BreadCrumb = {
      label: label,
      url: nextUrl
    };
    console.log("breadcrumb", { path: path, label: label, url: nextUrl, route: route });
    const newBreadcrumbs = [...breadcrumbs, breadcrumb];
    if (route.firstChild) {
      return this.buildBreadCrumbs(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
  }

}
توضیحات:
در اینجا در ابتدای کار، مشترک رخ‌داد NavigationEnd سیستم مسیریابی خواهیم شد:
  ngOnInit() {
    this.breadcrumbs$ = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .distinctUntilChanged()
      .map(event => event ? this.buildBreadCrumbs(this.activatedRoute.root) : []);
  }
هر زمانیکه رخ‌داد مرور صفحه‌ی جاری به پایان رسید، بر اساس مسیر ریشه‌ی آن، متد buildBreadCrumbs فراخوانی می‌شود. این متد، یک متد بازگشتی است. از این جهت که مسیر جاری می‌تواند حاصل مرور یک مسیر والد و سپس چندین مسیر تو در توی فرزند و والد آن باشد. برای نمونه ممکن است مانند تصویر ابتدای بحث، مسیریابی شما به صورت ذیل تعریف شده باشد:
const routes: Routes = [
  {
    path: "breadCrumbTest",
    data: { breadcrumb: "Parent1" },
    children: [
      {
        path: "", component: Parent1Component
      },
      {
        path: "Parent1Child1",
        data: { breadcrumb: "Parent1-Child1" },
        children: [
          {
            path: "", component: Parent1Child1Component
          },
          {
            path: "Parent1Child1Child1", component: Parent1Child1Child1Component,
            data: { breadcrumb: "Parent1-Child1 Child1" }
          }
        ]
      }
    ]
  }
];
در اینجا چندین مسیر والد و فرزند تو در تو را مشاهده می‌کنید.
بر اساس قراردادی که در کامپوننت نمایش bread-crumbs درنظر گرفته‌ایم، عنوان هر مسیر در خاصیت data آن با کلید breadcrumb درج می‌شود:
 data: { breadcrumb: "Parent1-Child1 Child1" }
مقدار این خاصیت را به صورت ذیل در متد buildBreadCrumbs می‌خوانیم:
  buildBreadCrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
    const routeDataBreadCrumbKey = "breadcrumb";
    const routeConfig = route.routeConfig;
    const path = routeConfig && routeConfig.path !== undefined ? routeConfig.path : "";

    let label = path;
    if (url === "") {
      label = "Home";
    } else if (routeConfig && routeConfig.data !== undefined) {
      label = routeConfig.data[routeDataBreadCrumbKey];
    }
برای بار اول فراخوانی متد بازگشتی buildBreadCrumbs، مقدار url خالی است. به همین جهت برچسب home را به آن نسبت خواهیم داد. در بار بعدی، اطلاعات path و data مسیر فعال شده را از شیء route.routeConfig استخراج کرده و توسط آن یک bread-crumb جدید را ایجاد می‌کنیم:
    const nextUrl = `${url}${path}/`;
    const breadcrumb: BreadCrumb = {
      label: label,
      url: nextUrl
    };
سپس اگر این مسیر فرزندی را داشته باشد، مقدار خاصیت route.firstChild آن نال نبوده و می‌توان متد بازگشتی را در همینجا با فراخوانی متد جاری تشکیل داد:
    const newBreadcrumbs = [...breadcrumbs, breadcrumb];
    if (route.firstChild) {
      return this.buildBreadCrumbs(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
علت استفاده‌ی از روش [breadcrumb, breadcrumbs...] بجای استفاده از متد push آرایه، مربوط است به
 encapsulation: ViewEncapsulation.None
در مورد ViewEncapsulation در مطلب «بررسی استراتژی‌های تشخیص تغییرات در برنامه‌های Angular» بیشتر بحث کرده‌ایم و تنظیم آن به None، کارآیی برنامه را با کاهش کار سیستم ردیابی تغییرات Angular، بهبود می‌بخشد.


تکمیل قالب نمایش Breadcrumbs

پس از تکمیل BreadCrumbComponent، اکنون قالب آن به صورت ذیل تعریف می‌شود:
<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async" class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url]">{{ breadcrumb.label }}</a>
  </li>
</ol>
در اینجا بر روی آرایه‌ی تشکیل شده‌ی توسط متد buildBreadCrumbs، یک حلقه ایجاد شده و عناصر آن نمایش داده می‌شوند. چون خاصیت عمومی breadcrumbs به صورت یک Observable تعریف شده‌است، در اینجا استفاده از async pipe را نیز در این حلقه مشاهده می‌کنید:
   breadcrumbs$: Observable<BreadCrumb[]>;


نمایش نهایی BreadCrumbs

در پایان کافی است به فایل app.component.html مراجعه کرده و selector کامپوننت نمایش bread crumbs را در آن درج کنیم:
<div class="container">
  <app-bread-crumb></app-bread-crumb>
  <router-outlet></router-outlet>
</div>


کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید.
مطالب
معرفی List Patterns Matching در C# 11
در C# 11، افزونه‌ای به switch expressionها اضافه شده‌است که امکان بررسی توالی مقادیر آرایه‌ها و مجموعه‌ها را نیز می‌دهد که به آن list expressions هم می‌گویند. List Patterns امکان بررسی شکل یک لیست و یا آرایه را ممکن می‌کنند. برای مثال اگر نیاز است بررسی کنیم که آیا مجموعه‌ای با یک مقدار خاص، شروع می‌شود، پایان می‌یابد و یا حاوی آن است، List Patterns مفید واقع خواهند شد. در اینجا List Patterns، با [] مشخص می‌شوند و در بین []ها، توالی مقادیری را که قرار است با اعضای مجموعه‌ی مشخص شده، انطباق داده شوند، مشخص می‌کنیم. این افزونه به همراه ویژگی slice pattern نیز هست که امکان انطباق با صفر و یا چند المان یک مجموعه را میسر می‌کند. در این حالت از دو نقطه برای نمایش آن در بین []ها استفاده می‌شود. برای مثال الگوی زیر:
[1, 2, .., 10]
با تمام آرایه‌های زیر انطباق دارد:
int[] arr1 = { 1, 2, 10 };
int[] arr2 = { 1, 2, 5, 10 };
int[] arr3 = { 1, 2, 5, 6, 7, 8, 9, 10 };

بررسی چند مثال جهت آشنایی با مفهوم List Patterns

ابتدا مجموعه‌ی زیر را در نظر بگیرید:
int[] collection = { 1, 2, 3, 4 };

الف) روش انطباق با یک توالی مشخص
Console.WriteLine(collection is [1, 2, 3, 4]); // True
Console.WriteLine(collection is [1, 2, 4]); // False
توالی مشخص شده‌ی در الگوی اول، دقیقا با توالی عناصر آرایه انطباق دارد. اما در حالت دوم، چون توالی اعداد الگوی مشخص شده، با توالی اعداد آرایه یکی نیست، انطباقی رخ نداده‌است.

ب) امکان استفاده از discard و همچنین لیستی از عناصر
Console.WriteLine(collection is [_, 2, _, 4]); // True
Console.WriteLine(collection is [.., 3, _]); // True
- اگر نیاز به صرفنظر کردن از عناصر خاصی در یک توالی بود، می‌توان از discard و یا همان _ استفاده کرد؛ مانند الگوی اول. الگوی اول به معنای نیاز به انطباق با چهار عدد است که حتما باید دومین و چهارمین آن‌ها اعداد 2 و 4 باشند؛ اما مقدار اولین و سومین آن‌ها، مهم نیست.
- الگوی دوم به معنای تعریف یک توالی نامشخص، اما خاتمه یافته‌ای با عنصر 3 است و سپس صرفنظر کردن از آخرین عنصر آرایه.

در مثال زیر، الگوی انطباق با مجموعه‌ای که حداقل دو عضو دلخواهی را دارد، مشاهده می‌کنید:
if (new[] { 6, 7, 8 } is [_, _, ..])
{
   Console.WriteLine($"collection with at least two items");
}
و الگوی انطباق با مجموعه‌ای که اولین و آخرین عضو آن صفر هستند:
if (new[] { 0, 42, 42, 0 } is [0, .., 0])
{
   Console.WriteLine($"collection with first and last element equal to 0");
}


ج) امکان تعریف اعمال منطقی
Console.WriteLine(collection is [_, >= 2, _, _]); // True
بر اساس این الگو، هر مجموعه‌ی چهارتایی که عنصر دوم آن، بزرگتر و یا مساوی 2 باشد، معتبر شناخته می‌شود؛ صرفنظر از مقدار سایر عناصر آن.

در مثال زیر، الگوی انطباق با مجموعه‌ای را که اولین عضو آن یک عدد مثبت است، مشاهده می‌کنید:
if (new[] { 9, -1, -2 } is [> 0, ..])
{
   Console.WriteLine($"collection with positive first element");
}
و یا الگوی انطباق با مجموعه‌ای که دومین عضو آن، یکی از دو عدد 42 و منهای 42 می‌تواند باشد:
if (new[] { 1, 42, 0 } is [_, 42 or -42, ..])
{
   Console.WriteLine($"collection with second element equal to 42 or -42");
}


یک مثال دیگر: بررسی نحوه‌ی عملکرد List Patterns

namespace CS11Tests;

public static class ListPatternsMatching
{
    public static void Test()
    {
        Console.WriteLine(CheckSwitch(new[] { 1, 2, 10 }));          // prints 1
        Console.WriteLine(CheckSwitch(new[] { 1, 2, 7, 3, 3, 10 })); // prints 1
        Console.WriteLine(CheckSwitch(new[] { 1, 2 }));              // prints 2
        Console.WriteLine(CheckSwitch(new[] { 1, 3 }));              // prints 3
        Console.WriteLine(CheckSwitch(new[] { 1, 3, 5 }));           // prints 4
        Console.WriteLine(CheckSwitch(new[] { 2, 5, 6, 7 }));        // prints 50
    }

    public static int CheckSwitch(int[] values)
        => values switch
        {
            [1, 2, .., 10] => 1,
            [1, 2] => 2,
            [1, _] => 3,
            [1, ..] => 4,
            [..] => 50
        };
}
توضیحات:

- اولین الگوی تعریف شده‌ی در متد CheckSwitch، به معنای انطباق با هر توالی است که با 1 و 2 شروع می‌شود و سپس می‌تواند شامل هر نوع توالی دلخواهی باشد (صرفنظر از مقدار و یا ترتیب این مقادیر) و در نهایت با عدد 10 خاتمه پیدا می‌کند.
- دومین الگوی تعریف شده، تنها یک آرایه‌ی دو عضوی با مقادیر مشخص 1 و 2 را می‌پذیرد.
- توالی قابل انطباق با سومین الگوی تعریف شده، از دو عضو تشکیل می‌شود. اولین عضو آن حتما باید 1 باشد و مقدار دومین عضو آن مهم نیست.
- توالی قابل انطباق با چهارمین الگوی تعریف شده، از یک یا چند عضو دلخواه تشکیل می‌شود که اولین عضو آن حتما باید عدد 1 باشد.
- هر توالی تعریف شده‌ای با پنجمین الگوی تعریف شده، انطباق پیدا می‌کند.


امکان ترکیب list pattern matching و object pattern matching

در مثال‌های زیر، نمونه‌ای از ترکیب list pattern matching و object pattern matching را جهت ساخت شرط‌های پیچیده‌ای، مشاهده می‌کنید:
if (new[] { 1, 2, 3 } is [var first, _, _])
{
   Console.WriteLine($"three item collection with first item {first}");
}

if (new[] { 4, 5, 6 } is [_, var second, _])
{
   Console.WriteLine($"three item collection with second item {second}");
}
این الگو که var pattern هم نامیده می‌شود، به همراه ذکر var و نام یک متغیر است. در این حالت کار الگو، دریافت مقدار واقع شده‌ی در آن موقعیت خاص است.
نمونه مثالی از این قابلیت جهت جدا سازی اجزای یک URL:
var uri = new Uri("http://www.mysite.com/categories/category-a/sub-categories/sub-category-a.html");
var result = uri.Segments switch
{
    ["/"] => "Root",
    [_, var single] => single,
    [_, .. string[] entries, _] => string.Join(" > ", entries)
};


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

List patterns تنها با آرایه‌ها و لیست‌ها کار نمی‌کنند. بلکه می‌توان از آن‌ها با هر نوعی که به همراه تعریف indexer‌ها و یا خواص Length و Count است نیز استفاده کرد. اگر نیاز به استفاده از Slice patterns بود، این الگو با نوع‌هایی کار می‌کند که دارای indexer هایی با آرگومان‌هایی از نوع Range است و یا به همراه متد Slice دارای دو آرگومان Int است. برای مثال رشته‌ها نیز در اینجا قابل بررسی هستند.
نظرات مطالب
استفاده از افزونه Typeahead مجموعه Twitter Bootstrap در ASP.NET MVC
matcher یک callback جاوا اسکریپتی است. بنابراین در سمت کلاینت باید پیاده سازی شود (چیزی شبیه به مقدار دهی source پویای مثال آخر بحث).
$('.typeahead').typeahead({
    matcher: function(item) {
        // آیتم مقداری است که باید برای تطابق بررسی شود
        //  this.query کوئری جاری را بر می‌گرداند.
        return true // اگر آیتم تطابق داشته است
    }
})
مثلا:
matcher: function (item) {
    if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
        return true;
    }
}
از matcher برای سفارشی سازی و بررسی اینکه آیا عبارت تایپ شده توسط کاربر با list دریافتی تطابق دارد یا خیر، استفاده می‌شود. حالت پیش فرض، تطابق دقیق لیست دریافتی با متن ورودی کاربر است. با استفاده از matcher در سمت کلاینت می‌توانید نحوه نمایش لیست دریافتی از سرور را سفارشی سازی کنید.
مطالب
معرفی Selector های CSS - قسمت 1
1- .class
این Selector تگ‌هایی را انتخاب می‌نماید که عضو یک کلاس خاص باشند.
<style>
    .first{ color: red}
    .content{color:blue}
</style>
<div class="first">Text 1</div>
<div>Text 2</div>
<p class="first">Text 3</p>
<div class="content">Text 4</div>
در مثال فوق Text 1 و Text 3 به رنگ قرمز و Text 4 به رنگ آبی نمایش می‌یابند.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 Yes  Yes  Yes Yes   Yes .class   1

2- #id
این Selector تگی را انتخاب می‌کند که دارای یک id خاص می‌باشد.
<style>
    #pass {
        color: red;
    }        
</style>
<input type="password" id="pass"/>
در مثال فوق محتوای کادر رمز عبور به رنگ قرمز نمایش می‌یابد.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 Yes  Yes  Yes Yes   Yes #id   1

3- E
جهت انتخاب تگ‌ها براساس عنوان آنها استفاده می‌شود.
<style>
    div {
        color: red;
    }
</style>
<div>Text 1</div>
<p>Text 2</p>
<div>Text 3</div>
در مثال فوق Text 1 و Text 3 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 Yes  Yes  Yes Yes   Yes  1

4- *
این Selector تمامی تگ‌ها را انتخاب می‌نماید
<style>
    * {
        color: red;
    }
</style>
<div>Text 1</div>
<input type="text" value="Text 2"/>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>
در مثال فوق رنگ متن تمامی تگهای فوق قرمز خواهد شد.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 3.1  9.6  7.0 2.0  4.0  2

5- S1  S2
تمامی المنت‌های S2 که فرزند S1 می‌باشند، انتخاب خواهند شد.
<style>
    div span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>
در مثال فوق Text 2، Text 3 و Text 5 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 Yes  Yes  Yes Yes   Yes S1   S2  1

6- S1>S2
تمامی المنت‌های S2 که فرزند مستقیم S1 می‌باشند، انتخاب خواهند شد. 
<style>
    div>span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>
در مثال فوق Text 2 و Text 5 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 Yes  Yes  7.0 Yes   Yes S1>S2  2 

7- S1+S2
تمامی المنت‌های S2 که هم تراز S1 و دقیقا بعد از S1 قرار گرفته اند را انتخاب می‌نماید.
<style>
    h1+p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>
در مثال فوق Text 2 و Text 6 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها: 

 Selector نسخه CSS
 Yes  Yes  7.0 Yes   Yes S1+S2  2 

8- S1~S2
تمامی المنت‌های S2 که هم تراز S1 می‌باشند و بعد از S1 قرار گرفته اند را انتخاب می‌نماید.
<style>
    div ~ p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>
در مثال فوق Text 4 و Text 6 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 3.2  9.6  7.0 3.5  4.0 S1~S2  3

9- S1!>S2
این Selector المنت‌های S1 را انتخاب می‌کند که والد مستقیم S2 می‌باشند.
<style>
    div!>span {
            border: 1px solid red;
        }
</style>
<div>
    <h1>Text 1</h1>
    <div>
        <span>Text 2</span>
        <h1>Text 3</h1>
        <p>Text 4</p>
    </div>
    <div>Text 5</div>
</div>
در مثال فوق کادری قرمز رنگ را دور آن div که شامل محتوای Text 2، Text 3 و Text 4 می‌باشد، ترسیم خواهد نمود.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 No  No No
No
No S1!>S2  4

 10- S1 /attribute/ S2
تمامی المنت‌های S2 انتخاب می‌شوند که توسط یک attribute از S1 به id المنت S2 ارجاع داده است.
<style>
    label /for/ input {
        color: red;
    }
</style>
<label for="user">User Name:</label>
<input type="text" id="user"/>
<label>Password:</label>
<input type="password" id="pass"/>
در مثال فوق، اولین تگ input که id آن user می‌باشد و توسط تگ label و با استفاده از ویژگی for (به id تگ input) ارجاع داده شده است، انتخاب و محتوای آن قرمز می‌شود.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 No  No No
No
No S1 /attribute/ S2  4
 
مطالب
استفاده از LINQ جهت تهیه کدهایی کوتاه‌تر و خواناتر

با کمک امکانات ارائه شده توسط LINQ ، می‌توان بسیاری از اعمال برنامه نویسی را در حجمی کمتر، خواناتر و در نتیجه با قابلیت نگهداری بهتر، انجام داد که تعدادی از آن‌ها را در ادامه مرور خواهیم کرد.

الف) تهیه یک یک رشته، حاوی عناصر یک آرایه، جدا شده با کاما.

using System.Linq;

public class CLinq
{
public static string GetCommaSeparatedListNormal(string[] data)
{
string items = string.Empty;

foreach (var item in data)
{
items += item + ", ";
}

return items.Remove(items.Length - 2, 1).Trim();
}

public static string GetCommaSeparatedList(string[] data)
{
return data.Aggregate((s1, s2) => s1 + ", " + s2);
}
}
همانطور که ملاحظه می‌کنید در روش دوم با استفاده از LINQ Aggregate extension method ، کد جمع و جورتر و خواناتری نسبت به روش اول حاصل شده است.

ب) پیدا کردن تعداد عناصر یک آرایه حاوی مقداری مشخص
برای مثال آرایه زیر را در نظر بگیرید:

var names = new[] { "name1", "name2", "name3", "name4", "name5", "name6", "name7" };
قصد داریم تعداد عناصر حاوی name را مشخص سازیم.
در تابع GetCountNormal زیر، این کار به شکلی متداول انجام شده و در GetCount از LINQ Count extension method کمک گرفته شده است.

using System.Linq;

public class CLinq
{
public static int GetCountNormal()
{
var names = new[] { "name1", "name2", "name3", "name4", "name5", "name6", "name7" };
var count = 0;
foreach (var name in names)
{
if (name.Contains("name"))
count += 1;
}
return count;
}

public static int GetCount()
{
var names = new[] { "name1", "name2", "name3", "name4", "name5", "name6", "name7" };
return names.Count(name => name.Contains("name"));
}
}
به نظر شما کدام روش خواناتر بوده و نگهداری و یا تغییر آن در آینده ساده‌تر می‌باشد؟

ج) دریافت لیستی از عناصر شروع شده با یک عبارت
در اینجا نیز دو روش متداول و استفاده از LINQ بررسی شده است.

using System.Linq;
using System.Collections.Generic;

public class CLinq
{
public static List<string> GetListNormal()
{
List<string> sampleList = new List<string>() { "A1", "A2", "P1", "P10", "B1", "B@", "J30", "P12" };
List<string> result = new List<string>();
foreach (var item in sampleList)
{
if (item.StartsWith("P"))
result.Add(item);
}
return result;
}

public static List<string> GetList()
{
List<string> sampleList = new List<string>() { "A1", "A2", "P1", "P10", "B1", "B@", "J30", "P12" };
return sampleList.Where(x => x.StartsWith("P")).ToList();
}
}

و در حالت کلی، اکثر حلقه‌های foreach متداول را می‌توان با نمونه‌های خواناتر کوئری‌های LINQ معادل، جایگزین کرد.

Vote on iDevCenter