در قسمت قبل مشاهده کردیم که چگونه میتوان کل برنامه را به صورت سراسری، تعاملی کرد تا بتوان توسط آن، Blazor Server سنتی را شبیه سازی نمود؛ اما ... آیا واقعا نیاز است چنین کاری را انجام دهیم؟! چون در این صورت از قابلیتهای جدید SSR به همراه Blazor 8x محروم میشویم. اگر کل قابلیتهای تعاملی مورد نیاز ما در حد یک فرم و ارسال اطلاعات آن به سمت سرور است، میتوان در Blazor 8x هنوز هم در همان حالت SSR قرار گرفت و از فرمهای جدید تعاملی آن استفاده کرد تا برای پردازش چنین مواردی، نیازی به برقراری اتصال دائم SignalR نباشد. جزئیات نحوهی کار با اینگونه فرمها را در ادامه بررسی میکنیم. امکان تعریف HTML Forms استاندارد در Blazor 8x فرمهای استاندارد HTML، پیش از ظهور جاوااسکریپت و SPAها وجود داشتند (دقیقا همان زمانیکه که فقط مفهوم SSR وجود خارجی داشت) و هنوز هم جزء مهمی از اغلب برنامههای وب را تشکیل میدهند. با ارائهی دات نت 8 و قابلیت server side rendering آن، کامپوننتهای برنامه، فقط یکبار در سمت سرور رندر شده و HTML سادهی آنها به سمت مرورگر کاربر بازگشت داده میشود. در این حالت، فرمهای استاندارد HTML، امکان دریافت ورودیهای کاربر و ارسال دادههای آنها را به سمت سرور میسر میکنند (چون دیگر خبری از اتصال دائم SignalR نیست و باید اطلاعات را به همان نحو استاندارد پروتکل HTTP، به سمت سرور Post کرد). در دات نت 8، دو راهحل برای کار با فرمها در برنامههای Blazor وجود دارد: استفاده از EditForm خود Blazor و یا استفاده از HTML forms استاندارد و ساده، به همان نحوی که بوده و هست. روش کار با EditForm در برنامههای Blazor SSR البته ما قصد استفاده از فرمهای سادهی HTML, ...ادامه مطلب
در Blazor 8x میتوان صفحات SSR ای را به همراه Blazor server islands و یا Blazor WASM islands داشت؛ یعنی یک کامپوننت Blazor Server که داخل یک صفحهی معمولی SSR قرار گرفته و با سرور، ارتباط SiganlR برقرار میکند و یا یک کامپوننت Blazor WASM که در قسمتی از صفحهی SSR درج شده و درون مرورگر کاربر اجرا میشود. به هر کدام از اینها یک «جزیرهی تعاملی» گفته میشود (interactive island). در این قسمت، نکات مرتبط با جزایر تعاملی Blazor Server را بررسی میکنیم. بررسی یک مثال: تهیه یک برنامهی Blazor 8x برای نمایش لیست محصولات، به همراه جزئیات آنها به لطف وجود SSR در Blazor 8x، میتوان HTML نهایی کامپوننتها و صفحات Blazor را همانند صفحات MVC و یا Razor pages، در سمت سرور تهیه و بازگشت داد. این خروجی در نهایت یک static HTML بیشتر نیست و گاهی از اوقات ما به بیش از یک خروجی ساده HTML ای نیاز داریم. در این مثال که بر اساس قالب dotnet new blazor --interactivity Server تهیه میشود، قصد داریم موارد زیر را پیاده سازی کنیم: - صفحهای که یک لیست محصولات فرضی را نمایش میدهد : بر اساس SSR - صفحهای که جزئیات یک محصول را نمایش میدهد: بر اساس SSR - دکمهای در ذیل قسمت نمایش جزئیات یک محصول، برای دریافت و نمایش لیست محصولات مشابه و مرتبط: بر اساس Blazor server islands یعنی تا جائیکه ممکن است قصد نداریم تمام صفحات و تمام قسمتهای برنامه را با فعالسازی سراسری حالت تعاملی Blazor server که در قسمتهای قبل در مورد آن توضیح داده شد، پیاده سازی کنیم. میخواهیم فقط قسمت کوچکی از این سناریو را که واقعا نیاز به یک چنین قابلیتی را دارد، توسط یک جزیرهی تعاملی Blazor s, ...ادامه مطلب
در قسمتهای قبل، نحوهی تعریف جزیرههای تعاملی Blazor Server را به همراه نکات مرتبط با آنها بررسی کردیم. برای مثال مشاهده کردیم که چون Blazor Server و SSR هر دو بر روی سرور اجرا میشوند، از لحاظ دسترسی به اطلاعات و کار با سرویسها، هماهنگی کاملی دارند و میتوان کدهای یکسان و یکدستی را در اینجا بکار گرفت. در Blazor 8x، امکان تعریف جزیرههای تعاملی Blazor WASM نیز وجود دارد که به همراه تعدادی نکتهی ویژه، در مورد نحوهی مدیریت سرویسهای مورد استفادهی در این کامپوننتها است. معرفی برنامهی Blazor WASM این مطلب در این مطلب قصد داریم دقیقا قسمت جزیرهی تعاملی Blazor Server همان برنامهی مطلب قبل را توسط یک جزیرهی تعاملی Blazor WASM بازنویسی کنیم و با نکات و تفاوتهای ویژهی آن آشنا شویم. یعنی زمانیکه صفحهی SSR نمایش جزئیات یک محصول ظاهر میشود، نحوهی رندر و پردازش کامپوننت نمایش محصولات مرتبط و مشابه، اینبار یک جزیرهی تعاملی Blazor WASM باشد. بنابراین قسمت عمدهای از کدهای این دو قسمت یکی است؛ فقط نحوهی دسترسی به سرویسها و محل قرارگیری تعدادی از فایلها، متفاوت خواهد بود. ایجاد یک پروژهی جدید Blazor WASM تعاملی در دات نت 8 بنابراین در ادامه، در ابتدای کار نیاز است یک پوشهی جدید را برای این پروژه، ایجاد کرده و بجای انتخاب interactivity از نوع Server: dotnet new blazor --interactivity Server اینبار برای اجرای در مرورگر توسط فناوری وباسمبلی، نوع WebAssembly را انتخاب کنیم: dotnet new blazor --interactivity WebAssembly در این حالت، Solution ای که ایجاد میشود، به همراه دو پروژهاست (برخلاف پروژههای Blazor Server تعاملی که فقط شامل یک پروژهی سمت , ...ادامه مطلب
این Prerendering است که امکان رندر یک کامپوننت تعاملی را در سمت سرور میسر میکند تا کاربر بتواند پیش از فعال شدن قابلیتهای پیشرفتهی یک کامپوننت، یک حداقل خروجی را از آن مشاهده کند و همچنین وجود آن برای موتورهای جستجو و بهبود SEO بسیار مفید است. اما ... در این بین مشکلی رخ میدهد که نمونهی آنرا در قسمت قبل مشاهده کردیم: آغاز آن دوبار صورت میگیرد؛ یکبار در سمت سرور برای تهیهی یک خروجی SSR و یکبار هم پس از فعال شدن قابلیتهای تعاملی آن در سمت کلاینت. این آغاز دوباره، برای هر دو حالت کامپوننتهای تعاملی Blazor Server و Blazor WASM برقرار است. راهحلهایی از نحوهی مواجه شدن با یک چنین مشکلی را در قسمت قبل بررسی کردیم. راهحل دیگری که در این بین ارائه شده و توسط خود مایکروسافت هم در مثالهای آن مورد استفاده قرار میگیرد، استفاده از سرویس PersistentComponentState است که جزئیات آنرا در این قسمت بررسی خواهیم کرد. بررسی نحوهی عملکرد سرویس PersistentComponentState سرویس PersistentComponentState، در داتنت 6، به Blazor اضافه شد و امکان جدیدی نیست. قسمتی از این مباحث جدید SSR که بهنظر مختص به Blazor 8x هستند، پیشتر هم وجود داشتند؛ تحت عنوان pre-rendering. برای مثال فقط کافی بودن تا در برنامههای Blazor Server قبلی، فایل Host.cshtml_ را به صورت زیر ویرایش کرد تا pre-rendering فعال شود: <component type="typeof(App)" render-mode="ServerPrerendered" /> مشکلی که در این حالت بروز میکرد این بود که متد OnInitializedAsync یک کامپوننت، دوبار فراخوانی میشد؛ یکبار در زمان pre-rendering در سمت سرور، تا HTML استاتیکی برای ارائهی به مرورگر کاربر تولید شود و بار, ...ادامه مطلب
Auto Render Mode، آخرین حالت رندری است که به Blazor 8x اضافه شدهاست. اگر از Blazor Server استفاده کنیم، به یک آغاز سریع در برنامه خواهیم رسید، به همراه مقداری تاخیر جزئی، برای به روز رسانی UI؛ از این جهت که تعاملات صورت گرفته باید از طریق اتصال وبسوکت SignalR به سرور ارسال شده و منتظر نتیجهی نهایی، برای اعمال آن به صفحه شد و یا باید به مقیاس پذیری این اتصالات همزمان با تعداد کاربران بالا هم اندیشید. اگر از Blazor WASM استفاده کنیم، آغاز آن، اندکی کند خواهد بود تا فایلهای فریمورک و برنامه، به درون مرورگر کاربر منتقل شوند. اما پس از آن همهچیز بسیار سریع است؛ از این جهت که تعاملات با DOM، توسط مرورگر و در همان سمت کاربر مدیریت میشود. اما ... چقدر خوب میشد که امکان ترکیب هردوی اینها با هم در یک برنامه وجود میداشت؛ یعنی داشتن یک آغاز سریع، به همراه تعاملات سریع با DOM. به همین جهت Auto Render Mode به Blazor 8x اضافه شدهاست. نحوهی عملکرد حالت رندر تعاملی خودکار در Blazor 8x زمانیکه از قرار است از Auto Render Mode استفاده شود، یعنی در نهایت به سراغ حالت رندر وباسمبلی رفتن؛ اما به شرطیکه که فریمورک، مطمئن شود میتواند تمام فایلهای مرتبط را خیلی سریع و در کمتر از 100 میلیثانیه تامین کند که عموما یک چنین حالتی به معنای از پیش دریافت کردن این فایلها و کش شده بودن آنها در مرورگر است. اما اگر یک چنین تضمینی وجود نداشته باشد، از همان ابتدای کار تصمیم میگیرد که باید کامپوننت را از طریق نگارش Blazor Server آن ارائه دهد، تا آغاز سریعی را سبب شود. در این بین هم در پشت صحنه (یعنی زمانیکه کاربر مشغول به کار با نگارش Blazor Server کامپوننت است)، شروع به دریافت ف, ...ادامه مطلب