如何在项目中正确存储相同的 html 块？我想在不同的视图中使用相同的块

Posted 2023-04-09

【中文标题】如何在项目中正确存储相同的 html 块？我想在不同的视图中使用相同的块

【英文标题】：How to store identical html blocks in a project correctly? I want to use the same block in different views

【发布时间】：2021-11-03 06:41:54

【问题描述】：

我有一个以模态方式打开的块，用于从列表中进行选择。我不想将它嵌入到每个视图中。我希望这通过 Razor 或 C# 发生。我认为将其存储在 _Layout.cshtml 中是错误的（我可能是错的）。

<label hidden id="selectionInitiator"></label>
<label hidden id="sourceList"></label>
<div id="modalDialog" class="modal fade">
    <div id="dialogContent" class="modal-dialog">
        <div style="background:white; padding:15px; border-radius:5px;">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" area-hidden="true">X</button>
                <h4>Выберите элемент из списка</h4>
            </div>
            <div id="modalContainer" class="modal-body">
                <div class="treeItems" id="treeRoot">
                    <!-- Dymanical -->
                    Загрузка данных...

                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

为什么你认为将它存储在_Layout.cshtml中是错误的？如果将它存储在布局中，它将显示在布局为_Layout.cshtml的每个视图中。

【参考方案1】：

这种模式框的可重用代码应该在_Layout.cshtml 文件中。否则，您将不得不记住并添加所有需要模态框的页面。

但是，如果您不想将 html 放入 _Layout.cshtml 文件中，那么您必须将其包含在您需要的所有视图中。为此，您可以执行以下操作：

将 html 移动到局部视图，调用它_ModalBox.cshtml 在您需要的所有页面中包含部分视图 使用 javascript 隐藏/显示模式（我猜你已经这样做了）

首先将视图移动到名为_ModalBox.cshtml 的部分文件。将此文件保存在Shared 文件夹中。

然后像这样在页面中包含视图：

@await Html.PartialAsync("_ModalBox.cshtml")

注意：您可以将_ModalBox.cshtml 部分视图添加到_Layout.cshtml 文件中。那将是更好的做法。