Question

我的表单在 person 文本框旁边有一个按钮，可以显示 person Bootstrap模式搜索窗口。

我放入部分页面并引用它的html

   @{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl1");}

   @{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl2");}

添加了一个文本框和按钮。

然后我将一个bootstrap模式html添加到每页只需出现一次的页面

   @{await Html.RenderPartialAsync("_PersonControlModal");}

然后是上面的javascript事件代码和css。

@section Header {
    <script src="~/css/personcontrolscript.css"></script>
}

和

@section Scripts {
    <script src="~/js/personcontrolscript.js"></script>
 }

我可以将html放入htmlhelper但是如果我想将它添加到页面中，我还需要添加3个页面引用。

有没有更简单的方法？

Answer 1

有一些方法可以减少这种情况，但这些方法需要权衡利弊。所以这取决于哪种方法最适合您的需求。

因此，例如，您可以通过两种不同的方法消除在标题部分中添加.css引用：

1）您可以将这些样式放在已经为任何页面加载的global.css文件中;或
2）你可以在你的html上使用内联样式并消除这些css类。

这两种解决方案当然都有缺点。方法一意味着global.css样式的大小将更大，并且即使在站点上使用的第一页不需要它们也需要更多时间加载。方法2似乎面对传统的智慧，你几乎不应该使用内联样式，它会使标记更加冗长。但是，每当您在页面上有人控制时，任何一种解决方案都可以让您无需包含单独的~/css/personcontrolscript.css引用。

至于需要包含〜/ js / personcontrolscript.js，可以通过以下两种方式之一解决：
1）将javascript代码包含在为每个页面加载的global.js文件中;或
2）将该javascript代码内联到_PersonControlPartialHtml中并向其中添加代码以确保它仅在第一次在页面上使用partial时才被注入。

对于bootstrapModel，我对该代码的外观不太清楚，所以我无法肯定地说，但可能它可以利用类似于针对css或js提到的方法。

关于渲染部分内容，我不认为有任何方法可以消除它，因为它是您要添加到页面的功能的主要表示。

如何将相关的部分页面/ HtmlHelpers，脚本和CSS保持在一起而不是单独的引用

1 个答案: