如何在Razor/C#项目中正确存储通用HTML块实现多视图复用

关于是否放在_Layout.cshtml的判断 #

你的判断是合理的，只有当全站绝大多数页面都需要用到这个选择模态框时，才建议放到全局布局页中，否则会增加所有页面的无用资源加载，反而降低页面性能。

常用复用方案 #

方案1：Razor 局部视图（无逻辑场景首选，易用性最高） #

这是最适配你当前场景的方案，不需要额外编写C#逻辑，仅需封装静态HTML片段即可：

1. 在项目的Views/Shared目录下新建名为_SelectionModal.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>

2. 在需要用到该模态框的视图中，任意位置插入以下代码即可引入：

@await Html.PartialAsync("_SelectionModal")

如果多个同业务线的页面都需要用到，可以将上述引入代码写入对应Controller目录下的_ViewStart.cshtml，该目录下的所有视图会自动引入，无需逐个手动添加。

方案2：Razor 视图组件（需要动态逻辑场景首选） #

如果后续你需要给模态框增加动态配置能力，比如根据页面场景自定义标题、默认加载的数据源、弹窗尺寸等，更推荐使用视图组件实现：

1. 新建视图组件类：

public class SelectionModalViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(string title = "Выберите элемент из списка", string loadingText = "Загрузка данных...")
    {
        // 可在这里添加业务逻辑，比如权限校验、默认数据查询等
        ViewBag.Title = title;
        ViewBag.LoadingText = loadingText;
        return View();
    }
}

2. 在Views/Shared/Components/SelectionModal目录下新建Default.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>@ViewBag.Title</h4>
            </div>
            <div id="modalContainer" class="modal-body">
                <div class="treeItems" id="treeRoot">
                    <!-- Dymanical -->
                    @ViewBag.LoadingText
                </div>
            </div>
        </div>
    </div>
</div>

3. 在需要使用的视图中调用，可自定义参数：

<!-- 默认参数调用 -->
@await Component.InvokeAsync("SelectionModal")

<!-- 自定义参数调用 -->
@await Component.InvokeAsync("SelectionModal", new { title = "请选择部门", loadingText = "部门列表加载中..." })

额外优化建议 #

• 可以将模态框的内联样式抽离到独立CSS文件中统一管理，后续修改样式无需调整封装的视图代码
• 对应的模态框显示/隐藏、数据加载的JS逻辑也可以同步封装为独立JS文件，引入视图时一同加载即可

内容的提问来源于stack exchange，提问作者Nik Volk