علیرضا آرانی علیرضا آرانی
اشتراک‌ها
درک فرق بین StateHasChanged و InvokeAsync(StateHasChanged) در Blazor

چون نخ پردازشی رویدادهای Blazor نظیر Oninitialize و OnAfterRender و ... یکی است بنابراین استفاده از StateHasChanged نتیجه مطلوب را به همراه خواهد داشت اما در رابطه با متدهای خارجی (External method) مانند تایمرها باید از await InvokeAsynck(StateHasChanged) استفاده نمود.

StateHasChanged که برای  رندر مجدد کامپوننت‌ها در Blazor Server استفاده می‌شود، اجازه نمی‌دهد چندین نخ به طور همزمان به فرآیند رندر دسترسی داشته باشند. در صورتی که StateHasChanged توسط یک نخ ثانویه فراخوانی شود آنگاه استثنایی شبیه زیر رخ خواهد داد: 

System.InvalidOperationException: The current thread is not associated with the Dispatcher. 
در اپلیکیشن‌های مبتنی بر Blazor Server تنها یک dispatcher به ازای هر اتصال وجود دارد (هر تب مرورگر یک اتصال). هر زمانی که از InvokeAsync استفاده می‌کنیم، درحقیقت کار را با این dispatcher جلو می‌بریم. (دقیقا همانند Dispatcher.Invoke در WPF یا Control.Invoke در ویندوز فرم اپلیکیشن ها). بنابراین زمانی که نیاز است در نخ دیگری StateHasChanged را فراخوانی کنیم لازم است که اینکار را توسط InvokeAsync انجام دهیم. در حقیقت InvokeAsync کارها را به صورت سریالی در یک صف مرتب می‌کند و به صورت قدم به قدم آنها را اجرا می‌کند تا از بروز استثنا جلوگیری می‌کند.
در کل زمانی که مشغول کار با رویدادهای UI triggered هستید (نظیر متدهای کلیک برروی یک دکمه، متدهای نویگیشن و ....) نیاز نیست نگران ایمن‌سازی نخ‌ها باشید زیرا Blazor خودش اینکار را انجام می‌دهد و مطمئن می‌شود که در واحد زمان فقط یک نخ کدهای یک کامپوننت را اجرا خواهد کرد. اما زمانی که مشغول کار با رویدادهای non-UI triggerd هستید (نظیر تایمرها) اگر از StateHasChanged بدون InvokeAsync استفاده کنید سبب ایجاد Thread Race Condition خواهید شد. 
درک فرق بین StateHasChanged و InvokeAsync(StateHasChanged) در Blazor
‫۱ سال و ۷ ماه قبل، سه‌شنبه ۲۵ بهمن ۱۴۰۱، ساعت ۱۳:۳۲
سید امید موسوی سید امید موسوی
اشتراک‌ها
تحقق یک رویا: پشتیبانی توکار از دات نت در همه مرورگرهای مدرن

به لطف استاندارد مدرن و هنوز فراگیر نشده‌ی WebAssembly ، امروزه همه‌ی مرورگر‌های مدرن می‌توانند بجای اجرای جاوا اسکریپت، یک زبان bytecode استانداردِ سطح پایین و شبیه به زبان اسمبلی را اجرا کنند. استفاده از WebAssembly می‌تواند موجب اجرای سریع‌تر کد و کاهش حجم آن شود. اما مهمترین مزیت این هست که امروز می‌توانیم همه‌ی زبان‌های قدرتمند، نظیر سی شارپ را به نحوی کامپایل کنیم که خروجیِ نهایی، منطبق با استاندارد webassembly باشد و به صورت native در مرورگرها، دات نت را اجرا کنیم.

کامپایل سی شارپ به WebAssembly توسط تیم Mono مایکروسافت انجام شده و عمده مشکلات فنی سر راه برداشته شده‌اند. اما برای اینکه عملا بشود از دات نت در مرورگر‌ها استفاده کرد، مایکروسافت در پی پیاده سازی پروژه‌ی جاه طلبانه‌ای به نام Blazor می‌باشد. در واقع Blazor فریم ورک Client-Side مبتنی بر دات نت خواهد بود؛ الهام گرفته از فریم ورک‌های کنونی (مانند Angular و React) و رقیبی جدید برای آن‌ها. فریم ورک Blazor هم مانند آن‌ها حول مفهوم Component شکل گرفته‌است. کامپوننت‌هایی که کلاس‌های سی شارپی هستند و با زبان Razor توسعه داده شده‌اند. 

استفاده از دات نت در مرورگر‌ها می‌تواند موجب این شود که کد بیشتری را بین سرور و کلاینت بتوانیم به اشتراک بگذاریم و نیاز به دوباره کاری در هر دو سمت را نداشته باشیم. علاوه بر این توسعه دهندگان سی شارپ کمی بیشتر به مفهوم Full Stack Developer نزدیک خواهند شد.

همچنین با استفاده از WebAssembly می‌توانیم به تمام کتابخانه‌های موجود جاوااسکریپتی هم دسترسی داشته باشیم و محدودیتی در این زمینه وجود ندارد. همچنین می‌توان DOM را هم از این طریق مدیریت و دستکاری کرد.

در حال حاضر تیم AspNet عهده دار کار بر روی پروژه‌ی Blazor  شده‌است. از نوشته‌های آن‌ها چنین بر می‌آید که تا نهایی شدن این پروژه هنوز باید صبر کنیم.  

تحقق یک رویا: پشتیبانی توکار از دات نت در همه مرورگرهای مدرن
‫۶ سال و ۸ ماه قبل، چهارشنبه ۲ اسفند ۱۳۹۶، ساعت ۱۳:۰۷
وحید نصیری وحید نصیری
نظرات مطالب
بررسی تغییرات Blazor 8x - قسمت چهاردهم - امکان استفاده از کامپوننت‌های Blazor در برنامه‌های ASP.NET Core 8x

یک نکته‌ی تکمیلی: استفاده از BlazorStaticRendererService جهت تولید یک کامپوننت کش کردن قسمتی از محتوای صفحه در برنامه‌های Blazor SSR

فرض کنید هر کدام از آیتم‌های منوی سمت راست صفحه، به همراه آماری مرتبط هم هستند که باید جداگانه محاسبه شوند. اگر قرار باشد به‌ازای هر کاربر و هر بازدید صفحه‌ای، این اطلاعات دوباره محاسبه شوند، بار قابل توجهی به برنامه و سرور وارد خواهد شد و همچنین مرور صفحات هم به‌شدت کند می‌شوند؛ چون قسمت منوی سمت راست صفحه، هربار باید از ابتدا رندر شود. در این مطلب، با سرویس BlazorStaticRendererService آشنا شدیم که کار آن، رندر کردن محتوای یک کامپوننت و بازگشت رشته‌ی نهایی معادل آن است. اگر این مورد را به همراه IMemoryCache‌ توکار دات‌نت، ترکیب کنیم، به کامپوننتی شبیه به cache tag helper توکار ASP.NET Core می‌رسیم:

<cache expires-after="@TimeSpan.FromMinutes(10)">
    @Html.Partial("_WhatsNew")
    *last updated  @DateTime.Now.ToLongTimeString()
</cache>

کدهای کامل آن‌را در اینجا (^ و ^) می‌توانید مطالعه کنید که به این صورت مورد استفاده قرار گرفته‌است تا فقط قسمتی از صفحه را کش کند و نه کل آن‌را.

جالب توجه‌است که OutputCache مخصوص ASP.NET Core، در Blazor SSR هم کار می‌کند. برای استفاده‌ی از آن در Blazor SSR، پس از انجام تنظیمات ابتدایی میان‌افزار مخصوص آن که ترتیب افزودن آن باید به صورت زیر باشد: 

app.UseStaticFiles();
app.UseSession();
app.UseRouting();
app.UseAntiforgery();

app.UseOutputCache();

app.MapRazorComponents<App>();
app.MapControllers();
app.Run();

فقط کافی است ویژگی OutputCache را به نحو زیر به فایل razor. خود اضافه کنید:

@attribute [OutputCache(Duration = 1000)]

که البته کار آن، کش کردن محتوای کل یک صفحه‌است و نه فقط قسمتی از آن.

‫۱ ماه قبل، دوشنبه ۵ شهریور ۱۴۰۳، ساعت ۲۲:۰۴
وحید نصیری وحید نصیری
نظرات مطالب
PowerShell 7.x - قسمت دوازدهم - آشنایی با GitHub Actions و بررسی یک مثال
یک نکته‌ی تکمیلی: شبیه سازی mikeal/publish-to-github-action@master با کدنویسی مستقیم
این اکشن که جهت به روز رسانی مخزن کد، با تغییرات جدید است، بر اساس سرورهای لینوکسی کار می‌کند و اگر از سرور ویندوزی استفاده شود، خطا خواهد داد که می‌شود آن‌را با معادل زیر، جایگزین کرد: 
      - name: Push changes to repo          
        run: |      
          git config http.sslVerify false
          git config user.name "${{ github.actor }}"
          git config user.email "${{ github.actor }}@users.noreply.github.com"
          git remote add publisher "https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git"
          git show-ref
          git branch --verbose
          git lfs install
          git checkout main
          git add -A
          git commit -m "Automated publish"
          git pull --rebase publisher main
          git push publisher main
نکته‌ی مهم! اگر این قطعه کد را به انتهای فایل yml اکشن خود اضافه کنید، با خطای «نداشتن دسترسی»، خاتمه پیدا می‌کند. برای رفع این مشکل، مسیر «Settings > Actions > General» را در مخزن کد جاری، طی کرده و در انتهای صفحه، گزینه‌ی «Read and write permissions» را انتخاب کنید. حالت پیش‌فرض آن «Read repository contents permission» است که برای اعمال تغییرات کافی نیست.
‫۱ سال و ۳ ماه قبل، پنجشنبه ۱۸ خرداد ۱۴۰۲، ساعت ۱۸:۰۲
وحید نصیری وحید نصیری
نظرات مطالب
Blazor 5x - قسمت هشتم - مبانی Blazor - بخش 5 - تامین محتوای نمایشی کامپوننت‌های فرزند توسط کامپوننت والد
یک نکته‌ی تکمیلی: امکان داشتن متدهایی با خروجی تگ‌دار در برنامه‌های Blazor (یا تعریف کامپوننت‌های پویا)

اگر با React کار کرده باشید، یک چنین کدهایی اساس آن‌را تشکیل می‌دهند:
import React from "react";

const Rentals = () => {
  return <h1>Rentals</h1>;
};

export default Rentals;
در اینجا کامپوننتی به نام Rentals تعریف شده‌است که خروجی آن ... یک تگ HTML ای است و برای تشکیل آن نیازی به استفاده از "" و چسباندن رشته‌ها نبوده‌است. دقیقا شبیه به یک چنین کاری را می‌توان در برنامه‌های Blazor نیز انجام داد که به آن «Razor template syntax» و یا «templated components» هم گفته می‌شود:
@page "/razor"

@template
@ItemTemplate(emp)

@code {

    RenderFragment template = @<p>The time is @DateTime.Now.</p>;
    RenderFragment<Employee> ItemTemplate = (item) => @<p>Employee name is @item.Name.</p>;

    Employee emp = new Employee { Name = "Test" };

    public class Employee
    {
        public string Name;
    }
}
در اینجا همانطور که مشاهده می‌کنید، امکان انتساب یک قالب HTML ای شروع شده‌ی با @ به یک RenderFragment وجود دارد که حتی می‌تواند جنریک هم باشد و وهله‌ای از این شیء جنریک را به صورت یک lambda expression دریافت کند. روش درج آن‌ها را در صفحه نیز مشاهده می‌کنید که همانند فراخوانی متدها است و برای نمونه ItemTemplate جنریک، وهله‌ای از فیلد emp تعریف شده‌ی در قسمت code را دریافت کرده و در صفحه نمایش می‌دهد.
یا حتی می‌توان از RenderFragment برای وهله سازی پویای یک کامپوننت مانند SurveyPrompt، مقدار دهی خاصیت Title آن و درج آن در صفحه به صورت زیر هم استفاده کرد:
 @page "/"
  
 @CreateDynamicComponent()

 @code {
     RenderFragment CreateDynamicComponent() => builder =>
     {
         builder.OpenComponent(0, typeof(SurveyPrompt));
         builder.AddAttribute(1, "Title", "Some title");
         builder.CloseComponent();
     };
 }
‫۳ سال و ۵ ماه قبل، یکشنبه ۲۹ فروردین ۱۴۰۰، ساعت ۱۶:۰۶
وحید نصیری وحید نصیری
نظرات مطالب
غیرمعتبر شدن کوکی‌های برنامه‌های ASP.NET Core هاست شده‌ی در IIS پس از ری‌استارت آن
یک نکته‌ی تکمیلی: پیاده سازی IXmlRepository مایکروسافت برای EF Core

از زمان ارائه‌ی NET Core 2.2.، بسته‌ی نیوگت جدید Microsoft.AspNetCore.DataProtection.EntityFrameworkCore ارائه شده‌است که کار آن دقیقا شبیه به پیاده سازی «یک نکته‌ی تکمیلی: روش ذخیره سازی کلید موقتی تولید شده در بانک اطلاعاتی بجای حافظه‌ی سرور» است که در نظرات فوق ارائه شد.
برای استفاده‌ی از آن، ابتدا بسته‌ی نیوگت آن‌را به برنامه اضافه کنید:
dotnet add package Microsoft.AspNetCore.DataProtection.EntityFrameworkCore

سپس Context ای را که بر اساس اینترفیس IDataProtectionKeyContext آن پیاده سازی شده‌است و دارای DbSet جدید از نوع DataProtectionKey است، تعریف کنید:
    public class MyKeysContext : DbContext, IDataProtectionKeyContext
    {
        // A recommended constructor overload when using EF Core 
        // with dependency injection.
        public MyKeysContext(DbContextOptions<MyKeysContext> options) 
            : base(options) { }

       // This maps to the table that stores keys.
        public DbSet<DataProtectionKey> DataProtectionKeys { get; set; }
    }
که با اجرای مهاجرت‌ها، یک جدول جدید را با سه فیلد زیر، ایجاد می‌کند:
public int Id { get; set; }
public string FriendlyName { get; set; }
public string XmlData { get; set; }

در آخر روش معرفی این Context به سیستم DataProtection به صورت زیر است: 
public void ConfigureServices(IServiceCollection services)
{
   // using Microsoft.AspNetCore.DataProtection;
    services.AddDataProtection()
        .PersistKeysToDbContext<MyKeysContext>();
}
به این ترتیب، به صورت خودکار، اطلاعات موقتی کلیدهای رمزنگاری سیستم data-protection در بانک اطلاعاتی ذخیره شده و یا بازیابی می‌شوند.
‫۵ سال قبل، چهارشنبه ۳ مهر ۱۳۹۸، ساعت ۱۸:۳۹
وحید نصیری وحید نصیری
نظرات مطالب
ASP.NET MVC و Identity 2.0 : مفاهیم پایه
- جدول UserRoles جهت شبیه سازی رابطه‌ی many-to-many در اینجا تعریف شده‌است و در اصل در اینجا دو رابطه‌ی many-to-one و one-to-many وجود دارند. از این جهت که در EF Code First امکان دسترسی به این جدول (junction table) به صورت متداول و استاندارد آن وجود ندارد. بنابراین اکنون که این جدول را در اختیار شما قرار داده‌اند و با EF می‌توان آن‌را کوئری گرفت، امکان استفاده و سفارشی سازی آن را هم دارید. روابط بر اساس کلیدهای خارجی که در اینجا تعریف شده‌اند شکل می‌گیرند و نه فیلدهای اضافی آن.
- فیلد تاریخ انقضاء یک نقش بهتر است به جدول Role اضافه شود و نه این جدول واسط.
- بعد از اضافه کردن این فیلد، کوئری گرفتن از آن توسط سرویس RoleManger انجام می‌شود.
- همچنین فیلتر Authorize استاندارد، درکی از این فیلد جدید ندارد. به همین جهت باید آن‌را هم سفارشی سازی کنید. یک نمونه‌ی آن در پروژه‌ی Decision وجود دارد. این فیلتر با Claims کار می‌کند و مزیت آن عدم مراجعه‌ی مکرر به بانک اطلاعاتی است. این Claims هم پس از لاگین شخص در کوکی او ذخیره می‌شوند. برای نوشتن Claims سفارشی می‌توانید از متد GenerateUserIdentityAsync استفاده کنید و سپس آن‌را در فیلتر Authorize سفارشی سازی شده، بخوانید. در ASP.NET Core Identity یک جدول جدید به نام Role Claims برای همین کاربردها به صورت استاندارد پیش بینی شده‌است و مدیریت کوکی‌های آن خودکار است. به علاوه در آنجا نیازی به سفارشی سازی خود فیلتر Authorize نیست و مفهوم جامعی را به نام Policies، برای سفارشی سازی دسترسی‌ها و فیلتر Authorize معرفی کرده‌اند.
‫۶ سال و ۶ ماه قبل، جمعه ۲۴ فروردین ۱۳۹۷، ساعت ۲۳:۲۸
وحید نصیری وحید نصیری
نظرات مطالب
VS Code برای توسعه دهندگان ASP.NET Core - قسمت سوم - گردش کاری‌های متداول
گردش کاری ایجاد یک solution جدید به کمک NET CLI.

فرض کنید می‌خواهیم ساختار فوق را که شبیه به پروژه‌های ایجاد شده‌ی توسط Visual Studio است، توسط NET CLI. ایجاد کنیم. روش اینکار به صورت ذیل است:

1) ایجاد پوشه‌ی اصلی و زیر پوشه‌های src و test و سپس ایجاد یک فایل sln خالی

mkdir CSharpWithVSCode
cd CSharpWithVSCode
mkdir src
mkdir test
dotnet new sln
2) ایجاد پوشه‌ی برنامه‌ی کنسول درون پوشه‌ی src و سپس ایجاد ساختار پروژه برنامه‌ی کنسول
cd src
mkdir CSharpWithVSCode.ConsoleApp
cd CSharpWithVSCode.ConsoleApp
dotnet new console
3) ایجاد پوشه‌ی یک پروژه‌ی کتابخانه‌ای درون پوشه‌ی src و سپس ایجاد ساختار آن 
cd..
cd..
cd src
mkdir CSharpWithVSCode.ClassLib
cd CSharpWithVSCode.ClassLib
dotnet new classlib
4) افزودن دو پروژه‌ی جدید ایجاد شده به فایل sln
cd..
cd..
dotnet sln add .\src\CSharpWithVSCode.ConsoleApp\CSharpWithVSCode.ConsoleApp.csproj
dotnet sln add .\src\CSharpWithVSCode.ClassLib\CSharpWithVSCode.ClassLib.csproj
5) افزودن ارجاعی از classlib به پروژه‌ی کنسول
cd .\src\CSharpWithVSCode.ConsoleApp\
dotnet add reference ..\CSharpWithVSCode.ClassLib\CSharpWithVSCode.ClassLib.csproj
‫۷ سال و ۲ ماه قبل، شنبه ۴ شهریور ۱۳۹۶، ساعت ۱۴:۱۸
وحید نصیری وحید نصیری
نظرات مطالب
مبانی TypeScript؛ ماژول‌ها
- با هربار تغییر فایل tsconfig.json، کامپایل دوباره‌ی پروژه را فراموش نکنید (مهم). از منوی build گزینه‌ی rebuild solution را انتخاب کنید. این rebuild، کار کامپایل مجدد فایل‌های ts. را هم انجام می‌دهد.
- commonjs بیشتر برای برنامه‌های nodejs استفاده می‌شود. اگر علاقمند باشید که با سیستمی شبیه به AngularJS 2.0 کار کنید، از یک module loader ویژه، به نام SystemJS استفاده کنید (که قابلیت بارگذاری خودکار ES6 modules, AMD, CommonJS را دارد). بنابراین فایل tsconfig.json را به این صورت تغییر دهید:
{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "sourceMap": true
    }
}
بعد فایل index.html شما چنین شکلی را پیدا می‌کند:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.22/system.js"></script>
    <script type="text/javascript">
        System.defaultJSExtensions = true;
        System.import('app');
    </script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>
در اینجا System.JS کار بارگذاری اولین ماژول برنامه یا همان app.js را به صورت خودکار انجام می‌دهد (و همچنین تمام ماژول‌های مرتبط با آن‌را). بنابراین دیگر نیازی به ذکر اسکریپت‌های برنامه در اینجا نیست (هیچکدام از آن‌ها، منهای موارد عمومی مثل خود system.js).
بعد فایل app.ts را هم به این صورت تغییر دهید، چون این کدها پس از onload اجرا می‌شوند: 
import {Book} from "./testmd";

let book: Book = new Book();
console.log(book.bookName);
document.getElementById("content").innerText = book.GetbookNmae;
‫۸ سال و ۴ ماه قبل، دوشنبه ۷ تیر ۱۳۹۵، ساعت ۰۲:۵۷
وحید نصیری وحید نصیری
نظرات مطالب
نمایش ساختارهای درختی توسط jqGrid
- مدل توضیح داده شده در اینجا Adjacency model است و شباهت زیادی به «مدل‌های خود ارجاع دهنده» دارد. طراحی خودتان را بر اساس مطلب یاد شده انجام دهید و یا نگاشت نهایی اطلاعات خودتان را تبدیل کنید به این حالت. مهم نیست ساختار اصلی بانک اطلاعاتی شما به چه صورتی است. همینقدر که خروجی کوئری آن Adjacency model باشد (شبیه به ساختار کلاس BlogComment مطلب فوق)، با توضیحات فوق سازگار خواهد بود. اگر مستقیما SQL می‌نویسید، در مطلب «SQL Antipattern #2» کوئری‌های آن موجود است. اگر با LINQ و EF کار می‌کنید، توضیحات مطلب «مباحث تکمیلی مدل‌های خود ارجاع دهنده در EF Code first» را پیگیری کنید.
 
+ امکان اتصال دو جدول با کلید خارجی نیز در اینجا وجود دارد:
public ActionResult GetComments(JqGridRequest request, int? nodeid, int? parentid, int? n_level)
در امضای متد فوق که در بحث مطرح شده، node id تعیین کننده‌ی واکشی از parent id است. اگر node id نال بود، یعنی نمایش بار اول لیست (نمایش لیست استان‌ها):
if (nodeid == null)
{
     productsQuery = productsQuery.Where(x => x.ParentId == null);
}
 اگر نال نبود (درخواست واکشی اطلاعات استان بر اساس node id آن)، یعنی روی یک نود کلیک شده‌است. در اینجا فیلد parent id می‌تواند به عنوان کلید خارجی که به جدولی دیگر اشاره می‌کند نیز تفسیر و جایگزین شود:
else
{
   // آی دی یک گره می‌تواند کلید خارجی یک جدول دیگر باشد
   productsQuery = productsQuery.Where(x => x.ParentId == nodeid.Value);
}
برای این متد نهایتا مهم نیست که productsQuery به چه نحوی تهیه می‌شود. مهم نیست که از چند جدول مختلف حاصل می‌شود. فقط مقادیر نهایی آن مهم است.
‫۹ سال و ۱۱ ماه قبل، یکشنبه ۹ آذر ۱۳۹۳، ساعت ۱۴:۴۴