ASP.NET Core MVC如何实现类似Vue Slots的组件内容分发功能？

针对你想要复用统一模态框模板、嵌套不同表单内容的需求，ASP.NET Core MVC有几种成熟的实现方案，以下是具体思路和代码示例：

一、使用视图组件（ViewComponent）实现可嵌套内容的模态框 #

视图组件是MVC中复用UI逻辑的核心方式，适合封装带统一样式/脚本的基础组件，同时支持动态填充内容。

1. 创建基础模态框视图组件 #

先定义视图组件类，接收模态框的配置参数：

public class ModalViewComponent : ViewComponent
{
    // 可传入标题、自定义类名等参数
    public IViewComponentResult Invoke(string title, string cssClass = "")
    {
        ViewData["ModalTitle"] = title;
        ViewData["ModalClass"] = cssClass;
        return View();
    }
}

然后在Views/Shared/Components/Modal/Default.cshtml中编写统一的模态框模板，预留内容插槽：

<div class="modal fade @ViewData["ModalClass"]" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@ViewData["ModalTitle"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 类似Vue Slot的内容区域，通过Section填充 -->
                @RenderSection("ModalContent", required: true)
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 全局统一的模态框脚本 -->
<script>
    $(document).on('hidden.bs.modal', '.modal', function () {
        $(this).find('.modal-body').empty();
    });
</script>

<!-- 全局统一的模态框样式 -->
<style>
    .modal.custom-modal {
        /* 自定义统一样式规则 */
    }
</style>

2. 在业务视图中使用组件 #

在需要模态框的页面，通过Section填充具体的表单内容：

@{
    ViewData["Title"] = "编辑用户";
}

<!-- 填充模态框的内容插槽 -->
@section ModalContent {
    <!-- 可以是EditorTemplate、局部视图或直接写表单 -->
    @await Html.PartialAsync("_UserEditForm", Model)
}

<!-- 调用基础模态框组件 -->
@await Component.InvokeAsync("Modal", new { title = "编辑用户信息", cssClass = "custom-modal" })

二、自定义Tag Helper实现类Vue组件的写法 #

如果想要更贴近你示例中的<MyModal>标签语法，可以自定义Tag Helper，实现更直观的组件调用方式。

1. 创建ModalTagHelper类 #

[HtmlTargetElement("my-modal")]
public class ModalTagHelper : TagHelper
{
    [HtmlAttributeName("class")]
    public string CssClass { get; set; }

    [HtmlAttributeName("title")]
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // 替换标签为div，构建模态框基础结构
        output.TagName = "div";
        output.Attributes.Add("class", $"modal fade {CssClass}");
        output.Attributes.Add("tabindex", "-1");
        output.Attributes.Add("role", "dialog");

        // 获取标签内部的内容（即插槽内容）
        var childContent = await output.GetChildContentAsync();
        var modalBodyContent = childContent.GetContent();

        // 拼接完整的模态框HTML
        var modalHtml = $@"
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title'>{Title}</h5>
                        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        {modalBodyContent}
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-secondary' data-dismiss='modal'>取消</button>
                        <button type='button' class='btn btn-primary'>保存</button>
                    </div>
                </div>
            </div>";

        output.Content.SetHtmlContent(modalHtml);

        // 添加统一的脚本和样式
        output.PostContent.AppendHtml(@"
            <script>
                $(document).on('hidden.bs.modal', '.modal', function () {
                    $(this).find('.modal-body').empty();
                });
            </script>
            <style>
                .modal.custom-modal {
                    /* 统一样式 */
                }
            </style>");
    }
}

2. 注册Tag Helper #

在_ViewImports.cshtml中添加Tag Helper注册：

@addTagHelper *, YourProjectAssemblyName

3. 在视图中调用 #

完全贴合你想要的写法，直接嵌套内容：

<my-modal class="custom-modal" title="创建新用户">
    <!-- 插槽内容：创建用户的表单 -->
    @await Html.PartialAsync("_UserCreateForm")
</my-modal>

三、简单方案：部分视图+ViewData传递内容 #

如果不需要复杂逻辑，也可以用基础的部分视图实现：

1. 创建共享模态框模板_ModalTemplate.cshtml #

<div class="modal fade @ViewData["ModalClass"]" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@ViewData["ModalTitle"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 通过ViewData传递内容视图和模型 -->
                @await Html.PartialAsync((string)ViewData["ContentPartial"], ViewData["ContentModel"])
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 统一脚本和样式 -->
<script>/* 全局逻辑 */</script>
<style>/* 统一样式 */</style>

2. 在业务视图中调用 #

@{
    ViewData["ModalTitle"] = "编辑订单";
    ViewData["ModalClass"] = "order-modal";
    ViewData["ContentPartial"] = "_OrderEditForm";
    ViewData["ContentModel"] = Model;
}

@await Html.PartialAsync("_ModalTemplate")

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