Skip to content

docs: Convert NavigationControls, LoginControls, and MasterPage to tabbed syntax #517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
csharpfritz merged 1 commit into from
Mar 25, 2026
Merged

docs: Convert NavigationControls, LoginControls, and MasterPage to tabbed syntax #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/DataControls/ListView.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
300 changes: 177 additions & 123 deletions docs/EditorControls/MasterPage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<!-- Site.Master -->
<%@ Master Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>My Site</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<form runat="server">
<div class="header">
<h1>My Website</h1>
</div>
=== "Web Forms"

```html
<!-- Site.Master -->
<%@ Master Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>My Site</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<form runat="server">
<div class="header">
<h1>My Website</h1>
</div>

<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>Default content</p>
</asp:ContentPlaceHolder>

<div class="footer">
<p>&copy; 2024 My Company</p>
</div>
</form>
</body>
</html>

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

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Welcome to my page!</h2>
</asp:Content>
```

=== "Blazor"

```razor
<!-- MasterLayout.razor -->
<MasterPage>
<Head>
<title>My Site</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>Default content</p>
</asp:ContentPlaceHolder>
<ChildContent>
<div class="header">
<h1>My Website</h1>
</div>

<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>

<div class="footer">
<p>&copy; 2024 My Company</p>
</div>
</ChildContent>
</MasterPage>

<!-- MyPage.razor -->
<MasterPage>
<Head>
<title>My Site - Home</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<div class="footer">
<p>&copy; 2024 My Company</p>
</div>
</form>
</body>
</html>

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

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Welcome to my page!</h2>
</asp:Content>
```
<ChildContent>
<div class="header">
<h1>My Website</h1>
</div>

<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>

<div class="footer">
<p>&copy; 2024 My Company</p>
</div>
</ChildContent>

<Content ContentPlaceHolderID="MainContent">
<h2>Welcome to my page!</h2>
</Content>
</MasterPage>
```

## Blazor Syntax
## Blazor Usage Examples

### Basic MasterPage with Layout Template

Expand Down Expand Up @@ -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
<!-- Site.Master -->
<%@ Master Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>My Site</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<form runat="server">
<header>
<h1>My Website</h1>
</header>

<main>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>Default content</p>
</asp:ContentPlaceHolder>
</main>

<footer>
<p>&copy; 2024</p>
</footer>
</form>
</body>
</html>

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

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Welcome!</h2>
<p>This is my page.</p>
</asp:Content>
```

### After (Blazor)

```razor
<!-- MasterLayout.razor -->
<MasterPage>
<Head>
```html
<!-- Site.Master -->
<%@ Master Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>My Site</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<ChildContent>
<header>
<h1>My Website</h1>
</header>

<main>
<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>
</main>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<form runat="server">
<header>
<h1>My Website</h1>
</header>

<main>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>Default content</p>
</asp:ContentPlaceHolder>
</main>

<footer>
<p>&copy; 2024</p>
</footer>
</form>
</body>
</html>

<!-- MyPage.aspx -->
<%@ Page Title="Home" MasterPageFile="~/Site.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Welcome!</h2>
<p>This is my page.</p>
</asp:Content>
```

=== "Blazor"

```razor
<!-- MasterLayout.razor -->
<MasterPage>
<Head>
<title>My Site</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<footer>
<p>&copy; 2024</p>
</footer>
</ChildContent>
</MasterPage>

<!-- MyPage.razor -->
<MasterPage>
<Head>
<title>My Site - Home</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<ChildContent>
<header>
<h1>My Website</h1>
</header>
<ChildContent>
<header>
<h1>My Website</h1>
</header>

<main>
<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>
</main>

<footer>
<p>&copy; 2024</p>
</footer>
</ChildContent>
</MasterPage>

<!-- MyPage.razor -->
<MasterPage>
<Head>
<title>My Site - Home</title>
<link rel="stylesheet" href="css/site.css" />
</Head>

<main>
<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>
</main>
<ChildContent>
<header>
<h1>My Website</h1>
</header>

<main>
<ContentPlaceHolder ID="MainContent">
<p>Default content</p>
</ContentPlaceHolder>
</main>

<footer>
<p>&copy; 2024</p>
</footer>
</ChildContent>

<footer>
<p>&copy; 2024</p>
</footer>
</ChildContent>

<Content ContentPlaceHolderID="MainContent">
<h2>Welcome!</h2>
<p>This is my page.</p>
</Content>
</MasterPage>
```
<Content ContentPlaceHolderID="MainContent">
<h2>Welcome!</h2>
<p>This is my page.</p>
</Content>
</MasterPage>
```

## See Also

Expand Down
Loading
Loading