动态生成Asp.net前台html显示
今天在msn上有人跟我说用asp.net做网站不想用控件了,我很奇怪。继续探讨下去发现原来他要解决的事情是前端页面的控件数量是在运行时才能决定的,而他一直认为那些控件只能拖到页面上去。我想了想,觉得还是有必要把如何在前端页面上动态生成控件的方法写一下,大牛们可以走了,这个就是给不知道的兄弟们大概的说一下。在前端代码中,可能我们看到只是像div ,span 这样的标签形成的布局层次。实际上,在后台,.net也给我们做好了控制层次。这样说比较抽象,下面来看一个小例子说明吧:
<div id="div1" runat="server">
<div id="subdiv1">
......
</div>
<div id="subdiv2">
.....
</div>
<div>
在上面的代码中,我们看到的是三个div形成的一个布局层次关系,div1包含两个子div,看起来只能是固定如此的布局。实际上在后台,.net会为div1做一个控制容器,在这个容器里面把两个子div加入进去,我们可以在后台找到容器里面找到他们并且进行处理。这个控制容器也有分层的概念,div1的控制容器包含subdiv1,subdiv2,两个子div也有自己的控制容器。对于所有的块级元素,都会属于自己的控制容器(关于块级元素和行内级元素的概念,可以自己上网上找找,属于html中的概念).这个控制容器,我们在后台可以通过 this.Controls取到。现在我们来做一个例子,来示意一个怎样动态的从数据库中读取数据生成一个导航栏,这个导航栏我用无序列表来实现(如何变成导航栏自己参考html的内容)。首先来看前端代码:
<div>
<ul id="ul" runat="server">
</ul>
</div>
可以看到前端的代码非常简单,只是加了一个无序列表的标签<ul>,但是必须声明这个列表运行在服务器端的,否则.net不会维护它的控制层次,我们也没有办法在后台对他进行控制,下面来看后台代码怎样动态的添加列表元素:
DataTable t = new DataTable();
da.Fill(t);
foreach (DataRow row in t.Rows)
{
Label label = new Label();
label.Text = row["room_type"].ToString();
ul.Controls.Add(new LiteralControl("<li>"));
ul.Controls.Add(label);
ul.Controls.Add(new LiteralControl("</li>"));
}
看一下后台的代码也很简单,首先从数据库里面提取出需要作为导航栏内容的表。对于表中的每一个元素,我们创建一个静态文本框,将需要显示到导航栏中的内容写入到静态文本框中,然后调用无序列表控制容器的增加控制元素方法,就可以将列表项添加到无序列表中了。对于在其他的块级元素中动态添加控件方法,完全可以参照上面的来做。