【问题标题】:How to get input parameter in MainLayout?如何在 MainLayout 中获取输入参数?
【发布时间】:2019-12-14 14:38:06
【问题描述】:
  1. Blazor 应用程序:我有自定义页眉徽标和自定义页脚链接 将根据输入参数 {id} 改变。

  2. 在查询中使用输入参数 ID 来检索公司徽标,并且 来自数据库的页脚链接信息。

动态页眉和页脚是mainlayout的一部分,如何通过mainlayout获取输入参数?

【问题讨论】:

  • 这个 id 是从哪里来的?从 url 路径,url 查询字符串,一个设置?

标签: c# asp.net-core blazor asp.net-core-3.0


【解决方案1】:

假设您创建了一个 Company 父组件,该组件可以获取表示公司 ID 的路由参数,该参数的值用于检索可能显示在子组件中的公司详细信息。你可以这样定义父组件:

Company.razor

@page "/company"
@page "/company/{ID}"

@code {
    [Parameter]
    public string ID { get; set; }
}

注意:以上两个路由模板是必须的……

回答您的问题... 将此代码添加到 MainLayout 组件中

@code{

    public string ID { get; set; }

    protected override void OnParametersSet()
    {
        // pull out the "ID" parameter from the route data
        object id = null;
        if ((this.Body.Target as RouteView)?.RouteData.RouteValues?.TryGetValue("ID", out id) == true)
        {
            ID = id?.ToString();
        }

    }
}

注意:上面的代码从RouteData中提取了ID参数的值,并将其存储在ID属性中。现在您可以随心所欲地使用它...包括将其传递给 NavMenu 组件(如果有必要)。你可以这样做:

向 NavMenu 组件添加一个组件参数属性,如下所示:

[Parameter]
public string ID { get; set; }

并为NavMenu组件实例添加一个ID组件参数属性(位于MainLayout组件的顶部。现在应该是<NavMenu ID="@ID"/>

你现在快乐吗?

【讨论】:

  • 感谢您的回复。我试过了,它不起作用“受保护的覆盖无效OnParametersSet()它不读取ID”,..我可以在组件内部看到ID,但在主布局中看不到
  • 这段代码运行良好。我已经在我的电脑上运行了它,因为这是我在这里遇到的最难的问题。你把 OnParametersSet 方法放在哪里了?它应该在 MainLayout.razor 中。把这个放到 OnParametersSet 中查看结果: Console.WriteLine($"This is the ID: {ID}");如果它仍然“不起作用”,请将您的应用上传到 github,或在此处显示以供我检查。
  • 你的网址是不是像这样:localhost:44362/company/123 如果不是,应该是这样的......
  • 我修好了 :) 一切正常!再次感谢,感谢您的帮助:)
猜你喜欢
  • 1970-01-01
  • 2018-12-24
  • 2020-06-18
  • 2015-03-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-02
相关资源
最近更新 更多