export function error(){
alert('oops, an error');
} var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Panel.razor.js");
await module.InvokeVoidAsync("error"); Pages/Panel.razor Pages/Panel.razor.js Pages/Panel.razor.css
_module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/RazorClassLibrary/componentName.razor.js"); export function showPrompt(message) {
return prompt(message, 'Type anything here');
} @page "/call-js-example-6"
@implements IAsyncDisposable
@inject IJSRuntime JS
<h1>Call JS Example 6</h1>
<p>
<button @onclick="TriggerPrompt">Trigger browser window prompt</button>
</p>
<p>
@result
</p>
@code {
private IJSObjectReference? module;
private string? result;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await JS.InvokeAsync<IJSObjectReference>("import",
"./scripts.js");
}
}
private async Task TriggerPrompt()
{
result = await Prompt("Provide some text");
}
public async ValueTask<string?> Prompt(string message) =>
module is not null ?
await module.InvokeAsync<string>("showPrompt", message) : null;
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}
} @page "/js-sample"
<button class="btn btn-primary" onclick="JsFunctionHelper.invokeDotnetStaticFunction()">Invoke Static Method</button>
@code
{
[JSInvokable]
public static Task<string> HelpMessage()
{
return Task.FromResult("Help text from C# static function");
}
} window.JsFunctionHelper = {
invokeDotnetStaticFunction: function () {
DotNet.invokeMethodAsync("BlazorRazorSample.Client", "HelpMessage").then(
(data) => {
console.log(data);
}
);
}
}; @page "/js-sample"
@implements IDisposable
@inject IJSRuntime jSRuntime
<button class="btn btn-primary" @onclick="CallInstanceMethod">Invoke Instance Method</button>
@code
{
private DotNetObjectReference<JsSample> objectReference;
[JSInvokable]
public string GetAddress()
{
return "123 Main Street";
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
objectReference = DotNetObjectReference.Create(this);
}
}
private async Task CallInstanceMethod()
{
await jSRuntime.InvokeVoidAsync("JsFunctionHelper.invokeDotnetInstanceFunction", objectReference);
}
public void Dispose()
{
objectReference?.Dispose();
}
} window.JsFunctionHelper = {
invokeDotnetInstanceFunction: function (addressProvider) {
addressProvider.invokeMethodAsync("GetAddress").then((data) => {
console.log(data);
});
}
}; • All .NET application (Console, ASP.NET 4, WinForms, WPF) • Mac and Linux applications (Mono) • UWP (Universal Windows Platform) • ASP.NET Core applications • Can use EF Core in Windows phone and Windows store app
PM> Install-Package Microsoft.EntityFrameworkCore.SqlServer PM> Install-Package Microsoft.EntityFrameworkCore.Tools -Pre PM> Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design
{
"dependencies": {
// same as before
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.0",
"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final",
"Microsoft.EntityFrameworkCore.SqlServer.Design": "1.0.0"
}
} {
"dependencies": {
// same as before
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.0",
"Microsoft.EntityFrameworkCore.Tools": {
"version": "1.0.0-preview2-final",
"type": "build"
},
"Microsoft.EntityFrameworkCore.SqlServer.Design": {
"version": "1.0.0",
"type": "build"
}
},
"tools": {
// same as before
"Microsoft.EntityFrameworkCore.Tools": {
"version": "1.0.0-preview2-final",
"imports": [
"portable-net45+win8"
]
}
}
} {
"dependencies": {
// same as before
"Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore": "1.0.0"
}
} public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDatabaseErrorPage();
} 
namespace Core1RtmEmptyTest.Entities
{
public class Person
{
public int PersonId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
} using Microsoft.EntityFrameworkCore;
namespace Core1RtmEmptyTest.Entities
{
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
{
}
public DbSet<Person> Persons { get; set; }
}
} protected DbContext()
: this((DbContextOptions) new DbContextOptions<DbContext>())
{
}
public DbContext([NotNull] DbContextOptions options)
{
// …
} using Microsoft.EntityFrameworkCore;
namespace Core1RtmEmptyTest.Entities
{
public class ApplicationDbContext : DbContext
{
public DbSet<Person> Persons { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlServer(@"... connection string ...");
}
}
} {
"ConnectionStrings": {
"ApplicationDbContextConnection": "Data Source=(local);Initial Catalog=TestDbCore2016;Integrated Security = true"
}
} public class Startup
{
public IConfigurationRoot Configuration { set; get; }
public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("appsettings.json", reloadOnChange: true, optional: false)
.AddJsonFile($"appsettings.{env}.json", optional: true);
Configuration = builder.Build();
}
public void ConfigureServices(IServiceCollection services)
{
services.AddSingleton<IConfigurationRoot>(provider => { return Configuration; });
services.AddDbContext<ApplicationDbContext>(options =>
{
options.UseSqlServer(Configuration["ConnectionStrings:ApplicationDbContextConnection"]);
}); using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
namespace Core1RtmEmptyTest.Entities
{
public class ApplicationDbContext : DbContext
{
private readonly IConfigurationRoot _configuration;
public ApplicationDbContext(IConfigurationRoot configuration)
{
_configuration = configuration;
}
//public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
//{
//}
public DbSet<Person> Persons { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlServer(_configuration["ConnectionStrings:ApplicationDbContextConnection"]);
}
}
} public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ApplicationDbContext>(); using System.Linq;
using Core1RtmEmptyTest.Entities;
using Microsoft.AspNetCore.Mvc;
namespace Core1RtmEmptyTest.Controllers
{
public class TestDBController : Controller
{
private readonly ApplicationDbContext _ctx;
public TestDBController(ApplicationDbContext ctx)
{
_ctx = ctx;
}
public IActionResult Index()
{
var name = _ctx.Persons.First().FirstName;
return Json(new { firstName = name });
}
}
} 
| | Xamarin.Forms | MAUI |
|---|---|---|
| Platforms | | |
| Android | API 19+ | API 21+ |
| iOS | 9-14 | 10+ |
| Linux | Community | Community |
| macOS | Community | Microsoft |
| Tizen | Samsung | Samsung |
| Windows | UWP Microsoft WPF Community | Microsoft |
| Features | | |
| Renderers | Tightly coupled to BindableObject | Loosely coupled, no Core dependencies |
| App Models | MVVM, RxUI | MVVM, RxUI, MVU, Blazor |
| Single Project | No | Yes |
| Multi-targeting | No | Yes |
| Multi-window | No | Yes |
| Misc | | |
| .NET | Xamarin.iOS, Xamarin.Android, Mono, .NET Framework, ... | .NET 6+ |
| Acquisition | NuGet & Visual Studio Installer | dotnet |
| Project System | Franken-proj | SDK Style |
| dotnet CLI | No | Yes |
| Tools | | |
| Visual Studio 2019 | Yes | Yes |
| Visual Studio 2019 for Mac | Yes | Yes |
| Visual Studio Code | No | Yes |
window.setFocus = function (element) {
element.focus();
}; <input @ref="@ReferenceToInputControl" />
<input _bl_bc0f34fa-16bd-4687-a8eb-9e3838b5170d="">
private ElementReference ReferenceToInputControl;
await JSRuntime.InvokeVoidAsync("setFocus", ReferenceToInputControl); عموما برای درج فایل‌های ثابت اسکریپت‌ها و شیوه‌نامه‌های سایت، از روش متداول زیر استفاده می‌شود:
<link rel="stylesheet" href="/css/site.css" /> <script src="/js/site.js"></script>
مشکلی که به همراه این روش وجود دارد، مطلع سازی کاربران و مرورگر، از تغییرات آن‌هاست؛ چون این فایل‌های ثابت، توسط مرورگرها کش شده و با فشردن دکمه‌هایی مانند Ctrl+F5 و به‌روز شدن کش مرورگر، به نگارش جدید، ارتقاء پیدا می‌کنند. برای رفع این مشکل حداقل دو روش وجود دارد:
الف) هربار نام این فایل‌ها را تغییر دهیم. برای مثال بجای نام قدیمی site.css، از نام جدید site.v.1.1.css استفاده کنیم.
ب) یک کوئری استرینگ متغیر را به نام ثابت این فایل‌ها، اضافه کنیم.
که در این بین، روش دوم متداول‌تر و معقول‌تر است. برای این منظور، ASP.NET Core به همراه ویژگی توکاری است به نام asp-append-version که اگر آنرا به تگ‌های اسکریپت و link اضافه کنیم:
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <script src="~/js/site.js" asp-append-version="true"></script>
این کوئری استرینگ را به صورت خودکار محاسبه کرده و به آدرس فایل درج شده اضافه می‌کند؛ با خروجی‌هایی شبیه به مثال زیر:
<link rel="stylesheet" href="/css/site.css?v=AAs5qCYR2ja7e8QIduN1jQ8eMcls-cPxNYUozN3TJE0" /> <script src="/js/site.js?v=NO2z9yI9csNxHrDHIeTBBfyARw3PX_xnFa0bz3RgnE4"></script>
ASP.NET Core در اینجا هش فایل‌های یافت شده را با استفاده از الگوریتم SHA256 محاسبه و url encode کرده و به صورت یک کوئری استرینگ، به انتهای آدرس فایل‌ها اضافه می‌کند. به این ترتیب با تغییر محتوای این فایل‌ها، این هش نیز تغییر می‌کند و مرورگر بر این اساس، همواره آخرین نگارش ارائه شده را از سرور دریافت خواهد کرد. نتیجه‌ی این محاسبات نیز به صورت خودکار کش می‌شود و همچنین با استفاده از یک File Watcher در پشت صحنه، تغییرات این فایل‌ها هم بررسی می‌شوند. یعنی اگر فایلی تغییر کرد، نیازی به ری‌استارت برنامه نیست و محاسبات جدید و کش شدن مجدد آن‌ها، به صورت خودکار انجام می‌شود.
البته این ویژگی هنوز به Blazor اضافه نشده‌است؛ اما امکان استفاده‌ی از زیر ساخت ویژگی asp-append-version با کدنویسی مهیا است که در ادامه با استفاده از آن، کامپوننتی را مخصوص Blazor SSR، تهیه می‌کنیم.
دسترسی به زیر ساخت محاسباتی ویژگی asp-append-version با کدنویسی
زیرساخت محاسباتی ویژگی asp-append-version، با استفاده از سرویس توکار IFileVersionProvider به صورت زیر قابل دسترسی است:
public static class FileVersionHashProvider
{
private static readonly string ProcessExecutableModuleVersionId =
Assembly.GetEntryAssembly()!.ManifestModule.ModuleVersionId.ToString("N");
public static string GetFileVersionedPath(this HttpContext httpContext, string filePath, string? defaultHash = null)
{
ArgumentNullException.ThrowIfNull(httpContext);
var fileVersionedPath = httpContext.RequestServices.GetRequiredService<IFileVersionProvider>()
.AddFileVersionToPath(httpContext.Request.PathBase, filePath);
return IsEmbeddedOrNotFound(fileVersionedPath, filePath)
? QueryHelpers.AddQueryString(filePath, new Dictionary<string, string?>(StringComparer.Ordinal)
{
{
"v", defaultHash ?? ProcessExecutableModuleVersionId
}
})
: fileVersionedPath;
}
private static bool IsEmbeddedOrNotFound(string fileVersionedPath, string filePath)
=> string.Equals(fileVersionedPath, filePath, StringComparison.Ordinal);
}
در برنامه‌های Blazor SSR، دسترسی کاملی به HttpContext وجود دارد و همانطور که مشاهده می‌کنید، این سرویس نیز به اطلاعات آن جهت محاسبه‌ی هش فایل معرفی شده‌ی به آن، نیاز دارد. در اینجا اگر هش قابل محاسبه نبود، از هش فایل اسمبلی جاری استفاده خواهد شد.
ساخت کامپوننت‌هایی برای درج خودکار هش فایل‌های اسکریپت‌ها
یک نمونه روش استفاده‌ی از متد الحاقی GetFileVersionedPath فوق را در کامپوننت DntFileVersionedJavaScriptSource.razor زیر می‌توانید مشاهده کنید:
@if (!string.IsNullOrWhiteSpace(JsFilePath))
{
<script src="@HttpContext.GetFileVersionedPath(JsFilePath)" type="text/javascript"></script>
}
@code{
[CascadingParameter] public HttpContext HttpContext { set; get; } = null!;
[Parameter]
[EditorRequired]
public required string JsFilePath { set; get; }
}
با استفاده از HttpContext مهیای در برنامه‌های Blazor SSR، متد الحاقی GetFileVersionedPath به همراه مسیر فایل js. مدنظر، در صفحه درج می‌شود.
برای مثال یک نمونه از استفاده‌ی آن، به صورت زیر است:
<DntFileVersionedJavaScriptSource JsFilePath="/lib/quill/dist/quill.js"/>
در نهایت با اینکار، یک چنین خروجی در صفحه درج خواهد شد که با تغییر محتوای فایل quill.js، هش متناظر با آن به صورت خودکار به‌روز خواهد شد:
<scriptsrc="/lib/quill/dist/quill.js?v=5q7uUOOlr88Io5YhQk3lgYcoB_P3-5Awq1lf0rRa7-Y" type="text/javascript"></script>
شبیه به همین کار را برای شیوه‌نامه‌ها هم می‌توان تکرار کرد و کدهای آن، تفاوت آنچنانی با کامپوننت فوق ندارند.
When a developer switches context, they must first disengage from the task at hand and then shift their focus to the new task. This whole process takes time and can drain devs mentally. It takes a developer 25 minutes to refocus after a context switch.
With the recent release1.3.14 instantaneous-browserification, Angular introduced better support for those using Browserify. Thank you to everyone who worked onthat issue, and especially toBen Clinkinbeardfor his unflagging dedication in getting it in.
