【问题标题】:Polymer web component not working with asp.net core 2.0 Razor pagesPolymer Web 组件不适用于 asp.net core 2.0 Razor 页面
【发布时间】:2018-03-18 04:49:16
【问题描述】:

我创建了一个非常简单的 ASP.NET Core 2.0 项目并选择了新的 Razor 页面模板,然后我从主页中删除了所有内容并添加了 Paper-button Web 组件以便使用它以下是我的 Index.cshtml 的代码:

page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<paper-button raised>My Button</paper-button>

然后我在我的文件Layout.cshtml 中添加了该组件的导入语句,如下所示:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, 
    initial-scale=1, user-scalable=yes">
    <title>@ViewData["Title"] - DineAlong</title>

    //notice the following script for pollyfills and then the import for paper-button
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js">
    </script>
    <link rel="import" href="/bower_components/paper-button/paper-button.html">
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>

运行html页面后只显示文本MyButton,并且不显示该位置的纸张按钮。

注意:我在 Layout.cshtmlIndex.cshtml 旁边有 bower_components 文件夹,即:在 Pages 文件夹中,因此布局文件中的引用导入应该可以正常工作。

以下是控制台中的错误我可以看到错误但我不知道为什么会发生。

文件夹结构:

【问题讨论】:

  • 你能发布你的文件夹/项目结构吗?
  • @Ofisora 请查看更新后的问题
  • 你能不能先从 \bower_components... 中删除 \ 或添加 . (点)在它之前并再次检查?
  • 是的,我试过了,也没用

标签: polymer asp.net-core-2.0 polymer-2.x razor-pages


【解决方案1】:

您需要将目录移动到 wwwroot 文件夹下(可能在 lib 下)。 Pages 目录仅由 MVC 路由引擎引用,而不是 Web 服务器。

例如,我在我的项目中添加了 Font Awesome,可以像这样引用它:

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">

【讨论】:

  • 你在 wwwroot 下的路径是什么?注意我的路径是如何相对于根的。
  • 是的,我也使用了与您相同的路径,因为我的位置与您相同聚合物服务或聚合物构建。虽然我不确定
猜你喜欢
  • 2020-07-12
  • 2018-01-31
  • 1970-01-01
  • 1970-01-01
  • 2018-09-05
  • 2020-06-06
  • 2018-11-24
  • 2011-07-13
  • 2022-01-20
相关资源
最近更新 更多