标签: blazor-server-side

Blazor 服务器端与 Blazor WebAssembly 托管

我是 Blazor 新手,正在尝试了解不同托管模型之间的差异。

根据我的阅读,我了解到 Blazor 服务器端和 Blazor WebAssembly Hosted 都有服务器端代码,两者都使用 Signal R 与客户端通信。

那么它们之间有什么区别呢?这些的客户端部署在哪里?他们与Server的连接有什么区别?如果 Web 应用程序依次调用第 3 方 Web API,则调用如何路由?

我发现的一个区别在于项目结构。Blazor 服务器端只有一个项目(带有数据文件夹)。Blazor WebAssembly Hosted 有 3 个项目(.Server、.Client 和 .Shared)。

blazor blazor-server-side blazor-webassembly

42
推荐指数
2
解决办法
4万
查看次数

blazor 服务器端是否有任何热重载?

我只有一个快速的问题。有没有办法热重载 blazor 应用程序?至少,.razor 文件?现在我将我的应用程序托管在本地 IIS(不是 IIS express)上。

我正在浏览互联网,但没有发现任何有用的东西。

谢谢大家的回答:)

c# blazor blazor-server-side blazor-client-side blazor-webassembly

38
推荐指数
4
解决办法
3万
查看次数

Blazor 链接 - 如果有 onclick 方法,则禁用 href

在 Blazor 中,我有一个<a>同时具有 ahrefonclick方法的元素:

<a href="" onclick="@(() => ChangePage(_someObject))">Test</a>
Run Code Online (Sandbox Code Playgroud)

onclick 调用这个方法:

  private bool ChangePage(object objectToDisplay)
  {
    _currentObject = objectToDisplay;
    StateHasChanged();

    return false;
  }
Run Code Online (Sandbox Code Playgroud)

通常在 JavaScript 中,从 event 方法返回 false 会停止后续导航到 中的链接href但这似乎不适用于我上面的代码。

单击链接后,如何阻止 Blazor 将页面更改为根 url?

(这里显而易见的答案是href完全删除,但我正在使用引导 Pill 中的链接并删除 Pillhref工作的停止)

我尝试过的其他方法不起作用:

  • <a>元素更改为跨度并设置data-target属性,但这会正确停止 Pills 渲染。
  • 添加returnonclick事件中(根据此答案):onclick="return @(() => ChangePage(_overviewModel))"但这不会编译。
  • returnonclick事件之后添加:onclick="@(() => ChangePage(_overviewModel)); …

c# blazor blazor-server-side

29
推荐指数
4
解决办法
2万
查看次数

如何在 Blazor 服务器应用程序中停止事件传播

我正在使用Grid.Blazor库在 Blazor 应用程序上渲染服务器端网格。其中一列有一个带有单击事件的按钮。因此,当单击按钮时,网格行事件也会与按钮单击事件一起触发。我想停止事件传播并只让按钮单击事件触发。

网格:

  <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid"  OnRowClicked="@(async (item) => await ExerciseDetails(item))"></GridComponent>


Action<IGridColumnCollection<QuickExcerciseLists>> columns = c =>
        {
            c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");
            c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");
            c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");
            c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs<MatTooltip>().SetWidth("15%");
        };
Run Code Online (Sandbox Code Playgroud)

自定义列组件:

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>
Run Code Online (Sandbox Code Playgroud)

我尝试传递@onclick:stopPropagation子按钮组件。但下面给出了编译错误。

该组件的组件参数“onclick”使用两次或多次。参数必须是唯一的(不区分大小写)。组件参数“onclick”由“@onclick:stopPropagation”指令属性生成。

我正在运行.Net core 3.1.201。非常感谢任何帮助。

.net-core blazor blazor-server-side matblazor

27
推荐指数
3
解决办法
2万
查看次数

在 Blazor 组件中获取当前用户

我正在使用 Blazor 和 Windows 身份验证启动一个新站点,并且需要识别查看页面/组件的当前用户。

对于 Razor 页面,可以使用 访问当前用户名Context.User.Identity.Name,但这在 Blazor 组件中似乎不起作用。我尝试将 HttpContext 注入组件,但 Context 在运行时为空。

作为奖励,我最终希望将其合并到 Startup.cs 中,因此我只需要获取一次用户名,就可以为我的应用程序利用企业用户类(使用 EF Core)。也将不胜感激针对该用例量身定制的答案。

asp.net-core blazor blazor-server-side .net-core-3.0 ef-core-3.0

25
推荐指数
7
解决办法
3万
查看次数

Blazor @page 路由 url 使用变量定义

我有一个关于 Blazor 服务器端的问题。

我想@page用变量或属性定义路由 url。

我现在可以使用以下默认方法

@page "/route-url"

<h1>Page Test</h1>

@code {
    
}
Run Code Online (Sandbox Code Playgroud)

但我想使用如下方法

@page MenuItem.Role

<h1>Page Test</h1>

@code {
    
}
Run Code Online (Sandbox Code Playgroud)

我尝试了上面的方法然后抛出异常。就像下面的异常一样。

C:\Projects\TestBlazorProject\Pages\TestPage.razor(1,7): error RZ1016: The 'page' directive expects a string surrounded by double quotes. [C:\Projects\TestBlazorProject\TestBlazorProject.csproj]
Run Code Online (Sandbox Code Playgroud)

如何@page使用任何不同的变量或任何类属性定义路由 url?

asp.net-core blazor blazor-server-side asp.net-blazor

24
推荐指数
2
解决办法
9237
查看次数

Blazor 中的 StateHasChanged() 与 InvokeAsync(StateHasChanged)

我知道调用该StateHasChanged()方法会通知组件状态已更改,因此它应该重新渲染。

但是,我也看到调用await InvokeAsync(StateHasChanged)await InvokeAsync(() => StateHasChanged())在其他人的代码中,但我不太明白它与其他人的代码有何不同StateHasChanged()以及应该在何处选择一个,以及为什么.

我能找到的唯一信息是Blazor 文档的这一部分,它说:

如果必须根据外部事件(例如计时器或其他通知)更新组件,请使用 InvokeAsync 方法,该方法分派到 Blazor 的同步上下文。

我不太明白这个。它只是说“......它调度到 Blazor 的同步上下文”,但我对此不太满意!什么是“Blazor 的同步上下文”?

我试过在 a的事件中调用StateHasChanged()- 而不是InvokeAsync(StateHasChanged)- ,它按预期工作,没有任何问题。我应该打电话吗?!如果是这样,为什么?我觉得这里可能有一些我不知道的重要细微差别。TimerElapsedawait InvokeAsync(StateHasChanged)

我也看到过类似的电话InvokeAsync(() => InvokeAsync(Something)),为什么?

另外,我有时也会看到InvokeAsync()没有调用await,那有什么关系?!

blazor blazor-server-side blazor-webassembly

22
推荐指数
1
解决办法
4983
查看次数

从 MS Blazor Web Assembly 模板解决方案服务器项目中删除 Duende IdentityServer

我刚刚为 .net 6 创建了 Blazor Web Assembly 解决方案,并选择了“个人帐户”和“ASP.NET Core 托管”。

此消息显示在 .Server 项目的 ReadMe.txt 中:

此代码包含对 Duende IdentityServer 的依赖项。这是一个具有互惠许可协议的开源产品。如果您计划在生产中使用 Duende IdentityServer,这可能需要支付许可费。要了解如何使用 Azure Active Directory 作为您的身份,请参阅https://aka.ms/aspnetidentityserver要了解您是否需要 Duende IdentityServer 的商业许可证,请参阅 https://aka.ms/identityserverlicense

因此,看起来 Microsoft 正在为其 Blazor WA TEMPLATE Server 元素使用非常昂贵的商业软件。

首先,在他们的 Blazor 模板中包含商业软件是荒谬的 - 我只能假设他们在切换到“Duende”之前就开始使用它,并且它不再是免费的。

对于大多数仅出于身份目的的项目来说,1000 美元的年费(取决于项目)是不可接受的。

我可以在.Server项目中看到这个包:Microsoft.AspNetCore.ApiAuthorization.IdentityServer

如果我删除它,我认为我已经从项目中删除了 Duende 商业软件的所有痕迹?

另外,是否有任何方法可以使用不使用商业软件(或 Microsoft Identity Platform)的服务器元素(用于身份验证等)来模板化 Blazor Web Assembly 项目。

例如,在服务器上使用 .net Core Identity 进行身份验证就可以了 - 但我猜这不作为模板存在?

谢谢。

blazor blazor-server-side blazor-webassembly

21
推荐指数
0
解决办法
2871
查看次数

Blazor 组件:从子组件更新模型时刷新父组件

我在 ASP.NET Core 3 预览版 4 中使用服务器端 Blazor 组件。

我有一个父组件和子组件,使用相同的共享模型,如下所示:

模型 :

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}
Run Code Online (Sandbox Code Playgroud)

父组件:

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}
Run Code Online (Sandbox Code Playgroud)

子组件:

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { …
Run Code Online (Sandbox Code Playgroud)

c# asp.net-core blazor blazor-server-side

20
推荐指数
5
解决办法
3万
查看次数

Blazor 项目结构/最佳实践

我的公司正在从遗留代码库转向更现代的平台,我们正在转向 Blazor。我们目前刚刚参与 ORM 和最佳实践,似乎有很多关于项目设置的相互矛盾的想法(至少从我收集到的内容来看)。我目前的结构如下:

首先是一个名为 DAL 的类库——这是我们的“数据层”。我们正在使用 Dapper,它相对简单。示例类如下所示:

public class Person
{
      public string Id {get; set;}
      public string FirstName {get; set;}
      public string LastName {get; set;}

      public Person() {}
      public Person(DbContext context) {}

      public void GetPerson(int id) {}
      public void DeletePerson(int id) {}


      etc....
}
Run Code Online (Sandbox Code Playgroud)

第二个项目是引用项目 DAL 的服务器 Blazor 项目。项目划分如下:

  1. 模型 - 这些是当前正在处理的项目的特定模型。例如,一个模型可能是多个表(来自 DAL 类的模型)的组合,或者只是用于网页表单的字段。

一个例子可能是这样的:

public class EmployeeModel
{
    public int Id {get; set;}
    public int Department{get; set;}
    public DateTime HireDate {get; set;}
    public decimal Salary {get; set;} …
Run Code Online (Sandbox Code Playgroud)

c# mvvm .net-core blazor blazor-server-side

20
推荐指数
2
解决办法
1万
查看次数