控制以呈现流程图

Question

这可能是一个非常愚蠢的问题，但这里什么都没有：是否有任何asp网络控件，ajax控件工具包或html / css标签来创建像radiobuttonlist这样的东西，与通过线或虚线连接的所有radiobuttons水平对齐？我本来可以上传一张照片，但是我在以前的赏金上失去了所有的声望，而且我必须至少有10个代表才能上传图片。

基本上，我有一个网页表单，用户输入一些数据，然后该数据有4个步骤：草稿，完成，发送到批准，批准。我希望在页面顶部有这4个步骤，并根据当前状态，检查该​​功能区上的相应状态。

更新：

一张价值1000字的照片所以这就是我所需要的：

此控件也应该被控制＆＃34;在代码隐藏中。

Answer 1

您可以使用html / css轻松完成此操作。

<div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>

还有一些基本的CSS

 .bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}

.bubble.active
{
background:red;
}

.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}

查看此fiddle。只需随意添加/删除活动类到气泡。你也可以添加一个完成的类或其他东西。