webpack 如何让ASP.NET核心MVC视图引用另一个文件中的脚本部分？

q9yhzks0 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(139)

当我试图在ASP.NETCore6MVC中链接我的.cshtml文件和JavaScript引用时，我遇到了一个问题。
到目前为止，我已经创建了一个webpack设置，它在一个名为home.sources.cshtml的单独文件中生成我的JavaScript标记：

@section Scripts
{
    <script src="/js/npm.popperjs.bundle.js"></script>
    <script src="/js/npm.jquery.bundle.js"></script>
    <script src="/js/npm.bootstrap.bundle.js"></script>
    <script src="/js/home.bundle.js"></script>
}

正如您所看到的，我的标签被封装在Scripts部分中。所有这些依赖项都是针对我的View/Home/Index.cshtml页面的：

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p class="test">Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

// Insert Script Section here

我想让home.sources.cshtml的内容在运行时附加到此页面。我不想自己手动添加脚本部分，也不想在以后添加更多JavaScript依赖项时修改页面。我添加或删除的任何额外JavaScript依赖项的更改都只会反映在home.sources.cshtml中。
我该怎么做呢？
我正在查看@Html.Partial()，试图将Script部分作为部分视图添加到页面中，但似乎不起作用。

webpack

来源：https://stackoverflow.com/questions/73094712/how-to-get-an-asp-net-core-mvc-view-to-refer-to-a-script-section-in-another-file

3条答案

按热度按时间

fkaflof61#

我真的会做一个partial，因为它看起来更干净。所以我有一个partial，名为_ScriptsPartial，里面有我需要的所有js。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.tiny.cloud/1/srxbhbztd7jetvbg65d7si3gxatiku0ym7l8if3mda35vxxe/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

然后我把它用在我的布局中，就像这样，我做了很多局部

<!DOCTYPE html>
<html lang="en">
<head>
<partial name="_HeadPartial" />
</head>
<body>
    <header>
        <partial name="_NavPartial" />
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <partial name="_Notification" />
            @RenderBody()
        </main>
    </div>
    <footer >
        <partial name="_FooterPartial" />
    </footer>

   <partial name="_ScriptsPartial" />

    @await RenderSectionAsync("Styles", required: false)
    @await RenderSectionAsync("Scripts", required: false)
   
</body>
</html>

这看起来还可以：）

赞(0）回复(0）举报 2022-11-13

omjgkv6w2#

如果我理解你在这里做什么的话，这是一种非常奇怪的添加脚本引用的方式。
通常在MVC中，您会在布局页面中看到几行代码，如下所示：

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

它们指的是App_Start -〉BundleConfig.cs中的一组包
这是将.js文件添加到运行时页面的标准方法。

赞(0）回复(0）举报 2022-11-13

kknvjkwl3#

谢谢Jonespopolis给我这个方法。
实际上，我需要做的是创建一个Layout模板文件，指定我正在使用的是我已经使用过的现有Layout文件，并声明所有JS标记的位置。例如，下面是我的模板文件：

@{
    Layout = "_Layout";
}

@RenderBody()

@section Scripts
{
    <% for (index in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.js[index] %>"></script>
    <% } %>
}

此模板文件引用了我的原始_Layout.cshtml文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content here -->
</head>
<body>
    <!-- Header content here -->

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <!-- Footer content here -->
</footer>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

@await RenderSectionAsync("Scripts", required: false)行将呈现我在模板文件中创建的Script节。
从那里，我使用Webpack的Htmlwebpackplugin，配置如下：

plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            template: 'Views/Shared/PageTemplate.cshtml',
            filename: '../../Views/Shared/home.sources.cshtml',
            minify: false
        }),
    ],

运行webpack命令将得到一个包含模板文件中所有内容的home.source.cshtml文件，但它显示了home.cshtml所需的实际JS引用。剩下的就是通过在文件开头插入以下内容，使该文件成为页面的布局：

@{
    Layout = "home.sources";
}

运行应用程序后，我会看到一个主页，上面下载了所有正确的JS标签！现在，如果我改变了我的JS依赖项，我再也不需要担心生成标签或将标签插入页面，因为所有这些都已经自动化了，这正是我想要的！

赞(0）回复(0）举报 2022-11-13

我来回答

webpack 如何让ASP.NET核心MVC视图引用另一个文件中的脚本部分？

3条答案

相关问题

热门标签

最新问答