ASP.NET Core MVC Razor视图创建横向双DataGrid带中间按钮UI

你可以借助Bootstrap栅格系统快速实现这种横向布局，无需手写大量复杂CSS。以下是适配需求的完整Razor视图代码示例：

<!-- 若项目未引入Bootstrap，可添加这行引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />

<div class="container mt-4">
    <div class="row align-items-stretch">
        <!-- 左侧DataGrid容器 -->
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <h5>左侧数据网格</h5>
                </div>
                <div class="card-body">
                    <table class="table display table-bordered" id="LEFT_DATATABLE">
                        <!-- 表格内容由业务逻辑填充 -->
                    </table>
                </div>
            </div>
        </div>

        <!-- 中间按钮区域 -->
        <div class="col-md-2 d-flex flex-column justify-content-center gap-2 p-3">
            <button type="button" class="btn btn-primary">添加到右侧</button>
            <button type="button" class="btn btn-secondary">移除到左侧</button>
            <button type="button" class="btn btn-danger">清空选中项</button>
        </div>

        <!-- 右侧DataGrid容器 -->
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <h5>右侧数据网格</h5>
                </div>
                <div class="card-body">
                    <table class="table display table-bordered" id="RIGHT_DATATABLE">
                        <!-- 表格内容由业务逻辑填充 -->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 可选：引入Bootstrap JS以支持按钮交互效果 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

关键细节说明： #

• 栅格布局：用row和col-md-5/col-md-2划分区域，中等及以上屏幕（≥768px）保持横向排列，小屏幕自动堆叠为垂直布局，兼顾响应式体验。
• 按钮垂直居中：中间区域通过d-flex flex-column justify-content-center实现按钮垂直居中，gap-2控制按钮间距。
• 风格统一：沿用你提供的card、table类名，保持与现有代码风格一致。

若项目未使用Bootstrap，也可通过原生CSS实现布局：

<style>
    .grid-container {
        display: flex;
        gap: 20px;
        padding: 20px;
        align-items: stretch;
    }
    .datagrid-wrapper {
        flex: 1;
    }
    .button-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }
    /* 响应式适配 */
    @media (max-width: 768px) {
        .grid-container {
            flex-direction: column;
        }
        .button-group {
            flex-direction: row;
            justify-content: center;
        }
    }
</style>

<div class="grid-container">
    <div class="datagrid-wrapper">
        <div class="card-body">
            <table class="table display table-bordered" id="LEFT_DATATABLE"></table>
        </div>
    </div>

    <div class="button-group">
        <button type="button" class="btn btn-primary">添加到右侧</button>
        <button type="button" class="btn btn-secondary">移除到左侧</button>
        <button type="button" class="btn btn-danger">清空选中项</button>
    </div>

    <div class="datagrid-wrapper">
        <div class="card-body">
            <table class="table display table-bordered" id="RIGHT_DATATABLE"></table>
        </div>
    </div>
</div>

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