this.categoryBindingSource.DataSource = _context.Categories.Local.ToBindingList();
Do you want to update existing WPF and WinForms apps to take advantage of all the features of .NET Core 3.0? Learn how to prepare your app today with Telerik UI for WPF and WinForms.
// ...
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
// ...
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly); @rendermode InteractiveAuto
<Banner @rendermode="@InteractiveAuto" Text="Hello"/>
@using static Microsoft.AspNetCore.Components.Web.RenderMode
dotnet new blazor --interactivity None
@page "/ssr-page/{Data:int}"
<PageTitle>An SSR component</PageTitle>
<h1>An SSR component rendered by a Minimal-API!</h1>
<div>
Data: @Data
</div>
@code {
[Parameter]
public int Data { get; set; }
} 
var builder = WebApplication.CreateBuilder(args);
// ...
builder.Services.AddRazorComponents();
// ...
// http://localhost:5227/ssr-component?data=2
// or it can be called directly http://localhost:5227/ssr-page/2
app.MapGet("/ssr-component",
(int data = 1) =>
{
var parameters = new Dictionary<string, object?>
{
{ nameof(SsrTest.Data), data },
};
return new RazorComponentResult<SsrTest>(parameters);
});
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>();
app.Run();
// ... <LayoutView Layout="@typeof(MainLayout)">
<PageTitle>Home</PageTitle>
<h2>Welcome to your new app.</h2>
</LayoutView> // ...
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
// ...
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
// ... <script src="_framework/blazor.web.js"></script>
@rendermode InteractiveServer
<h1>Counter</h1>
<p role="status">Current count: @_currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int _currentCount;
private void IncrementCount()
{
_currentCount++;
}
} // http://localhost:5227/server-interactive-component
app.MapGet("/server-interactive-component", () => new RazorComponentResult<Counter>()); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive server component</title>
<base href="/"/>
</head>
<body>
<h1>Interactive server component</h1>
<Counter/>
<script src="_framework/blazor.web.js"></script>
</body>
</html> // http://localhost:5227/server-interactive-component
app.MapGet("/server-interactive-component", () => new RazorComponentResult<CounterInteractive>()); using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace WebApi8x.Services;
public class BlazorStaticRendererService
{
private readonly HtmlRenderer _htmlRenderer;
public BlazorStaticRendererService(HtmlRenderer htmlRenderer) => _htmlRenderer = htmlRenderer;
public Task<string> StaticRenderComponentAsync<T>() where T : IComponent
=> RenderComponentAsync<T>(ParameterView.Empty);
public Task<string> StaticRenderComponentAsync<T>(Dictionary<string, object?> dictionary) where T : IComponent
=> RenderComponentAsync<T>(ParameterView.FromDictionary(dictionary));
private Task<string> RenderComponentAsync<T>(ParameterView parameters) where T : IComponent =>
_htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
var output = await _htmlRenderer.RenderComponentAsync<T>(parameters);
return output.ToHtmlString();
});
} builder.Services.AddScoped<HtmlRenderer>(); builder.Services.AddScoped<BlazorStaticRendererService>();
app.MapGet("/static-renderer-service-test",
async (BlazorStaticRendererService renderer, int data = 1) =>
{
var parameters = new Dictionary<string, object?>
{
{ nameof(SsrTest.Data), data },
};
var html = await renderer.StaticRenderComponentAsync<SsrTest>(parameters);
return Results.Content(html, "text/html");
}); در Blazor می‌توان مسیریابی‌های پارامتری را به صورت زیر نیز تعریف کرد:
@page "/post/edit/{EditId:int}"
که در اینجا EditId، یک پارامتر مسیریابی از نوع int تعریف شده و به صورت زیر در کدهای صفحه‌ی مرتبط، قابل دسترسی است:
[Parameter] public int? EditId { set; get; }
int تعریف شده‌ی در این مسیریابی، یک routing constraint و یا یک قید مسیریابی محسوب می‌شود و استفاده‌ی از آن، چنین مزایایی را به همراه دارد:
- در این حالت فقط EditId های عددی پردازش می‌شوند و اگر رشته‌ای دریافت شود، کاربر با خروجی از نوع 404 و یا «یافت نشد»، مواجه خواهد شد.
- امکان اعتبارسنجی مقادیر دریافتی، پیش از ارسال آن‌ها به صفحه و پردازش صفحه.
قیود پیش‌فرض تعریف شده‌ی در Blazor
اگر به مستندات مسیریابی Blazor مراجعه کنیم، به‌نظر فقط این موارد را می‌توان به‌عنوان قیود پارامترهای مسیریابی تعریف کرد:
bool, datetime, decimal, double, float, guid, int, long, nonfile
و ... توضیحاتی در مورد اینکه آیا امکان بسط آن‌ها وجود دارند یا خیر، فعلا در مستندات رسمی آن، ذکر نشده‌اند.
در Blazor 8x می‌توان از قیود مسیریابی سفارشی ASP.NET Core نیز استفاده کرد!
ASP.NET Core سمت سرور، به همراه امکان سفارشی سازی قیودمسیریابی خود نیز هست که آن‌را می‌توان به کمک اینترفیسIRouteConstraint پیاده سازی کرد:
namespace Microsoft.AspNetCore.Routing
{
public interface IRouteConstraint
{
bool Match(
HttpContext httpContext,
IRouter route,
string routeKey,
RouteValueDictionary values,
RouteDirection routeDirection);
}
}
جالب اینجا است که می‌توان این نمونه‌های سفارشی را حداقل در نگارش جدید Blazor 8x SSR نیز استفاده کرد؛ هرچند در مستندات رسمی Blazor هنوز به آن اشاره‌ای نشده‌است.
در امضای متد Match فوق، دو پارامتر routeKey و values آن بیش از مابقی مهم هستند:
- routeKey مشخص می‌کند که الان کدام پارامتر مسیریابی (مانند EditId در این مطلب) در حال پردازش است.
- values، یک دیکشنری است که کلید هر عضو آن، پارامتر مسیریابی و مقدار آن، مقدار دریافتی از URL جاری است.
- اگر این متد مقدار true را برگرداند، یعنی مسیریابی وارد شده‌ی به آن، با موفقیت پردازش و اعتبارسنجی شده و می‌توان صفحه‌ی مرتبط را نمایش داد؛ در غیراینصورت، کاربر پیام یافت نشدن آن صفحه و مسیر درخواستی را مشاهده می‌کند.
پیاده سازی یک قید سفارشی رمزگشایی پارامترهای مسیریابی
فرض کنید قصد ندارید که پارامترهای مسیریابی ویرایش رکوردهای خاصی را دقیقا بر اساس Id متناظر عددی آن‌ها در بانک اطلاعاتی، نمایش دهید؛ برای مثال نمی‌خواهید دقیقا آدرس post/edit/1 را به کاربر نمایش دهید؛ چون نمایش این اعداد عموما ساده و ترتیبی، حدس زدن آن‌ها را ساده کرده و ممکن است در آینده مشکلات امنیتی را به همراه داشته باشد.
می‌خواهیم از آدرس‌های متداول و ساده‌ی عددی زیر:
@page "/post/edit/{EditId:int}"
به آدرس رمزنگاری شده‌ی زیر برسیم:
@page "/post/edit/{EditId:encrypt}"
اگر به این آدرس جدید دقت کنید، در اینجا از نام قید جدیدی به نام encrypt استفاده شده‌است که جزو قیود پیش‌فرض سیستم مسیریابی Blazor نیست. روش تعریف آن به صورت زیر است:
using System.Globalization;
using DNTCommon.Web.Core;
namespace Blazor8xSsrComponents.Utils;
public class EncryptedRouteConstraint(IProtectionProviderService protectionProvider) : IRouteConstraint
{
public const string Name = "encrypt";
public bool Match(HttpContext? httpContext,
IRouter? route,
string routeKey,
RouteValueDictionary values,
RouteDirection routeDirection)
{
ArgumentNullException.ThrowIfNull(routeKey);
ArgumentNullException.ThrowIfNull(values);
if (!values.TryGetValue(routeKey, out var routeValue))
{
return false;
}
var valueString = Convert.ToString(routeValue, CultureInfo.InvariantCulture);
values[routeKey] = string.IsNullOrEmpty(valueString) ? null : protectionProvider.Decrypt(valueString);
return true;
}
}
توضیحات:
- در قیود سفارشی می‌توان سرویس‌ها را به سازنده‌ی کلاس تزریق کرد و برای مثال از سرویس IProtectionProviderService که در کتابخانه‌ی DNTCommon.Web.Core تعریف شده، برای رمزگشایی اطلاعات رسیده، استفاده کرده‌ایم.
- یک نام را هم برای آن درنظر گرفته‌ایم که از این نام در فایل Program.cs به صورت زیر استفاده می‌شود:
builder.Services.Configure<RouteOptions>(opt =>
{
opt.ConstraintMap.Add(EncryptedRouteConstraint.Name, typeof(EncryptedRouteConstraint));
});
یعنی زمانیکه سیستم مسیریابی به قید جدیدی به نام encrypt می‌رسد:
@page "/post/edit/{EditId:encrypt}"
آن‌را در لیست ConstraintMap ای که به نحو فوق به سیستم معرفی شده، جستجو می‌کند. اگر این نام یافت شد، سپس کلاس EncryptedRouteConstraint متناظر را نمونه سازی کرده و در جهت پردازش مسیر رسیده، مورد استفاده قرار می‌دهد.
- در کلاس EncryptedRouteConstraint و متد Match آن، مقدار رشته‌ای EditId دریافت شده‌ی از طریق آدرس جاری درخواستی، رمزگشایی شده و بجای مقدار فعلی رمزنگاری شده‌ی آن درج می‌شود. همین اندازه برای مقدار دهی خودکار پارامتر EditId ذیل در صفحات مرتبط، کفایت می‌کند:
[Parameter] public string? EditId { set; get; }
یعنی دیگر نیازی نیست تا در صفحات مرتبط، کار رمزگشایی EditId، به صورت دستی انجام شود.
Wisej 3 has shipped, described as an "alternative for Blazor developers" for building enterprise-level ASP.NET web applications with specialized Visual Studio templates.
With the .NET 6 preview 4 we now have Ahead-Of-Time compilation for Blazor Wasm. This is an example of improved performance for one of my projects.
C# is usually thought of as a backend, server-side language. But with the Blazor-Web Assembly combo, developers can use it for client-side as well.
using System.Windows.Forms;
namespace WpfPdfViewer.Controls
{
public partial class AcroReader : UserControl
{
public AcroReader(string fileName)
{
InitializeComponent();
ShowPdf(fileName);
}
public void ShowPdf(string fileName)
{
if (string.IsNullOrWhiteSpace(fileName)) return;
axAcroPDF1.LoadFile(fileName);
axAcroPDF1.setShowToolbar(true);
axAcroPDF1.Show();
}
}
}
<Window x:Class="WpfPdfViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<WindowsFormsHost x:Name="WindowsFormsHost1" />
</Grid>
</Window>
using WpfPdfViewer.Controls;
namespace WpfPdfViewer
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
WindowsFormsHost1.Child = new AcroReader(@"PageSummary.pdf");
}
}
}
using System;
using System.Windows;
using System.Windows.Forms;
using System.Windows.Forms.Integration;
namespace WpfPdfViewer.Behaviors
{
public class WindowsFormsHostBehavior : DependencyObject
{
public static readonly DependencyProperty BindableChildProperty =
DependencyProperty.RegisterAttached("BindableChild",
typeof(Control),
typeof(WindowsFormsHostBehavior),
new UIPropertyMetadata(null, BindableChildPropertyChanged));
public static Control GetBindableChild(DependencyObject obj)
{
return (Control)obj.GetValue(BindableChildProperty);
}
public static void SetBindableChild(DependencyObject obj, Control value)
{
obj.SetValue(BindableChildProperty, value);
}
public static void BindableChildPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
var windowsFormsHost = o as WindowsFormsHost;
if (windowsFormsHost == null)
throw new InvalidOperationException("This behavior can only be attached to a WindowsFormsHost.");
var control = (Control)e.NewValue;
windowsFormsHost.Child = control;
}
}
}
<WindowsFormsHost
Behaviors:WindowsFormsHostBehavior.BindableChild="{Binding ...}" />
Learn how to harness the power of the Syncfusion UI components from within a Blazor server application. We’ll also integrate the Microsoft Identity technology into our Blazor application to leverage login, registration, authorization and authentication functionality. Syncfusion provides a UI component suite for building powerful web, desktop, and mobile apps.
⭐️ Course Contents ⭐️
⌨️ (0:00:13) Introduction
⌨️ (0:00:49) Course Overview
⌨️ (0:10:25) Technologies used to Develop the Sales Management Application
⌨️ (0:13:20) Getting Started - Create the Blazor Project through Visual Studio 2022
⌨️ (0:15:02) Introduction to the Syncfusion DataGrid Component
⌨️ (0:43:39) Create the Database using Ef Core Code First Migrations
⌨️ (1:22:02) Integrate the Syncfusion DataGrid Component into the Application
⌨️ (3:02:44) Integrate the Syncfusion ListView component into the Sale Management Application
⌨️ (4:25:23) Integration of the Syncfusion Charts into the Sales Management Application to Display Sales Order Analytical Data
⌨️ (5:11:04) Create Dashboards for Employees
⌨️ (6:03:51) Integrate the Syncfusion Diagram into the Sales Management Application
⌨️ (6:22:25) Integrate the Syncfusion Scheduler into the Sales Management Application
⌨️ (6:52:53) Integrate Microsoft Identity into the Sales Management Application
⌨️ (7:40:34) Wrapping up
