diff --git a/blazor/common/authentication/blazor-oauth-authentication.md b/blazor/common/authentication/blazor-oauth-authentication.md index 032fa2f14..50a27017b 100644 --- a/blazor/common/authentication/blazor-oauth-authentication.md +++ b/blazor/common/authentication/blazor-oauth-authentication.md @@ -13,7 +13,7 @@ This guide explains how to secure the [Syncfusion® Blazor DataGrid](https://www ## Create a Blazor project -If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**. +If you already have a Blazor project configured, you can skip this section and proceed to [Install required packages](./blazor-oauth-authentication#install-required-packages). Otherwise, create a new Blazor application by following the [Syncfusion® getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for a **Blazor Web App (Interactive Server)**. @@ -329,7 +329,7 @@ To allow components to receive authentication state, wrap the router inside **Ca ## Connect Syncfusion® Blazor DataGrid -Create `SecureGrid.razor` page and render the **Syncfusion® Blazor DataGrid** on a secured Blazor page using the **[Authorize]** attribute, allowing access only to authenticated users. +Create `SecureGrid.razor` page and render the **Syncfusion® Blazor DataGrid** on a secured Blazor page using the `[Authorize]` attribute, allowing access only to authenticated users. {% tabs %} {% highlight razor tabtitle="Pages/SecureGrid.razor" %} @@ -343,29 +343,34 @@ Create `SecureGrid.razor` page and render the **Syncfusion® Blazor DataGrid** o Secure Data Grid - + - - + + + + -@code { - public List Orders { get; set; } = new(); +@code{ + public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + Orders = Enumerable.Range(1, 12).Select(i => new Order { + OrderID = 1000 + i, + CustomerID = new[] { "ALFKI","ANATR","ANTON","BLONP","BOLID" }[Random.Shared.Next(5)], + OrderDate = DateTime.Today.AddDays(-i), + Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2) }).ToList(); } public class Order { - public int? OrderID { get; set; } + public int OrderID { get; set; } public string? CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } } } @@ -374,7 +379,7 @@ Create `SecureGrid.razor` page and render the **Syncfusion® Blazor DataGrid** o ## Display content based on authentication status -This section demonstrates how to dynamically render UI content based on the user’s authentication state. The `Home.razor` page uses the **** component to show different content for authenticated and unauthenticated users. +This section demonstrates how to dynamically render UI content based on the user’s authentication state. The `Home.razor` page uses the `` component to show different content for authenticated and unauthenticated users. {% tabs %} {% highlight razor tabtitle="Pages/Home.razor" %} diff --git a/blazor/common/authentication/images/oauth-authentication.webp b/blazor/common/authentication/images/oauth-authentication.webp index 4f53c3e44..584c17c51 100644 Binary files a/blazor/common/authentication/images/oauth-authentication.webp and b/blazor/common/authentication/images/oauth-authentication.webp differ diff --git a/blazor/common/authentication/images/oauth-datagrid.webp b/blazor/common/authentication/images/oauth-datagrid.webp index f86e3399b..880a7a38a 100644 Binary files a/blazor/common/authentication/images/oauth-datagrid.webp and b/blazor/common/authentication/images/oauth-datagrid.webp differ diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md index 094f76aaa..58ec56d2f 100644 --- a/blazor/getting-started/maui-blazor-web-app.md +++ b/blazor/getting-started/maui-blazor-web-app.md @@ -101,7 +101,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A {% endhighlight %} -{% highlight razor tabtitle="App.razor" hl_lines="6 13" %} +{% highlight razor tabtitle="App.razor" hl_lines="6 12" %}