برای نگهداری آخرین وضعیت در بلیزور چه باید کرد؟

فرض کنید که در حال پر کردن فرم اطلاعاتی بزرگی هستید، و این عملیات برای شما ۳۰ دقیقه طول می کشد. پس از زدن دکمه ثبت با خطایConnection lost! روبرو می‌شوید. دکمه بک را می‌زنید و به صفحه قبل بر می‌گردید تا مجدد دکمه ثبت را بزنید. اما خبری از آن همه اطلاعاتی که پر کرده بودید نیست!

این تجربه‌ی دوست نداشتنی باعث می‌شود که دیگر به این سایت سر نزنید!

نگهداشتن state برای داشتن یک تجربه کاربری خوب به هنگاهی که اتصال کاربر به طور موقت قطع می‌شود و یا صفحه را رفرش می‌کند یا به صفحه قبل بر می‌گردد بسیار مهم است.

وقتی در مورد نگهداری و حفظ موقعیت صفحه صحبت می‌کنیم منظورمان حفظ موقعیت موارد زیر است:

· آبجکت مدل HTML که همان ui صفحه است

· فیلد ها و پراپرتی های مورد استفاده

· وضعیت سرویس های رجیستر شده

نگهداری وضعیت در بلیزور، بستگی به نوع بلیزور پیاده سازی شده دارد.

وضعیت در بلیزور وب اسمبلی در داخل کش مرورگر نگهداری می‌شود. تا زمانی که صفحه رفرش شود.

در بلیزور سرور وضعیت در bucket هایی که در هر سشن مخصوص هر کاربر ایجاد شده اند نگهداری می‌شوند و با disconnect شدن کاربر و یا در شرایطی که مموری سرور محدود است از بین می‌رود.

برای نگهداشتن وضعیت راه حل‌های زیر پیشنهاد می‌شود.

Service Registration:

فرض کنید که در قسمت Code-Behind یک کامپوننت، متغیری تعریف کرده و از آن برای نمایش داده در این کامپوننت استفاده می‌شود. با رفرش کردن صفحه مقدار این متغیر به مقدار اولیه برمی‌گردد. زیرا این متغیر در داخل کامپوننت تعریف شده و هر بار کامپوننت initialize شود از نو ساخته می‌‌شود.

برای حل این مشکل باید یک سرویس ساخته و این متغیر در داخل این سرویس ایجاد و مقدار دهی شود. سپس این سرویس به صورت singleton رجیستر می‌شود. سرویس ساخته شده را در کامپوننت مورد نظر رجیستر و استفاده می‌کنیم‌.

با این کار با destroy شدن کامپوننت سرویس در حافظه می‌ماند.

Browser Cache:

راه حل دیگر استفاده از کش مرورگر با استفاده از HTML5 Web Storage است.

در این روش یک فایل js با محتوای زیر ایجاد می‌کنیم.

window.stateManager = {

save: function (key, str) {

localStorage[key] = str;

},

load: function (key) {

return localStorage[key];

}

};

و آدرس فایل را در فایلindex.html وب اسمبلی یا در فایل _Host.cshtml بلیزور سرور اضافه می‌کنیم.

<script src="_content/{assembly}/path_to_file">

یک کامپوننت برای مدیریت وضعیت ایجاد می‌کنیم. در داخل قسمت کد کامپوننت متد OnInitializedAsync را override می‌کنیم.

در داخل این متد تلاش می‌کنیم هنگامی که کامپوننت لود شد از کش خوانده شود. وهنکامی که یک پراپرتی تغییر کرد و ویو مدل سریالایز شد در کش ذخیره شود.

کامپوننت را بهApp.razor اضافه می‌کنیم.

دیتیل این کامپوننت در این آدرس موجود است.

با این کار مدیریت وضعیت تمامی صفحات انجام می‌شود. و نیازی به نوشتن کد اضافی دیگری نیست.

شما می‌توانید تمامی مقادیر ذخیره شده را در Developer tools مرورگر مشاهده کنید.

نکته ای که باید در نظر داشته باشید این است که چنانچه اطلاعات ذخیره شده در مرورگر حساس هستند می‌توانید اطلاعات را encode کرده و سپس ذخیره کنید.

Server-side Management:

راه حل بعدی صدا زدن Api و ذخیره اطلاعات در سرور است.

این که در کجا ذخیره کنید بستگی به خود شما دارد. ممکن است انتخاب شما sql، noSql و یا redis باشد. برای این منظور یک کنترلر ایجاد کنید وapi مورد نظر را پیاده سازی کنید. کد بسیار شبیه به رویکرد قبلی است اما مدل را از فراخوانی API به جای کش محلی بازیابی می کند. کنترل کننده تغییر ویژگی مدل را سریال می کند و به سرور ارسال می کند.

برای مشاهده کد ها به این آدرس مراجعه کنید.

لینک کامل توضیحات