如何使用ASP.NET MVC展示服务流程的跟踪线效果

1. 调整控制器查询逻辑 #

原有查询存在未按规则排序、未预加载关联实体的问题，调整后可直接输出符合展示要求的有序数据集：

// 需引入命名空间：using System.Data.Entity;
public ActionResult Display(int? id) // Service's ID passed from another property
{
    if (id == null)
    {
        return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
    }
    // 预加载关联的Process实体，按服务序列字段升序排序
    var serviceDetails = db.ServiceDetails
        .Include(sd => sd.Process)
        .Where(x => x.ServiceID == id)
        .OrderBy(x => x.ServiceSequence)
        .ToList();
    return View(serviceDetails);            
}

2. 视图层实现跟踪线效果 #

采用纯CSS实现节点连线效果，无额外第三方依赖，匹配参考示例图的线性跟踪样式：

2.1 声明强类型模型 #

在视图顶部添加模型引用：

@model IEnumerable<ServiceDetail>

2.2 配套样式定义 #

<style>
/* 流程跟踪容器 */
.process-tracker {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 50px 20px;
}
/* 贯穿所有节点的基准连接线 */
.process-tracker::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ddd;
    z-index: 1;
}
/* 单个流程节点 */
.process-node {
    position: relative;
    z-index: 2;
    width: 18%;
    text-align: center;
}
/* 节点圆形标识 */
.node-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    margin: 0 auto 12px;
}
/* 节点下方的详情卡片 */
.detail-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px;
    margin-top: 12px;
    text-align: left;
    font-size: 14px;
}
</style>

2.3 页面结构渲染 #

遍历已排序的服务详情列表，逐一生成流程节点和对应详情：

<div class="container">
    <h3>服务全流程跟踪</h3>
    <div class="process-tracker">
        @foreach (var detail in Model)
        {
            <div class="process-node">
                <div class="node-circle">
                    @detail.ServiceSequence
                </div>
                <h5>@detail.Process.ProcessName</h5>
                <div class="detail-card">
                    <p>服务说明：@detail.ServiceDetailDescription</p>
                    <p>预计完成时长：@detail.TimeToComplete.ToString(@"hh\:mm")</p>
                </div>
            </div>
        }
    </div>
</div>

3. 可选适配扩展 #

• 若需要实现已完成流程的连线高亮，可根据业务实际进度，动态计算已完成节点的占比，在基准线上叠加一段同高度的高亮色线条，设置对应宽度即可
• 移动端场景下，可修改CSS将flex横向排列改为纵向排布，将水平基准线调整为垂直基准线，即可适配小屏幕展示，无需改动后端逻辑
• 若单服务下的流程节点数量较多，可调整.process-node的宽度占比，配合横向滚动容器适配更多节点

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