diff --git a/docs/DataControls/ListView.md b/docs/DataControls/ListView.md index 5c2ce79cd..51043b869 100644 --- a/docs/DataControls/ListView.md +++ b/docs/DataControls/ListView.md @@ -2,7 +2,7 @@ The ListView component is meant to emulate the asp:ListView control in markup and is defined in the [System.Web.UI.WebControls.ListView class](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.listview?view=netframework-4.8) -[Usage Notes](#usage-notes) | [Web Forms Syntax](#web-forms-declarative-syntax) | [Blazor Syntax](#blazor-syntax) +[Usage Notes](#usage-notes) | [Syntax Comparison](#syntax-comparison) | [CRUD Operations](#crud-operations) ## Features supported in Blazor - Alternating Item Templates diff --git a/docs/EditorControls/MasterPage.md b/docs/EditorControls/MasterPage.md index ad5f5af15..4b67b00d9 100644 --- a/docs/EditorControls/MasterPage.md +++ b/docs/EditorControls/MasterPage.md @@ -19,43 +19,97 @@ Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/sy - `MasterPageFile` property — nested master pages use nested layouts instead - Direct theme/skin support — use CSS styling instead -## Web Forms Declarative Syntax +## Syntax Comparison -```html - -<%@ Master Language="C#" %> - - - - My Site - - - -
-
-

My Website

-
+=== "Web Forms" + + ```html + + <%@ Master Language="C#" %> + + + + My Site + + + + +
+

My Website

+
+ + +

Default content

+ + +
+

© 2024 My Company

+
+
+ + + + + <%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.Master" %> + + +

Welcome to my page!

+ + ``` + +=== "Blazor" + + ```razor + + + + My Site + + - -

Default content

- + +
+

My Website

+
+ + +

Default content

+ + +
+

© 2024 My Company

+
+ + + + + + + My Site - Home + + -
-

© 2024 My Company

-
- - - - - -<%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.Master" %> - - -

Welcome to my page!

- -``` + +
+

My Website

+
+ + +

Default content

+ + +
+

© 2024 My Company

+
+ + + +

Welcome to my page!

+ + + ``` -## Blazor Syntax +## Blazor Usage Examples ### Basic MasterPage with Layout Template @@ -253,101 +307,101 @@ When migrating from Web Forms to Blazor: 6. **Nest Content controls** — Content controls are placed as child components of the MasterPage 7. **Set page title** — Use `PageTitle` component in the `Head` section instead of ASP.NET's dynamic title setting -### Before (Web Forms) - -```html - -<%@ Master Language="C#" %> - - - - My Site - - - -
-
-

My Website

-
- -
- -

Default content

- -
- - -
- - - - -<%@ Page Title="Home" MasterPageFile="~/Site.Master" %> +=== "Web Forms" - -

Welcome!

-

This is my page.

- -``` - -### After (Blazor) - -```razor - - - + ```html + + <%@ Master Language="C#" %> + + + My Site - - - - -
-

My Website

-
- -
- -

Default content

- -
+ + + +
+
+

My Website

+
+ +
+ +

Default content

+ +
+ +
+

© 2024

+
+
+ + + + + <%@ Page Title="Home" MasterPageFile="~/Site.Master" %> + + +

Welcome!

+

This is my page.

+ + ``` + +=== "Blazor" + + ```razor + + + + My Site + + - - - - - - - - My Site - Home - - - - -
-

My Website

-
+ +
+

My Website

+
+ +
+ +

Default content

+ +
+ + + + + + + + + My Site - Home + + -
- -

Default content

- -
+ +
+

My Website

+
+ +
+ +

Default content

+ +
+ +
+

© 2024

+
+ - - - - -

Welcome!

-

This is my page.

- - -``` + +

Welcome!

+

This is my page.

+ + + ``` ## See Also diff --git a/docs/LoginControls/ChangePassword.md b/docs/LoginControls/ChangePassword.md index 14d38b15d..3aaa1817c 100644 --- a/docs/LoginControls/ChangePassword.md +++ b/docs/LoginControls/ChangePassword.md @@ -34,42 +34,44 @@ Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/sy !!! warning "Authentication Integration" The ChangePassword component does NOT perform password changes directly. You must handle the `OnChangingPassword` event and use ASP.NET Identity's `UserManager.ChangePasswordAsync()` or your own authentication service to perform the actual password change. -## Web Forms Declarative Syntax - -```html - -``` - -## Blazor Syntax - -```razor - - -@code { - private async Task HandleChangingPassword(LoginCancelEventArgs e) - { - // Call your identity service to change the password - // var result = await UserManager.ChangePasswordAsync(user, currentPassword, newPassword); - // if (!result.Succeeded) { e.Cancel = true; } +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + + @code { + private async Task HandleChangingPassword(LoginCancelEventArgs e) + { + // Call your identity service to change the password + // var result = await UserManager.ChangePasswordAsync(user, currentPassword, newPassword); + // if (!result.Succeeded) { e.Cancel = true; } + } + + private void HandleChangedPassword(EventArgs e) + { + // Password changed successfully + } } - - private void HandleChangedPassword(EventArgs e) - { - // Password changed successfully - } -} -``` + ``` ## HTML Output diff --git a/docs/LoginControls/CreateUserWizard.md b/docs/LoginControls/CreateUserWizard.md index af5930558..dc714cd85 100644 --- a/docs/LoginControls/CreateUserWizard.md +++ b/docs/LoginControls/CreateUserWizard.md @@ -33,46 +33,48 @@ Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/sy !!! warning "Authentication Integration" The CreateUserWizard does NOT create users directly. You must handle the `OnCreatingUser` event and use ASP.NET Identity's `UserManager.CreateAsync()` or your own registration service to create the user account. -## Web Forms Declarative Syntax - -```html - -``` - -## Blazor Syntax - -```razor - - -@code { - private async Task HandleCreatingUser(LoginCancelEventArgs e) - { - // Use UserManager to create the user - // var result = await UserManager.CreateAsync(new AppUser { UserName = ... }, password); - // if (!result.Succeeded) { e.Cancel = true; } +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + + @code { + private async Task HandleCreatingUser(LoginCancelEventArgs e) + { + // Use UserManager to create the user + // var result = await UserManager.CreateAsync(new AppUser { UserName = ... }, password); + // if (!result.Succeeded) { e.Cancel = true; } + } + + private void HandleCreatedUser(EventArgs e) + { + // User created successfully — handle login, redirect, etc. + } + + private void HandleError(CreateUserErrorEventArgs e) + { + // Display error: e.ErrorMessage + } } - - private void HandleCreatedUser(EventArgs e) - { - // User created successfully — handle login, redirect, etc. - } - - private void HandleError(CreateUserErrorEventArgs e) - { - // Display error: e.ErrorMessage - } -} -``` + ``` ## HTML Output diff --git a/docs/LoginControls/Login.md b/docs/LoginControls/Login.md index 61fde4af5..a6a5c0749 100644 --- a/docs/LoginControls/Login.md +++ b/docs/LoginControls/Login.md @@ -25,72 +25,74 @@ The Login component provides a complete user interface for logging into a web ap - LayoutTemplate - RenderOuterTable property -## WebForms Syntax - -```html - -``` - -## Blazor Syntax - -```razor - - - - - -@code { - private void HandleAuthenticate(AuthenticateEventArgs args) - { - // Implement your authentication logic here - args.Authenticated = ValidateCredentials(args); +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + + + + + @code { + private void HandleAuthenticate(AuthenticateEventArgs args) + { + // Implement your authentication logic here + args.Authenticated = ValidateCredentials(args); + } + + private void HandleLoggedIn(EventArgs args) + { + // Handle successful login + } } - - private void HandleLoggedIn(EventArgs args) - { - // Handle successful login - } -} -``` + ``` ## Usage Notes diff --git a/docs/LoginControls/LoginName.md b/docs/LoginControls/LoginName.md index df6b2e5e2..1ab3209b5 100644 --- a/docs/LoginControls/LoginName.md +++ b/docs/LoginControls/LoginName.md @@ -13,44 +13,46 @@ The LoginName component displays the name of the currently logged-in user. It au - All core features are supported -## WebForms Syntax - -```html - -``` - -## Blazor Syntax - -```razor - -``` +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + ``` ## Usage Notes diff --git a/docs/LoginControls/LoginStatus.md b/docs/LoginControls/LoginStatus.md index c50fafcb4..0a1835dd1 100644 --- a/docs/LoginControls/LoginStatus.md +++ b/docs/LoginControls/LoginStatus.md @@ -17,56 +17,58 @@ The LoginStatus component displays a login or logout link depending on the user' - LogoutAction.RedirectToLoginPage - use Redirect with LogoutPageUrl instead -## WebForms Syntax - -```html - -``` - -## Blazor Syntax - -```razor - -``` +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + ``` ## Usage Notes diff --git a/docs/LoginControls/LoginView.md b/docs/LoginControls/LoginView.md index 0e784070d..4416b498c 100644 --- a/docs/LoginControls/LoginView.md +++ b/docs/LoginControls/LoginView.md @@ -13,54 +13,56 @@ The LoginView component displays different content based on the user's authentic - All core features are supported -## WebForms Syntax - -```html - - - - - - - - - - - - - - - -``` - -## Blazor Syntax - -```razor - - -

Please sign in to continue.

- - -

Welcome! You are logged in.

- - - -

You have administrator access.

- - -

You have manager access.

- - - -``` +## Syntax Comparison + +=== "Web Forms" + + ```html + + + + + + + + + + + + + + + + ``` + +=== "Blazor" + + ```razor + + +

Please sign in to continue.

+ + +

Welcome! You are logged in.

+ + + +

You have administrator access.

+ + +

You have manager access.

+ + + + ``` ## Usage Notes diff --git a/docs/LoginControls/PasswordRecovery.md b/docs/LoginControls/PasswordRecovery.md index 0193e85a1..1aadebc59 100644 --- a/docs/LoginControls/PasswordRecovery.md +++ b/docs/LoginControls/PasswordRecovery.md @@ -51,66 +51,70 @@ Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/sy !!! warning "Authentication Integration" The PasswordRecovery component does NOT look up users, validate answers, or send emails. You must handle the `OnVerifyingUser` and `OnVerifyingAnswer` events and use ASP.NET Identity's `UserManager` or your own authentication service to perform the actual recovery. -## Web Forms Declarative Syntax - -```html - - - - -``` - -## Blazor Syntax - -```razor - - -@code { - private PasswordRecovery passwordRecovery; - - private async Task HandleVerifyingUser(LoginCancelEventArgs e) - { - // Look up the user by passwordRecovery.UserName - // var user = await UserManager.FindByNameAsync(passwordRecovery.UserName); - // if (user == null) { e.Cancel = true; return; } - // passwordRecovery.SetQuestion(user.SecurityQuestion); +## Syntax Comparison + +=== "Web Forms" + + ```html + + + + + ``` + +=== "Blazor" + + ```razor + + + @code { + private PasswordRecovery passwordRecovery; + + private async Task HandleVerifyingUser(LoginCancelEventArgs e) + { + // Look up the user by passwordRecovery.UserName + // var user = await UserManager.FindByNameAsync(passwordRecovery.UserName); + // if (user == null) { e.Cancel = true; return; } + // passwordRecovery.SetQuestion(user.SecurityQuestion); + } + + private async Task HandleVerifyingAnswer(LoginCancelEventArgs e) + { + // Validate the answer: passwordRecovery.Answer + // if (!valid) { e.Cancel = true; return; } + } + + private async Task HandleSendingMail(MailMessageEventArgs e) + { + // Send recovery email via your mail service + } } + ``` - private async Task HandleVerifyingAnswer(LoginCancelEventArgs e) - { - // Validate the answer: passwordRecovery.Answer - // if (!valid) { e.Cancel = true; return; } - } - - private async Task HandleSendingMail(MailMessageEventArgs e) - { - // Send recovery email via your mail service - } -} -``` +## Blazor Usage Notes ### Skipping the Question Step diff --git a/docs/NavigationControls/HyperLink.md b/docs/NavigationControls/HyperLink.md index e1843e923..8db757fcf 100644 --- a/docs/NavigationControls/HyperLink.md +++ b/docs/NavigationControls/HyperLink.md @@ -48,42 +48,29 @@ It may seem strange that we have a HyperLink component when there already is an - `EnableViewState` - ViewState is supported for compatibility but this parameter does nothing - `SkinID` - Theming is not available in Blazor -## Usage Examples - -### Web Forms Syntax -```html - -``` - -### Blazor Syntax -```html - -``` - -### Blazor with Styling -```html - -``` - -### Blazor without NavigateUrl (renders as plain anchor) -```html - -``` +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + ``` ## WebForms Syntax Reference @@ -130,6 +117,23 @@ It may seem strange that we have a HyperLink component when there already is an /> ``` +## Usage Examples + +### Blazor with Styling +```html + +``` + +### Blazor without NavigateUrl (renders as plain anchor) +```html + +``` + ## See Also - [Button](../EditorControls/Button.md) — Clickable button control diff --git a/docs/NavigationControls/ImageMap.md b/docs/NavigationControls/ImageMap.md index 8f5b913b1..f7b7074cd 100644 --- a/docs/NavigationControls/ImageMap.md +++ b/docs/NavigationControls/ImageMap.md @@ -46,48 +46,80 @@ All hot spot types share these properties: - **EnableTheming/SkinID** — ASP.NET theming is not available in Blazor - **Lifecycle events** (`OnDataBinding`, `OnInit`, etc.) — Use Blazor lifecycle methods instead -## Web Forms Declarative Syntax +## Syntax Comparison -```html - - - - - -``` + ToolTip="string" + runat="server"> + + + + + ``` + +=== "Blazor" + + ```razor + @using BlazorWebFormsComponents + @using BlazorWebFormsComponents.Enums + + + + @code { + private List hotSpots = new List + { + new RectangleHotSpot + { + Top = 0, Left = 0, Bottom = 100, Right = 200, + NavigateUrl = "/page1", + AlternateText = "Region 1" + }, + new CircleHotSpot + { + X = 300, Y = 150, Radius = 50, + NavigateUrl = "/page2", + AlternateText = "Region 2" + } + }; + } + ``` -## Blazor Razor Syntax +## Blazor Usage Examples ### Navigation Hot Spots diff --git a/docs/NavigationControls/Menu.md b/docs/NavigationControls/Menu.md index aaef93b84..4056c2b90 100644 --- a/docs/NavigationControls/Menu.md +++ b/docs/NavigationControls/Menu.md @@ -2,7 +2,7 @@ The Menu component is meant to emulate the asp:Menu control in markup and is defined in the [System.Web.UI.WebControls.Menu class](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.menu?view=netframework-4.8) -[Usage Notes](#usage-notes) | [Web Forms Syntax](#web-forms-declarative-syntax) | [Blazor Syntax](#blazor-syntax) +[Usage Notes](#usage-notes) | [Syntax Comparison](#syntax-comparison) | [Examples](#examples) ## Features supported in Blazor @@ -21,380 +21,134 @@ The Menu component is meant to emulate the asp:Menu control in markup and is def ##### [Back to top](#menu) -## Web Forms Declarative Syntax - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -##### [Back to top](#menu) - -## Blazor Syntax - -```html - - - - - - - - - - - - - - +## Syntax Comparison + +=== "Web Forms" + + ```html + + + + ``` + +=== "Blazor" + + ```razor + + + + + + + + + + + + + + + + + + + + - - - - - - - + - -``` + + ``` ## Examples diff --git a/docs/NavigationControls/SiteMapPath.md b/docs/NavigationControls/SiteMapPath.md index ab099fed7..02126aacd 100644 --- a/docs/NavigationControls/SiteMapPath.md +++ b/docs/NavigationControls/SiteMapPath.md @@ -37,41 +37,43 @@ root.AddChild(products); - **Provider** - The `SiteMapProvider` property accepts a `SiteMapNode` root, not a provider name - **SkipLinkText** - Accessibility skip link not implemented -## Web Forms Declarative Syntax - -```html - -``` - -## Blazor Syntax - -```razor - -``` +## Syntax Comparison + +=== "Web Forms" + + ```html + + ``` + +=== "Blazor" + + ```razor + + ``` ## Usage Notes diff --git a/docs/NavigationControls/TreeView.md b/docs/NavigationControls/TreeView.md index 7c1e93e70..616174c5d 100644 --- a/docs/NavigationControls/TreeView.md +++ b/docs/NavigationControls/TreeView.md @@ -81,326 +81,330 @@ By default, `UseAccessibilityFeatures` is `false`, ensuring existing implementat - ShowCheckBoxes attribute, when specifying multiple values, should be separated by a vertical pipe `|` instead of commas - For the best user experience with assistive technologies, set `UseAccessibilityFeatures="true"` -## Web Forms Declarative Syntax -```html - - - - - - - - - +## Syntax Comparison + +=== "Web Forms" + + + ```html + + + + + + + + + + + + + + + + + + + ``` + +=== "Blazor" + + ```html + + ShowCheckBoxes="None|Root|Parent|Leaf|All" + ShowExpandCollapse=bool + ShowLines=bool + Target=string + UseAccessibilityFeatures=bool + Visible=bool + > + + + - - + + + - - - - - -``` - -## Blazor Syntax - -```html - - ShowCheckBoxes="None|Root|Parent|Leaf|All" - ShowExpandCollapse=bool - ShowLines=bool - Target=string - UseAccessibilityFeatures=bool - Visible=bool -> - - - - - - - - - - - - -``` + + + + + ``` ## Examples