یادگیری سی شارپ از مفاهیم پایه تا پروژه محور: شی‌گرایی، کار با SQL و LINQ، ORMها (Entity Framework)، ساخت پروژه مدیریت رستوران با گزارشات حرفه‌ای و امکانات کامل!
مشاهده بیشتر
یادگیری MVC Core از مبانی تا پیشرفته: شی‌گرایی، Routing، Entity Framework، امنیت، تست یونیت، Razor، Ajax، و پروژه‌های کاربردی! یک دوره کامل برای تسلط بر توسعه وب با ASP.NET Core. به صورت حضوری و آنلاین!
مشاهده بیشترمشخصات مقاله
-
378
-
0.0
-
2072
-
0
-
0
|آموزش جامع Microsoft Blazor|فراخوانی توابع جاوا اسکریپت در فریمورک Blazor|
فراخوانی توابع جاوا اسکریپت در فریمورک Blazor
فریمورک بلیزر
یک فریمورک سمت کاربر (frontend) است، اما هیچ دسترسی مستقیمی به DOM API مرورگر ندارد.
-
به عنوان توسعه دهندگان وب، می خواهیم به API های مرورگر و توابع جاوا اسکریپت موجود دسترسی داشته باشیم.
-
زمان هایی وجود دارد که کد .NET
در فریم ورک بلیزر
نیازمند فراخوانی یک تابع جاوا اسکریپت باشد.
-
برای مثال، یک فراخوانی جاوا اسکریپت می تواند قابلیت ها یا عملکرد مرورگر را از یک کتابخانه جاوا اسکریپت، برای یک
فریمورک بلیزر
، در معرض نمایش قرار دهد.
جاوا اسکریپت Interop
برنامه کاربردی فریمورک blazor
می تواند توابع جاوا اسکریپت را از .NET و متدهای .NET را از کد جاوا اسکریپت فراخوانی کند. این خصیصه فراخوانی یک متد JS از کد C# و بالعکس، به عنوان interop جاوا اسکریپت شناخته می شود.
-
فریم ورک بلیزر
برای اداره کردن اعمال نفوذ DOM و فراخوانی های API مرورگر، از interop جاوا اسکریپت استفاده می کند.
-
برای فراخوانی یک جاوا اسکریپت از .NET ، از IJSRuntime استفاده کنید که از طریق JSRuntime.Current در دسترس است.
حال بیاید دو تابع جاوا اسکریپت را به فایل index.html اضافه کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < app>Loading...< /app>< script src="_framework/blazor.webassembly.js"> < /script>< script type="blazor-boot"> < /script> < script> function JSMethod() { $ ("#demop").text("JavaScript function called from C#"); } < /script> < script> function CSMethod() { DotNet.invokeMethodAsync('BlazorApplication', 'CSCallBackMethod'); } < /script> <button></button> |
-
تابع JSMethod، متن تگ p که شامل شناسه demop است را به تابع جاوا اسکریپت فراخوانی شده از C# ، تنظیم خواهد کرد.
-
تابع CSMethod یک باز فراخوانی(call back) به متد CSCallBackMethod از C# که بعدا تعریف می شود، خواهد داشت.
حال یک مولفه جدید بلیزر با نام JSInterop.cshtml را بسازید و توابع زیر را اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @ functions { protected static string message { get; set; } protected void CallJSMethod() { JSRuntime.Current.InvokeAsync< bool>("JSMethod"); } protected void CallCSMethod() { JSRuntime.Current.InvokeAsync< bool>("CSMethod"); } [JSInvokable] public static void CSCallBackMethod() { message = "C# function called from JavaScript"; }}<button></button> |
-
CallJSMethod و CallCSMethod با استفاده از متد JSRuntime.Current.InvokeAsync ، توابع JS ، JSMethod و CSMethod را فراخوانی می کنند.
-
متد JSRuntime.Current.InvokeAsync ، می تواند دو پارامتر داشته باشد : نام تابع JS و هر پارامتر دیگری که باید برای تابع JS فراهم شود. اما ما هیچ پارامتری را به تابع JS پاس نمی دهیم.
-
CSCallBackMethod یک متد ایستا است، و از تابع جاوا اسکریپت CSMethod فراخوانی خواهد شد.
-
دارای ویژگی [JSInvokable] است.
-
این متد، مقدار یک پیام متغیر رشته ای که رو UI نمایش داده خواهد شد را تعیین می کند.
اضافه کردن دو دکمه به فایل JSInterop.cshtml ، متدهای CallJSMethod و CallCSMethod را در رویداد onclick ، فراخوانی می کند.
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 37 38 39 | @ 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 />< p id="demop">< /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# ، بر روی دکمه ها کلیک کنید.
