‫مدیریت وضعیت (State Management) در Blazor

• رفرش کردن صفحه توسط کاربر (F5) یا بستن تب مرورگر.
• ناوبری (Navigation) به یک صفحه دیگر.
• قطع و وصل شدن کانال ارتباطی SignalR (در Blazor Server).
• سوئیچ کردن اپلیکیشن از حالت پیش‌رندر شده (Prerendered HTML) به حالت تعاملی (Interactive Mode) در معماری جدید Blazor Web App.

• مقادیر فیلدها و پراپرتی‌ها در رفرنس‌های کامپوننت.
• ساختار درختی کامپوننت‌ها و آخرین خروجی رندر شده (Render Tree).
• سرویس‌های ثبت شده در کانتینر DI (که در این مدل معمولاً به صورت Singleton رفتار می‌کنند، چرا که کل برنامه محدود به یک تب مرورگر است).
• داده‌های ذخیره شده از طریق جاوااسکریپت (JS Interop) در حافظه مرورگر (localStorage یا sessionStorage).

• نمونه‌های کامپوننت و فیلدهای درون حافظه آن‌ها روی سرور ایجاد و نگهداری می‌شوند.
• سرویس‌های DI با طول عمر Scoped به ازای هر اتصال (Circuit) کاربر زنده می‌مانند.

• وضعیت‌های قابل اشتراک‌گذاری یا بوکمارک شدن (مانند فیلترها): پارامترهای آدرس (URL Route / Query Parameters)
• وضعیت‌های صرفاً گرافیکی و محدود به یک کامپوننت: فیلدهای محلی کُد (@code)
• ارتباط مستقیم و گام‌به‌گام والد و فرزند: خواص [Parameter] به همراه EventCallback
• اشتراک داده در لایه‌های عمیق یک درختواره: مقادیر آبشاری (CascadingValue / CascadingParameter)
• ارتباط میان کامپوننت‌های غیرهمزاد یا صفحات مجزا: سرویس‌های تزریق وابستگی (DI Services)
• وضعیت‌های اشتراکی واکنش‌گرا (Reactive): کانتینرهای وضعیت مجهز به رویداد اعلان تغییرات (State Containers)
• حفظ پیوستگی داده از پیش‌رندر به حالت تعاملی: ویژگی [PersistentState] یا سرویس PersistentComponentState
• ذخیره‌سازی امن و ماندگار در مرورگر (فقط سمت سرور): سرویس‌های ProtectedLocalStorage یا ProtectedSessionStorage

@page "/products/{Category}"
@inject NavigationManager NavManager

<h3>دسته بندی: @Category</h3>
<p>عبارت جستجو: @SearchTerm</p>

<input @bind="tempSearch" placeholder="جستجو..." />
<button @onclick="ApplySearch">اعمال فیلتر</button>

@code {
    [Parameter] public string? Category { get; set; }

    // اتصال خودکار به Query String با قابلیت تعامل کلاینت و سرور
    [SupplyParameterFromQuery(Name = "searchTerm")]
    public string? SearchTerm { get; set; }

    private string? tempSearch;

    protected override void OnParametersSet()
    {
        tempSearch = SearchTerm;
    }

    private void ApplySearch()
    {
        // بازسازی آدرس برای ثبت در تاریخچه مرورگر بدون از دست رفتن وضعیت
        var targetUri = NavManager.GetUriWithQueryParameter("searchTerm", tempSearch);
        NavManager.NavigateTo(targetUri);
    }
}

مزیت: هماهنگی کامل با دکمه‌های Back/Forward مرورگر و سئو (SEO) عالی در حالت SSR.

محدودیت: صرفاً برای داده‌های ساده (رشته، عدد و تاریخ) مناسب است و برای اشیاء پیچیده کاربرد ندارد.

<button class="btn btn-primary" @onclick="ToggleDetails">
    @(isExpanded ? "پنهان‌سازی جزئیات" : "نمایش جزئیات")
</button>

@if (isExpanded)
{
    <div class="alert alert-info mt-2">این یک وضعیت کاملاً محلی است.</div>
}

@code {
    private bool isExpanded; // State محلی

    private void ToggleDetails() => isExpanded = !isExpanded;
}

<ChildComponent Title="وضعیت فعلی شمارنده" 
                CurrentValue="parentCounter" 
                OnIncrement="HandleIncrement" />

@code {
    private int parentCounter = 10;
    private void HandleIncrement(int step) => parentCounter += step;
}

<div class="card p-3">
    <h5>@Title</h5>
    <p>مقدار: @CurrentValue</p>
    <button @onclick="() => OnIncrement.InvokeAsync(1)">افزایش در والد</button>
</div>

@code {
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public int CurrentValue { get; set; }
    [Parameter] public EventCallback<int> OnIncrement { get; set; }
}

نکته معماری: اگر تعداد لایه‌های میانی درختواره زیاد شود، این الگو منجر به پدیده‌ی کثیف Prop Drilling (پاس دادن اجباری پارامترها از لایه‌هایی که خودشان به آن نیاز ندارند) می‌شود. در چنین شرایطی باید به سراغ الگوی بعدی رفت.

<CascadingValue Value="currentTheme">
    <div class="@currentTheme">
        @Body
    </div>
</CascadingValue>

@code {
    private string currentTheme = "dark-theme";
}

@code {
    [CascadingParameter] public string? ActiveTheme { get; set; }
}

• AddScoped: در Blazor Server به ازای هر اتصال (هر کاربر/تب) یک نمونه مجزا می‌سازد (مناسب برای سبد خرید). در Blazor WebAssembly معادل کلاینت رفتار کرده و به ازای هر تب مرورگر تفکیک می‌شود.
• AddSingleton: در Blazor Server خطرناک است؛ چون یک نمونه واحد برای تمام کاربران سیستم به اشتراک گذاشته می‌شود (نشت شدید داده!). اما در Blazor WebAssembly امن است چون کل ران‌تایم ایزوله در مرورگر یک فرد است.

// CounterStateContainer.cs
public class CounterStateContainer
{
    private int _count;

    public int Count
    {
        get => _count;
        set
        {
            if (_count != value)
            {
                _count = value;
                NotifyStateChanged();
            }
        }
    }

    // رویدادی که تغییر وضعیت را به گوش شنوندگان می‌رساند
    public event Action? OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

@page "/reactive-demo"
@implements IDisposable
@inject CounterStateContainer StateContainer

<h3>مدیریت وضعیت واکنش‌گرا</h3>
<p>مقدار فعلی: <strong>@StateContainer.Count</strong></p>
<button class="btn btn-success" @onclick="Increment">افزایش وضعیت</button>

<div class="mt-3">
    <NestedChildComponent />
</div>

@code {
    protected override void OnInitialized()
    {
        // subscribe به رویداد تغییر برای به‌روزرسانی UI کامپوننت
        StateContainer.OnChange += StateHasChanged;
    }

    private void Increment() => StateContainer.Count++;

    public void Dispose()
    {
        // جلوگیری از نشت حافظه (Memory Leak) با لغو اشتراک
        StateContainer.OnChange -= StateHasChanged;
    }
}

@page "/weather"
@rendermode InteractiveWebAssembly

<h3>پیش‌بینی آب و هوا</h3>

@if (forecasts == null)
{
    <p>در حال بارگذاری...</p>
}
else
{
    }

@code {
    // ران‌تایم دیتای این پراپرتی را در اولین رندر (سرور) سریالایز کرده
    // و در رندر دوم (کلاینت) بدون اجرای مجدد منطق متد، بازگردانی می‌کند.
    [PersistentState]
    public WeatherForecast[]? forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (forecasts == null)
        {
            // این بلاک فقط یک‌بار روی سرور اجرا می‌شود
            forecasts = await WeatherService.GetForecastsAsync();
        }
    }
}

• RestoreBehavior.SkipInitialValue: در رندر اولیه از حالت پیش‌رندر شده استفاده نمی‌کند.
• RestoreBehavior.SkipLastSnapshot: وضعیت ذخیره شده قبلی را در زمان Reconnectهای ناگهانی نادیده گرفته و به روز رسانی جدید انجام می‌دهد.

@inject ProtectedLocalStorage ProtectedStorage

<button @onclick="SavePreferences">ذخیره تم کاربری</button>

@code {
    private async Task SavePreferences()
    {
        // داده‌ها قبل از ذخیره در لایه کلاینت به طور کامل و امن رمزنگاری می‌شوند
        await ProtectedStorage.SetAsync("UserTheme", "Dark-Fluid");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // دسترسی به جاوااسکریپت و حافظه مرورگر فقط پس از رندر کلاینت ممکن است
            var result = await ProtectedStorage.GetAsync<string>("UserTheme");
            if (result.Success)
            {
                var theme = result.Value;
                // اعمال تم...
                StateHasChanged();
            }
        }
    }
}

قانون طلایی امنیت: هرگز توکن‌های JWT بسیار حساس یا اطلاعات هویتی کلیدی (PII) را بدون لایه‌های امنیتی تکمیلی درون localStorage کلاینت (به خصوص در WASM) ذخیره نکنید. حملات XSS می‌توانند دسترسی به حافظه عادی مرورگر را به مخاطره اندازند.

await InvokeAsync(StateHasChanged);