You’ve built a React web app and would love to bring it to iOS and Android. That means you have to learn React Native first, right? As it turns out, there’s an easier way to deploy to mobile. With Capacitor, a new native runtime for web apps, you can deploy any React-based web app as a PWA, iOS, or Android app - all from the same codebase.
Blazor Highlights from the Early .NET 8 Preview Releases
Introducing Microsoft Edge Beta: Be one of the first to try it now
{
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "tsc",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// args is the HelloWorld program to compile.
"args": ["HelloWorld.ts"],
// use the standard tsc problem matcher to find compile problems
// in the output.
"problemMatcher": "$tsc"
} "args": [
"--target", "ES5",
"--outdir", "js",
"--sourceMap",
"--watch",
"test.ts"
], 
error TS5023: Unknown option 'watch' Use the '--help' flag to see options.
15:33:52 - Compilation complete. Watching for file changes.
Install Apps from the Microsoft Store using WinGet
using Microsoft.AspNetCore.Mvc;
namespace BlazorWasmShowBinaryFiles.Server.Controllers
{
[ApiController]
[Route("api/[controller]")]
public class ReportsController : ControllerBase
{
[HttpGet("[action]")]
public IActionResult GetPdfReport()
{
//TODO: create the `sample.pdf` report file on the server
return File(virtualPath: "~/app_data/sample.pdf",
contentType: "application/pdf",
fileDownloadName: "sample.pdf");
}
}
} window.JsBinaryFilesUtils = {
createBlobUrl: function (byteArray, contentType) {
// The byte array in .NET is encoded to base64 string when it passes to JavaScript.
const numArray = atob(byteArray)
.split("")
.map((c) => c.charCodeAt(0));
const uint8Array = new Uint8Array(numArray);
const blob = new Blob([uint8Array], { type: contentType });
return URL.createObjectURL(blob);
},
downloadFromUrl: function (fileName, url) {
const anchor = document.createElement("a");
anchor.style.display = "none";
anchor.href = url;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
},
downloadBlazorByteArray: function (fileName, byteArray, contentType) {
const blobUrl = this.createBlobUrl(byteArray, contentType);
this.downloadFromUrl(fileName, blobUrl);
URL.revokeObjectURL(blobUrl);
},
printFromUrl: function (url) {
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
document.body.appendChild(iframe);
if (iframe.contentWindow) {
iframe.contentWindow.print();
}
},
printBlazorByteArray: function (byteArray, contentType) {
const blobUrl = this.createBlobUrl(byteArray, contentType);
this.printFromUrl(blobUrl);
URL.revokeObjectURL(blobUrl);
},
showUrlInNewTab: function (url) {
window.open(url);
},
showBlazorByteArrayInNewTab: function (byteArray, contentType) {
const blobUrl = this.createBlobUrl(byteArray, contentType);
this.showUrlInNewTab(blobUrl);
URL.revokeObjectURL(blobUrl);
},
}; using System.Threading.Tasks;
using Microsoft.JSInterop;
namespace BlazorWasmShowBinaryFiles.Client.Utils
{
public static class JsBinaryFilesUtils
{
public static ValueTask<string> CreateBlobUrlAsync(
this IJSRuntime JSRuntime,
byte[] byteArray, string contentType)
{
return JSRuntime.InvokeAsync<string>("JsBinaryFilesUtils.createBlobUrl", byteArray, contentType);
}
public static ValueTask DownloadFromUrlAsync(this IJSRuntime JSRuntime, string fileName, string url)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.downloadFromUrl", fileName, url);
}
public static ValueTask DownloadBlazorByteArrayAsync(
this IJSRuntime JSRuntime,
string fileName, byte[] byteArray, string contentType)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.downloadBlazorByteArray",
fileName, byteArray, contentType);
}
public static ValueTask PrintFromUrlAsync(this IJSRuntime JSRuntime, string url)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.printFromUrl", url);
}
public static ValueTask PrintBlazorByteArrayAsync(
this IJSRuntime JSRuntime,
byte[] byteArray, string contentType)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.printBlazorByteArray", byteArray, contentType);
}
public static ValueTask ShowUrlInNewTabAsync(this IJSRuntime JSRuntime, string url)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.showUrlInNewTab", url);
}
public static ValueTask ShowBlazorByteArrayInNewTabAsync(
this IJSRuntime JSRuntime,
byte[] byteArray, string contentType)
{
return JSRuntime.InvokeVoidAsync("JsBinaryFilesUtils.showBlazorByteArrayInNewTab", byteArray, contentType);
}
}
} img-src 'self' data: blob: default-src 'self' blob: object-src 'self' blob:
@page "/"
@using BlazorWasmShowBinaryFiles.Client.Utils
@inject IJSRuntime JSRuntime
@inject HttpClient HttpClient
<h1>Display PDF Files</h1>
<button class="btn btn-info" @onclick="handlePrintPdf">Print PDF</button>
<button class="btn btn-primary ml-2" @onclick="handleShowPdf">Show PDF</button>
<button class="btn btn-success ml-2" @onclick="handleDownloadPdf">Download PDF</button>
@if(!string.IsNullOrWhiteSpace(PdfBlobUrl))
{
<section class="card mb-5 mt-3">
<div class="card-header">
<h4>using iframe</h4>
</div>
<div class="card-body">
<iframe title="PDF Report" width="100%" height="600" src="@PdfBlobUrl" type="@PdfContentType"></iframe>
</div>
</section>
<section class="card mb-5">
<div class="card-header">
<h4>using object</h4>
</div>
<div class="card-body">
<object data="@PdfBlobUrl" aria-label="PDF Report" type="@PdfContentType" width="100%" height="100%"></object>
</div>
</section>
<section class="card mb-5">
<div class="card-header">
<h4>using embed</h4>
</div>
<div class="card-body">
<embed aria-label="PDF Report" src="@PdfBlobUrl" type="@PdfContentType" width="100%" height="100%">
</div>
</section>
}
@code
{
private const string ReportUrl = "/api/Reports/GetPdfReport";
private const string PdfContentType = "application/pdf";
private string PdfBlobUrl;
private async Task handlePrintPdf()
{
// Note: Using the `HttpClient` is useful for accessing the protected API's by JWT's (non cookie-based authorization).
// Otherwise just use the `PrintFromUrlAsync` method.
var byteArray = await HttpClient.GetByteArrayAsync(ReportUrl);
await JSRuntime.PrintBlazorByteArrayAsync(byteArray, PdfContentType);
}
private async Task handleDownloadPdf()
{
// Note: Using the `HttpClient` is useful for accessing the protected API's by JWT's (non cookie-based authorization).
// Otherwise just use the `DownloadFromUrlAsync` method.
var byteArray = await HttpClient.GetByteArrayAsync(ReportUrl);
await JSRuntime.DownloadBlazorByteArrayAsync("report.pdf", byteArray, PdfContentType);
}
private async Task handleShowPdf()
{
// Note: Using the `HttpClient` is useful for accessing the protected API's by JWT's (non cookie-based authorization).
// Otherwise just use the `ReportUrl` as the `src` of the `iframe` directly.
var byteArray = await HttpClient.GetByteArrayAsync(ReportUrl);
PdfBlobUrl = await JSRuntime.CreateBlobUrlAsync(byteArray, PdfContentType);
}
// Tips:
// 1- How do I enable/disable the built-in pdf viewer of FireFox
// https://support.mozilla.org/en-US/kb/disable-built-pdf-viewer-and-use-another-viewer
// 2- How to configure browsers to use the Adobe PDF plug-in to open PDF files
// https://helpx.adobe.com/acrobat/kb/pdf-browser-plugin-configuration.html
// https://helpx.adobe.com/acrobat/using/display-pdf-in-browser.html
// 3- Microsoft Edge is gaining new PDF reader features within the Windows 10 Fall Creator’s Update (version 1709).
} سیستم ASP.NET Membership بهمراه ASP.NET 2.0 در سال 2005 معرفی شد، و از آن زمان تا بحال تغییرات زیادی در چگونگی مدیریت احزار هویت و اختیارات کاربران توسط اپلیکیشن‌های وب بوجود آمده است. ASP.NET Identity نگاهی تازه است به آنچه که سیستم Membership هنگام تولید اپلیکیشن‌های مدرن برای وب، موبایل و تبلت باید باشد.
پروژه ایجاد شده شامل سه بسته می‌شود که مربوط به ASP.NET Identity هستند:
هنگامیکه بر روی دکمه‌ی Register کلیک شود، کنترلر Account، اکشن متد Register را فراخوانی می‌کند تا حساب کاربری جدیدی با استفاده از ASP.NET Identity API ساخته شود.
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)
{
if (ModelState.IsValid)
{
var user = new ApplicationUser() { UserName = model.UserName };
var result = await UserManager.CreateAsync(user, model.Password);
if (result.Succeeded)
{
await SignInAsync(user, isPersistent: false);
return RedirectToAction("Index", "Home");
}
else
{
AddErrors(result);
}
}
// If we got this far, something failed, redisplay form
return View(model);
} اگر حساب کاربری با موفقیت ایجاد شود، کاربر توسط فراخوانی متد SignInAsync به سایت وارد می‌شود.
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)
{
if (ModelState.IsValid)
{
var user = new ApplicationUser() { UserName = model.UserName };
var result = await UserManager.CreateAsync(user, model.Password);
if (result.Succeeded)
{
await SignInAsync(user, isPersistent: false);
return RedirectToAction("Index", "Home");
}
else
{
AddErrors(result);
}
}
// If we got this far, something failed, redisplay form
return View(model);
} private async Task SignInAsync(ApplicationUser user, bool isPersistent)
{
AuthenticationManager.SignOut(DefaultAuthenticationTypes.ExternalCookie);
var identity = await UserManager.CreateIdentityAsync(
user, DefaultAuthenticationTypes.ApplicationCookie);
AuthenticationManager.SignIn(
new AuthenticationProperties() {
IsPersistent = isPersistent
}, identity);
} از آنجا که ASP.NET Identity و OWIN Cookie Authentication هر دو Claims-based هستند، فریم ورک، انتظار آبجکتی از نوع ClaimsIdentity را خواهد داشت. این آبجکت تمامی اطلاعات لازم برای تشخیص هویت کاربر را در بر دارد. مثلا اینکه کاربر مورد نظر به چه نقش هایی تعلق دارد؟ و اطلاعاتی از این قبیل. در این مرحله می‌توانید Claimهای بیشتری را به کاربر بیافزایید.
کلیک کردن روی لینک Log off در سایت، اکشن متد LogOff در کنترلر Account را اجرا می‌کند.
// POST: /Account/LogOff
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
AuthenticationManager.SignOut();
return RedirectToAction("Index", "Home");
} همانطور که مشاهده می‌کنید برای ورود/خروج کاربران از AuthenticationManager استفاده می‌شود که متعلق به OWIN است. متد SignOut همتای متد FormsAuthentication.SignOut است.
تصویر زیر اجزای تشکیل دهنده ASP.NET Identity را نمایش می‌دهد. بسته هایی که با رنگ سبز نشان داده شده اند سیستم کلی ASP.NET Identity را می‌سازند. مابقی بسته‌ها وابستگی هایی هستند که برای استفاده از ASP.NET Identity در اپلیکیشن‌های ASP.NET لازم اند.
دو پکیج دیگر نیز وجود دارند که به آنها اشاره نشد:
Welcome to the emerging new world of Microsoft-centric software development. Want to code a desktop app? Take your tooling pick from WPF, WinForms, UWP, .NET MAUI, Win UI, Blazor, Project Reunion ... and who knows what's next.
“My browser lost its cookies” has long been one of the most longstanding Support complaints in the history of browsers. Unfortunately, the reason that it has been such a longstanding issue is that it’s not the result of a single problem, and if the problem is intermittent (as it often is), troubleshooting the root cause may be non-trivial.
