نمایش دیالوگ مودال بوت استرپ در MVC
@using Microsoft.Extensions.Logging @inject ILogger<Error> Logger @inject IJSRuntime jsRuntime <CascadingValue Value="this"> @ChildContent </CascadingValue> @code { [Parameter] public RenderFragment? ChildContent { get; set; } public void ProcessError(Exception ex) { Logger.LogError("Error:ProcessError - Type: {Type} Message: {Message}", ex.GetType(), ex.Message); jsRuntime.ToastrError("متاسفانه خطایی رخ داد"); //StateHasChanged(); } }
<Error> <Router ...> ... </Router> </Error>
@code { [CascadingParameter] public Error? Error { get; set; } private void CreatePost() { try { throw new InvalidOperationException("پست ساخته نشد!"); } catch (Exception ex) { Error?.ProcessError(ex); } } }
- ExtJs چیست؟
- چه زمانی کاربرد دارد؟
- تفاوت آن با سایر فریم ورکهای جاوااسکریپ در چیست؟
پاسخ یک کلمه است: ExtJs. بله درست است در طراحی این CMS تنها از یک فریم ورک جاوااسکریپتی به نام ExtJs استفاده شده است. فریم ورکی که به عقیده بعضیها یک رویا برای توسعه دهندگان وب است و به عقیده سایرین شاید یک کابوس. در این پست قصد دارم به عنوان کسی که با این فریم ورک آشنایی دارم این موضوع را بررسی و مزایا و معایب این فریم ورک را عنوان کنم.
ExtJs یک فریم ورک جاوااسکریپ است بر مبنای Sencha و طراحی شده برای توسعه پروژههای وب در مقیاس بزرگ و به صورت cross-platform . مجوز استفاده از این فریم ورک به صورت GPLv3 است.(یعنی مجاز به استفاده رایگان از فایلهای این فریم ورک هستید به شرطی که قصد استفاده تجاری از پروژه تهیه شده را نداشته باشید! در غیر این صورت باید زحمت خرید نسخه تجاری این فریم ورک را متحمل شوید).
نسخه ای که درباره آن بحث میکنیم نسخه چهار این فریم ورک (ExtJs 4) که بر مبنای ExtJs 3 تولید شده است. تفاوت عمده آن با نسخه قبلی در تکمیل ابزار و کامپوننت هاست و از طرفی نسخه چهار این فریم ورک بر مبنای مدل MVC توسعه داده شده است. یعنی همانند Angular و BackBoneJs میتوانید مفاهیم کنترلر و مدل را به راحتی پیاده سازی کنید.
رویایی به نام ExtJs
اگر بخواهیم این فریم ورک را یک رویا برای توسعه دهندگان وب بنامیم میتوان عناوین زیر را به عنوان مزایا برشمرد:
- در درجه اول قابلیتی که این فریم ورک را متفاوت از سایر فریم ورکهای جاوااسکریپتی میکند
این است که این فریم ورک انبوهی از کامپوننتها و ویجیتهای آماده را به
همراه خود دارد (با کارایی و انعطاف پذیری قابل قبول) و به نوعی شما را بی نیاز از هرگونه مجموعه کامپوننتهای دیگر خواهد
کرد.
- این فریم ورک به خوبی از مباحت OOP پشتیبانی میکند و به این صورت است که یک
سری مفاهیم و مدلهای پایه در این فریم ورک تعبیه شده و به راحتی شما میتوانید مدلهای مورد نظر خود را بر اساس این مفاهیم و مدلهای پایه توسعه
دهید.
- تمام مفاهیم و ابزار لازم جهت درخواستهای Ajax ای و اعتبار سنجی سفارشی و
دستکاری عناصر DOM و... به خوبی در این فریم ورک وجود دارد.
- به دلیل وجود کامپوننتهای یک دست و آماده به راحتی میتوانید امکان تغییر theme را در پروزههای خود بدون کوچکترین زحمت قرار دهید.
- کنترل GridPanel،TreeView ، کنترلهای ورود اطلاعات، کنترل Tab با قابلیت درخواستهای لود صفحات به صورت Ajax و Async با کمترین زحمت در کد نویسی و هم چنین چارتهای بسیار گسترده و متنوع از دیگر مزایای این فریم ورک میتواند باشد.
- ارائه مکانیزمی مناسب برای کار با عملیات داده ای Json. به عنوان نمونه:
Ext.data.JsonP.request({ url: '@url', params: { apiKey: '1234' }, callbackKey: 'myCallbackFn', success: function(){ }, failure: function(){ }, scope: this });
- این فریم ورک ابزارهای جالب و کارآمدی برای توسعه به صورت SPA را داراست.
- کنترلهای داده ای این فریم ورک در هنگام کار با حجم داده بسیار زیاد، فراتر از انتظار عمل میکنند(برای مثال کنترل GridPanel و DataView)
- اگر قصد تولید و توسعه بک پروژه بزرگ درون سازمانی را دارید و سرعت تولید نیز برای شما مهم است ExtJs در این زمینه کمک شایانی به شما خواهد کرد.
- و...
حال با همه این تفاسیر آیا این فریم ورک یک رویا برای هر توسعه دهنده وب خواهد بود؟
به طور قطع نه. با توجه به اصل واقع بینی! همواره به خاطر داشته باشید که
اگر این فریم ورک یک ابزار بی نقص و همه منظوره بود الآن مطمئنا صدها کتاب و
مستندات درباره آن نوشته شده بود و شاید شهرتی بس فراتر از این داشت.
کابوسی به نام ExtJs
- اگر قصد ایجاد یک وب سایت کوچک و جمع و جور را دارید به طوری که مباحث مربوط به SEO نیز برای شما اهمیت دارد تجربه نشان داده است که انتخاب ExtJs میتواند یکی از بزرگترین اشتباهات در طول عمر کاری شما شود.
- ExtJs هیچ گونه کمکی برای تولید و توسعه اپلیکیشنهای موبایل یا پروژههای وب گرافیکی نمیتواند به شما کند.
- اگر سرعت یکی از فاکتور خیلی مهم برای شماست بهتر است به این فریم ورک علاقه نشان ندهید.(کتابخانه آن چیزی در حدود 500KB است! البته با فشرده سازی به 150KB خواهد رسید که باز هم قابل قبول نیست)
- مجوز استفاده برای پروژههای تجاری به صورت رایگان نیست.(^)
- به دلیل وجود ابزارهای متنوع و زیاد؛ زمان یادگیری برای آشنایی و کار کردن با ابزارها، نسبتا طولانی خواهد شد.
- کد نویسی برای استفاده از ابزارهای آن در مقایسه با Jquery و Angular بیشتر خواهد بود(البته این به نوعی مزیت هم است، به دلیل اینکه خوانایی کدها بسیار بالا میرود)
- در طراحی کامپوننتها آن از تگ div در حد غیر قابل قبول استفاده شده است به طوری که Debug صفحات حتی با Firebug هم در بعضی مواقع سخت میشود.
- و...
Ext.Net چیست؟
Ext.Net یک پیاده سازی خاص از فریم ورک ExtJs است که برای توسعه پروژههای Asp.Net Web Forms و Asp.Net MVC طراحی شده است. تفاوت اصلی بین این دو محصول در نوع کدنویسی برای استفاده در پروژههای Asp.Net است. برای مثال در هنگام کار با Ext.Net و پروژههای MVC از آنجا که این محصول سازگاری کامل با موتور Razor دارد به راحتی میتوانید به صورت سینتکس Razor صفحات خود را طراحی کنید.
مثال:
ExtJs
Ext.create('Ext.panel.Panel', { title: 'Fit Layout', width: 500, height: 200, items: { title: 'Inner Panel', html: 'Panel content', bodyPadding: 10, border: true }, renderTo: Ext.getBody() });
Ext.Net
@(X.Panel() .ID("ExpandablePanel") .Title("Panel") .Width(500) .Height(300) .Collapsible(true) .Loader(X.ComponentLoader() .Url(Url.Action("RenderChild")) .Mode(LoadMode.Frame) .DisableCaching(true) .Params(new { containerId = "ExpandablePanel" }) .LoadMask(lm => lm.ShowMask = true) ) .Listeners(l => { l.Expand.Handler = "this.reload();"; l.Collapse.Handler = "this.clearContent();"; }) )
جمع بندی:
با توجه مواردی که ذکر شد میتوان به یک نکته مهم رسید و آن هم این است که هنگام انتخاب ExtJs یا Ext.Net (البته این شامل اکثر ابزارهای توسعه دیگر نیز خواهد شد) حتما شرایط موجود و حاکم برای توسعه محصول را مد نظر داشته باشید که این شرایط شامل محیط اجرای محصول، مدت زمان لازم برای توسعه، سطح دانش نیرویهای توسعه دهنده و ... نیز میباشد.
به همراه نگارش Angular 4.3، روش جدیدی برای کار با HTTP، توسط ماژول جدید HTTP Client آن ارائه شدهاست که ساختار آن بسیار شبیه به ماژول فعلی HTTP آن است و کدهای فعلی را به سادگی میتوان به آن انتقال داد. یکی از تغییرات آن داشتن رخدادهای درصد آپلود و دانلود یک درخواست است:
import { HttpEventType, HttpClient, HttpRequest } from '@angular/common/http'; http.request(new HttpRequest( 'POST', URL, body, { reportProgress: true })).subscribe(event => { if (event.type === HttpEventType.DownloadProgress) { } if (event.type === HttpEventType.UploadProgress) { } if (event.type === HttpEventType.Response) { console.log(event.body); } })
برای مطالعهی بیشتر:
The Angular HTTP Client - Quickstart Guide
A Taste From The New Angular HTTP Client
چرا vuetify ؟
دلایل زیادی برای استفاده از این framework وجود دارد که از جمله آنها میتوان به مواردی از قبیل رابط کاربری خوب برای طرح بندی صفحه برنامه، پشتیبانی از تمام مرورگرها، پشتیبانی از RTL (راست به چپ کردن صفحه)، پشتیبانی از cli3 و موارد دیگر میتوان اشاره نمود.
روش نصب vuetify
vue add vuetify
ساختار grid
grid برای طرح بندی، یا بخش بندی محتوای برنامه استفاده میشود .vuetify همانند bootstrap، از سیستم بخش بندی 12 تایی برای تقسیم بندی صفحه استفاده میکند. در این روش ما به 5 حالت مختلف میتوانیم صفحه را بخش بندی کنیم:
طریقهی استفاده
ساختار برنامهی ما شامل یک سری از کامپوننتهای از پیش تعیین شده برای راحتی و سادگی کار میباشد که در زیر به آنها اشاره شدهاست.
ساختار برنامه ما باید دارای یک v-container باشد تا به درستی کار کند. این کامپوننت در بر گیرندهی تمام صفحهی برنامه است. هر کامپوننت میتواند تنظیمات خاص خود را داشته باشد.
برای مثال در کد پایین، تنظیم fluid باعث میشود تا کامپوننت v-container تمام عرض صفحهی ما را در بر بگیرد.
<v-container fluid></v-container>
کامپوننت v-layout برای کار با ردیفها مورد استفاده قرار میگیرد که تنظیمات مخصوص به خود را دارد.
برای بخش بندی هر ستون در صفحه میتوان از کامپوننت v-flex استفاده کرد.
نکته: در توضیح کد پایین، در قسمت تعریف v-layout به وسیله row مشخص میکنیم که میخواهیم یک ردیف را ایجاد کنیم و در قسمت تعریف v-flex به وسیله md6 مشخص میکنیم که 6 خانه از 12 خانه موجود در ردیف را میخواهیم در اختیار داشته باشیم:
<v-container> <v-layout row> <v-flex md6> ... </v-flex> <v-flex md6> ... </v-flex> </v-layout> </v-container>
نتیجهی قطعه کد بالا بدین ترتیب است:
به وسیله breakpointها میتوانیم مشخص کنیم که هر المان درون هر مدیا (موبایل، تبلت، کامپیوتر و ...) به چه صورتی نمایش داده شود. در حالت کلی پنج نوع breakpoint وجود دارند که به ترتیب شامل:
<v-flex xs6 sm5> </v-flex>
<v-flex xs5 md8> </v-flex>
<div id="app"> <v-app id="inspire"> <v-container grid-list-xl text-xs-center> <v-layout row wrap> <v-flex xs10 offset-xs1> <v-card dark color="purple"> <v-card-text>xs10 offset-xs1</v-card-text> </v-card> </v-flex> <v-flex xs7 offset-xs5 offset-md2 offset-lg5> <v-card dark color="secondary"> <v-card-text>xs7 offset-(xs5 | md2 | lg5)</v-card-text> </v-card> </v-flex> <v-flex xs12 sm5 md3> <v-card dark color="primary"> <v-card-text>(xs12 | sm5 | md3)</v-card-text> </v-card> </v-flex> <v-flex xs12 sm5 md5 offset-xs0 offset-lg2> <v-card dark color="green"> <v-card-text>(xs12 | sm5 | md5) offset-(xs0 | lg2)</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
نتیجهی قطعه کد بالا بدین صورت است:
قبل از شروع، فرض را بر آن میگیریم که حداقل نیازهای یک پروژهی Angular را آماده کرده اید. سپس یک پوشهی جدید را به نام layout میسازیم و layoutهای مربوطه را در آن ایجاد میکنیم. با دستور زیر یک کامپوننت جدید را که layout ما خواهد شد، با نام دلخواهی ایجاد میکنیم:
ng g c Loginlayout
ng g c homelayout
در ادامه Loginlayout را باز کرده و تنظیمات زیر را لحاظ کنید:
<div style="width: 100%;height: 250px;background-color: aquamarine"> <h1>Header</h1> </div> <router-outlet></router-outlet> <div style="width: 100%;height: 250px;background-color: brown"> <h1>Foother</h1> </div>
اکنون وارد کامپوننت home layout شوید و دقیقا مانند قبل، تنظیمات دلخواه خود را انجام داده و همچنین <router-outlet></router-outlet> راهم درون جائیکه میخواهید به صورت پویا باشد بگذارید.
تا اینجا ما فقط layoutها را طراحی کردیم. در ادامه در ریشهی پروژه، سه کامپوننت را به نامهای Home , Login, About میسازیم. Home و About دارای یک قالب و Login هم داری قالب مخصوص به خود میباشد.
سپس وارد کامپوننت آغازین برنامه (app.component.html) شوید و در آن <router-outlet></router-outlet> را وارد کنید. در اینجا دیگر نیازی به نوشتن تگهای خاص دیگری نیست.
در ادامه به اصلیترین قسمت، یعنی مسیریابی میرسیم. وارد app.module.ts شوید و آن را به صورت زیر تنظیم کنید:
export const routes: Routes = [ { path: 'Loginlayout', component: LoginlayoutComponent , children: [ { path: 'Login', component: LoginComponent, pathMatch: 'full'} ] }, { path: 'Homelayout', component: HomelayoutComponent, children: [ { path: 'About', component: AbouComponent, pathMatch: 'full'}, { path: 'Home', component: HomeComponent, pathMatch: 'full'} ] } ];
همچنین برای اینکه مشخص شود کدام کامپوننت به عنوان کامپوننت پیشفرض نمایش داده شود، به صورت زیر عمل میکنیم:
path: '', component: HomelayoutComponent, children: [ { path: '', component:HomeComponent, pathMatch: 'full'} ]
کدهای کامل این مطلب را میتوانید از اینجا دریافت و یا به صورت آنی آزمایش کنید.