
یادگیری سی شارپ از مفاهیم پایه تا پروژه محور: شیگرایی، کار با SQL و LINQ، ORMها (Entity Framework)، ساخت پروژه مدیریت رستوران با گزارشات حرفهای و امکانات کامل!
مشاهده بیشتر
یادگیری MVC Core از مبانی تا پیشرفته: شیگرایی، Routing، Entity Framework، امنیت، تست یونیت، Razor، Ajax، و پروژههای کاربردی! یک دوره کامل برای تسلط بر توسعه وب با ASP.NET Core. به صورت حضوری و آنلاین!
مشاهده بیشترمشخصات مقاله
|آموزش جامع Microsoft Blazor|آموزش منطق view در فریمورک Blazor |
آموزش منطق view در فریمورک Blazor
به طور پیش فرض، قالب های blazor framework، با استفاده از @functions،کد منطق منظر را درون قالب razor تولید می کنند.
-
در پشت صحنه،
فریمورک blazor
یک کلاس شامل کد C# برای تولید درخت اشیای منظر و یک کد C# برای نمایش منطق منظر ، تولید می کند.
-
بیشتر برنامه نویسان تمایل ندارند منظر و منطق را در یک فایل ترکیب کنند.
1 2 3 4 5 6 7 8 | @ page "/" < !-- View (HTML) --> @ functions { // Logic (C#) } < button ></ button > |
روش های بسیاری برای تفکیک منظر (view) و منطق (logic) وجود دارد که در این مقاله مورد بحث قرار خواهند گرفت.
کلاس پایه در فریم ورکBlazor
یک روش برای تفکیک منظر و منطق، ساخت کلاس پایه (Base) است.
-
کلاس پایه شامل تمامی منطق منظر (view logic) می باشد (C#).
-
مولفه بلیزر از این کلاس مشتق می شود و منظر را اضافه می کند.
نگاهی به این مثال بیاندازیم که منظر و منطق منظر را در یک فایل قرار داده است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | @ page "/jsinterop" @ using BlazorApplication.Pages @ using Microsoft.JSInterop < h1 >JavaScript Interop Demo< / h1 > < hr /> < button class = "btn btn-primary" onclick = "@CallJSMethod" >Call JS Method< / button > < button class = "btn btn-primary" onclick = "@CallCSMethod" >Call C# Method< / button > < br /> < br /> < p id = "demop" >JavaScript function called from C#< / p > < br /> < p >@ message< / p > @ functions { protected static string message { get; set; } protected void CallCSMethod() { JSRuntime.Current.InvokeAsync< bool >("CSMethod"); } protected void CallJSMethod() { JSRuntime.Current.InvokeAsync< bool >("JSMethod"); } [JSInvokable] public static void CSCallBackMethod() { message = "C# function called from JavaScript "; } } < button ></ button > |
حال، برای تفکیک منظر از منطق منظر، با ایجاد یک کلاس مولفه جدید در
فریمورک بلیزر
، کد C# را به درون کلاس پایه انتقال دهید، و تمامی کد های C# تعریف شده در @functions را انتقال دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | using Microsoft.JSInterop; using Microsoft.AspNetCore.Blazor.Components; namespace BlazorApplication.Pages { public class JSDemoModel : BlazorComponent { protected static string message { get; set; } protected void CallCSMethod() { JSRuntime.Current.InvokeAsync< bool >("CSMethod"); } protected void CallJSMethod() { JSRuntime.Current.InvokeAsync< bool >("JSMethod"); } [JSInvokable] public static void CSCallBackMethod() { message = "C# function called from JavaScript "; } } } < button ></ button > |
می توان از بخش @inherits برای ارائه
فریم ورک بلیزر
به همراه یک تجربه code-behind که نشانگر منظر(view markup) را از کد منطق منظر(view logic code) تفکیک می کند، استفاده کرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @ page "/jsinterop" @ using BlazorApplication.Pages @ using Microsoft.JSInterop @ inherits JSDemoModel < h1 >JavaScript Interop Demo< / h1 > < hr /> < button class = "btn btn-primary" onclick = "@ CallJSMethod" >Call JS Method< / button > < button class = "btn btn-primary" onclick = "@ CallCSMethod" >Call C# Method< / button > < br /> < br /> < p id = "demop" >JavaScript function called from C#< / p > < br /> < p >@message< / p > < button ></ button > |
تزریق وابستگی در فریمورک Blazor
فریمورک بلیزر
از تزریق وابستگی (Dependency Injection)پشتیبانی می کند، و DI یکی از روش های تفکیک منطق است که مستقل از منظر می باشد و از جمله آنها می توان به core business logic و data access logic اشاره کرد.
کلاس های جزئی در فریم ورک Blazor
در حال حاظر،
فریمورک بلیزر
از کلاس های جزئی (Partial Classes) برای مولفه های خود پشتیبانی نمی کند. بنابراین، نمی توانید یک فایل مجزا بسازید و همان نام کلاس را به عنوان مولفه استفاده کنید.