- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
刚刚使用了 DevExpress 的优秀免费 Blazor 代码来实现自定义 <HEAD>
运行时数据:
_Hosts.cshtml(见元素中的代码片段):
<!DOCTYPE html>
<html lang="en">
<head>
@(await Html.RenderComponentAsync<DocumentMetadataComponent>(RenderMode.ServerPrerendered))
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
到目前为止效果很好(可以使标题、描述等动态化)。
现在的问题是我必须在那个顶层设置一些变量来过度和解释一次。我想知道使用的 url 并动态提供一些数据。
但据我所知,现在我只能在每个组件中执行两次 (DocumentMetadataComponent + App)。
我在 MainLayout.razor 中获取数据:
<CascadingValue Value="StoreData" Name="StoreData">
@Body
</CascadingValue>
@code{
public StoreCompleteDTO StoreData { get; set; }
protected override async Task OnInitializedAsync()
{
using var tl = new TimeLogger($"MainLayout.razor OnInitializedAsync()");
StoreData = await AppState.GetStoreData(My.StoreId);
}
}
这个 StoreData 变量必须在动态元数据中可用,因为我必须为其他商店选择不同的 CSS 文件...
希望解释清楚。
目标是只调用一次: StoreData = await AppState.GetStoreData(My.StoreId);
因为是网络服务调用,费时间...
谢谢!
最佳答案
我建议在 Blazor 应用程序中提供一些信息的最佳方法是使用服务系统和依赖注入(inject)。
这意味着您可以控制数据的范围(全局? session ?)并使其在您需要的任何页面/组件上可用。写成State容器的形式也有助于使用。这是一个仅设置页面标题的快速示例,但您可以将其扩展到涵盖 <meta>
例如。
/// <summary>
/// A state container for head tags
/// </summary>
public class HeadState
{
/// <summary>
/// Page title
/// </summary>
public string Title => _title;
// internal store
private string _title = "";
/// <summary>
/// Set the page title
/// </summary>
/// <param name="title"></param>
public void SetTitle(string title)
{
if(!string.Equals(_title,title))
{
_title = title;
HeadChanged?.Invoke();
}
}
/// <summary>
/// Event raised when data changes
/// </summary>
public event Action HeadChanged;
}
HeadState
类是一个状态容器,允许我们设置页面标题。 title 属性是只读的,因此必须通过 SetTitle 进行设置,这会触发 HeadChanged
事件,以便消费者知道它已被修改。我们需要将其注册为 Startup.cs
中的范围服务:
// declare the HeadState for DI
services.AddScoped<State.HeadState>();
为了实现它,我们修改了 _host.cshtml
添加一个在 <head>
中呈现它的组件根据您的问题部分:
<head>
@(await Html.RenderComponentAsync<HeadComponent>(RenderMode.Server))
</head>
HeadComponent
注入(inject)状态并处理渲染和更新:
@inject State.HeadState head
<title>@head.Title</title>
@code
{
// although the title is set on loading, if it is changed by a component we
// need to call StateHasChanged to trigger Blazor to rerender since the event
// that triggered it is outside this component
protected override void OnInitialized()
{
head.HeadChanged += () =>
{
StateHasChanged();
};
}
}
要在页面(或任何其他组件!)上测试它,我们只需注入(inject)状态对象并使用它
@page "/"
@inject State.HeadState head
<h1>Head Demo</h1>
<button @onclick='(()=> head.SetTitle("Hello"))'>Set title to Hello</button>
<button @onclick='(()=> head.SetTitle("World"))'>Set title to World</button>
这里我们只是在做一个<title>
用于演示目的的标记,但您当然可以添加 <meta>
或其他值。我会避免修改 CSS 样式表,因为这可能应该通过 JS 完成,但我不能 100% 确定这是正确的。
关于blazor - 带有 C# 代码的 Blazor 中的动态 _Hosts.cshtml 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59197729/
我第一次同时处理 ASP.NET、MVC 3、Web 开发。请耐心听我说,因为我知道这个主题已经从不同角度进行了大量讨论。我仍然没有找到我的具体问题的答案:为什么我的应用程序在出现 404 错误时找不
_PageStart.cshtml 与 _AppStart.cshtml 有什么区别?我可以互换使用它们吗? 最佳答案 _AppStart.cshtml 在应用程序第一次启动时执行一次。它是设置全局变
我有一个 DateTime 和 Date 的编辑器模板。 Date 的内容是 DateTime 的简单复制和粘贴。这是糟糕的复制粘贴编码。 对于用[DataType(DataType.Date)]修饰
当我在 IIS 8 中调用 .cshtml 页面时出现以下错误 “/”应用程序中的服务器错误。不提供此类页面。说明:您所请求的页面类型未被提供,因为它已被明确禁止。扩展名“.cshtml”可能不正确。
当我在 IIS 8 中调用 .cshtml 页面时出现以下错误 “/”应用程序中的服务器错误。不提供此类页面。说明:您所请求的页面类型未被提供,因为它已被明确禁止。扩展名“.cshtml”可能不正确。
每次我单击以创建 View 或部分文件时,Visual Studio 都会自动创建一个 _Layout.cshtml 和一个 _ViewStart.cshtml 文件。 我不希望我的项目创建 _Vie
我知道您可以对带有 url 的普通页面使用布局过滤器,但在出现错误时 View 会发生变化,同时保持 url 不变,因此我无法使用基于路径的新布局。任何帮助,将不胜感激。谢谢! 最佳答案 在我的脑海中
我无法在 mvc 3 razor 的 cshtml 文件中使用 RoleEnvironment.CurrentRoleInstance.Id。 RoleEnvironment 的错误表明它在当前上下文
我知道如果那是条蛇它会咬我的。但我不明白为什么它在 _Layout 头文件中有效,但在我需要它的特定索引页面中却无效。我看不到在每个使用 _Layout.cshtml 的页面中都有此代码。 这是 IF
我有一个分为多个区域的 ASP.NET MVC 4 站点。每个区域都有一个Views/Shared/_Layout.cshtml引用公共(public)共享布局的 View 。在通用布局中,我有一个侧
问题 其实有两个相关的问题: 我应该为每个页面创建一个 ViewModel 吗? 如果您在为两个页面(Create.cshtml 和 Edit.cshtml)创建单个 ViewModel 类时没有问题
在 ASP.Net 5 项目中,默认情况下我有一个名为 _ValidationScriptsPartial.cshtml 的文件:
这里有人可以帮助我吗?我有以下代码: @inherits umbraco.MacroEngines.DynamicNodeContext @{ var node = @Model.NodeBy
我希望有两个_Host.cshtml。我的想法是,我有一个具有非常不同的必需 css 和 js 的登录页面,以及一个具有不同必需的 css 和 js 的主/仪表板页面,我不想在单个 _Host 中加载
我尝试在我的 cshtml 页面中添加一个条件标签 var isTrendClicked = false; function trendChart() { $('.sparkline1'
我有一个简单的选择列表项,被插入下拉列表中。 这是 HTML 结果 Options Option1 Option2 基本上我有这个简单的 JavaScript 脚本 $(document).read
按照 MVC 中的教程,你能告诉我在 ASPX 页面中的替代方法吗 在 cshtml 页面中,VS2013 上 MVC 4 中的默认 View 类型。当我尝试上述时,显示的是字面意思。即
我想知道是否有人测试了他们基于 MVC .NET 的 Web 服务的图形用户界面部分。我用过 Watin/Specflow。我对此有两个主要顾虑: 这些测试不仅仅是图形用户界面。它们是系统检查。他们测
我正在为工作更新 Intranet 站点,需要知道如何水平对齐列表项。我知道这是通过 CSS 完成的,但我在弄清楚使它保持水平的错误所在时遇到了一些问题。 _SiteLayout.cshtml
如果特定列包含重复条目,如何清除 HTML 表格的记录?例如,如果我的表中有 2 列 - 姓名和年龄,如果 2 个人具有相同的年龄,则完全删除第二行。 function DeleteDuplicat
我是一名优秀的程序员,十分优秀!