وحید نصیری وحید نصیری
بهبود صفحه‌‌ی بارگذاری اولیه در Blazor WASM
‫۱ سال و ۶ ماه قبل، دوشنبه ۸ اسفند ۱۴۰۱، ساعت ۱۸:۴۷
نمایش درصد بارگذاری اولیه‌ی یک برنامه‌ی Blazor WASM در دات نت 7

اگر یک برنامه‌ی جدید blazor wasm را در دات نت 7، برای مثال با دستور dotnet new blazorwasm --hosted ایجاد کنیم، با اجرای آن، یک progress-bar حلقوی نمایش میزان درصد بارگذاری اولیه‌ی برنامه ظاهر می‌شود که به نوعی پیاده سازی توکار نکات مطلب جاری است. این پیاده سازی از اجزای زیر تشکیل شده‌است:
الف) تغییرات فایل index.html برنامه
برای این منظور، فایل Client\wwwroot\index.html به صورت زیر تغییر کرده‌است:
<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>
که در اینجا progress-bar حلقوی را با یک طرح SVG ایجاد کرده‌اند.

ب) تغییرات فایل app.css برنامه
کلاس‌های progress-bar را به این صورت در فایل Client\wwwroot\css\app.css اضافه کرده‌اند:
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }
        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

روش سفارشی سازی این progress-bar بر اساس دو CSS variable فوق صورت می‌گیرد:
--blazor-load-percentage: درصد بارگذاری جاری را مقدار دهی می‌کند.
--blazor-load-percentage-text: متن Loading نمایش داده شده را مشخص می‌کند.

برای مثال اگر علاقمند باشیم بجای SVG پیش‌فرض از progress-bar توکار خود فریم‌ورک بوت‌استرپ استفاده کنیم، روش کار به صورت زیر خواهد بود:
<body>
    <div id="app">
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" 
            role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" 
            style="width: var(--blazor-load-percentage, 0%)">
            <div class="loading-text"></div>
        </div>        
      </div>
که در اینجا همان CSS variable معادل درصد بارگذاری، بجای width استفاده شده تا به صورت خودکار سبب پیشرفت progress-bar شود. همچنین کلاس جدید loading-text را هم همانند loading-progress-text:after موجود به صورت زیر به فایل app.css اضافه می‌کنیم تا سبب نمایش متن درصد پیشرفت جاری نیز شود:
.loading-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

وحید نصیری وحید نصیری
سفارشی سازی ASP.NET Core Identity - قسمت پنجم - سیاست‌های دسترسی پویا
‫۱ سال و ۶ ماه قبل، دوشنبه ۸ اسفند ۱۴۰۱، ساعت ۱۴:۳۱
مدیریت کننده‌ی سیاست دسترسی پویای نمونه‌ی DynamicPermissionsAuthorizationHandler ، بر اساس نتیجه‌ی تصمیم گیری در متد CanUserAccess کار می‌کند. کارکرد این متد را به دلخواه خودتان تغییر دهید. در حال حاضر این متد در نهایت بر اساس مقدار claim انتسابی، یعنی ناحیه/کنترلر/اکشن متد جاری: 
var currentClaimValue = $"{area}:{controller}:{action}"
تصمیم گیری می‌کند. به انتهای آن یک hasAccess هم اضافه کنید. مقدار دهی آن‌را به صفحه‌ی لیست کننده‌ی اکشن متدها اضافه کنید و سپس آ‌ن‌را به صورت سفارشی در اینجا استخراج و پردازش کنید.
وحید نصیری وحید نصیری
Blazor 5x - قسمت اول - معرفی
‫۱ سال و ۶ ماه قبل، شنبه ۲۹ بهمن ۱۴۰۱، ساعت ۱۶:۰۲
این نظرسنجی 2 سال قبل بوده که در تصویر فوق بیش از 4000 نفر شرکت داشتند و الان در سایتشان 40 نفر را نمایش می‌دهد و اطلاعات آن هم قدیمی است و به روز نشده.
وحید نصیری وحید نصیری
غنی سازی کامپایلر C# 9.0 با افزونه‌ها
‫۱ سال و ۶ ماه قبل، جمعه ۲۱ بهمن ۱۴۰۱، ساعت ۱۳:۳۱
یک نکته‌ی تکمیلی: ارتقاء به NET 7.0.12. و دریافت خطای CA1852

اگر نکات این مطلب را پیاده سازی کرده و برای مثال TreatWarningsAsErrors را فعال کرده باشید، با ارتقاء به NET 7.0.102. حتی در مورد فایل Program.cs نیز خطای زیر را دریافت خواهید کرد:
CA1852:  Type can be sealed because it has no subtypes in its containing assembly and is not externally visible
عموما از هر نگارشی به نگارش دیگر، تعداد آنالایزرهای توکار دات نت بیشتر می‌شوند. یک چنین موردی در نگارش ابتدایی دات نت 7 وجود نداشت، اما الان قابل مشاهده است. در جهت مواجه شدن با آن یا می‌توان کلاس عنوان شده را با واژه‌ی کلیدی sealed مزین کرد و یا فقط کافی است فایل editorconfig. را باز کرده و یک سطر زیر را به آن اضافه کنید:
dotnet_diagnostic.CA1852.severity = suggestion
به این صورت میزان شدت گزارش یاد شده، صرفا به یک توصیه تقلیل پیدا می‌کند و مانع build برنامه نخواهد شد؛ هرچند در IDE هنوز به صورت یک هشدار آبی رنگ قابل مشاهده‌است.
وحید نصیری وحید نصیری
Blazor 5x - قسمت دوم - بررسی ساختار اولیه‌ی پروژه‌های Blazor
‫۱ سال و ۶ ماه قبل، سه‌شنبه ۱۸ بهمن ۱۴۰۱، ساعت ۱۳:۵۵
یک نکته‌ی تکمیلی: پیاده سازی خودکار سعی مجدد در اتصال در برنامه‌های Blazor Server

در انتهای این مطلب، به «سعی در اتصال مجدد» برنامه‌های Blazor Server، به دلیل قطع اتصال SignalR اشاره شد که در نهایت به یک چنین تصویری می‌رسد:

برای اینکه این reload خودکار شود، می‌توان به صورت زیر عمل کرد:
الف) ابتدا یک endpoint مخصوص health check را اضافه می‌کنیم:
app.UseEndpoints( endpoints =>
{
  // ...
  endpoints.MapHealthChecks( "/healthcheck" );
  // ...
});
ب) سپس در جهت بازنویسی پیش‌فرض‌های راه‌انداز blazor server، قسمت autostart آن‌را false می‌کنیم: 
<script src="_framework/blazor.server.js" autostart="false"></script>
و در ادامه قسمت مدیریت قطع اتصال آن‌را به صورت زیر سفارشی سازی می‌کنیم:
<script>
Blazor.start({
            reconnectionHandler: {
                onConnectionDown: (options, error) => {
                    var isReloading = false;

                    async function attemptReload() {

                        if (!isReloading) {
                            isReloading = true;
                            var request = new Request({
                                url: '/healthcheck',
                                method: 'GET'
                            });
                            var result = await fetch(request);

                            if (result.status == 200) {
                                document.location.reload();
                            }
                            isReloading = false;
                        }
                    }
                    setInterval(attemptReload, 1500);
                }
            }
        });
</script>
در اینجا در صورت قطع اتصال به سرور، همان endpoint جدید health check، هر یک و نیم ثانیه یکبار به صورت خودکار بررسی شده و اگر سرور در دسترس بود، همان کار reload را به صورت خودکار انجام می‌دهیم.

وحید نصیری وحید نصیری
استفاده از GitHub Actions برای Build و توزیع خودکار پروژه‌های NET Core.
‫۱ سال و ۶ ماه قبل، شنبه ۱۵ بهمن ۱۴۰۱، ساعت ۱۹:۱۰
چند نکته‌ی تکمیلی:
- بجای دستور dotnet pack در گردش کاری‌های فوق، می‌توان تنظیم زیر را به فایل csproj. برنامه اضافه کرد: 
<GeneratePackageOnBuild>true</GeneratePackageOnBuild>

- اگر قصد build یک پروژه‌ی library مخصوص دات نت 4x و دات نت جدید را با هم و توسط دستور dotnet build دارید، یعنی این پروژه multi-target است:
<TargetFrameworks>netstandard2.0;net462;</TargetFrameworks>
فقط کافی است قسمت تنظیم سیستم عامل را به صورت زیر تغییر دهید؛ چون ویندوز 2019 به همراه SDK مخصوص build دات نت 4x هم هست:
runs-on: windows-2019