本例子通过Websharp在页面上动态地显示一个列表框，列表框里面包含几个人名。这里只是演示,人名从数组中得到,而实际项目开发中数据往往都是从数据库中读出来的. 这个例子会用到Websharp中的一个循环块元素（Loop Block Element）。不用担心，Websharp只有很少的几种元素，不需要花大时间去学习。
例子说明
现有人名Mike、John、Tom和Rose，希望在列表框中显示出来，如下图所示。
用一般的JSP实现
代码如下，在html中嵌入了jsp代码，一个循环把人名都输出来。但这样的代码很不美观，“<%”、“%>”等这些jsp标签和html代码混合在一起，显得很杂乱。如果对于更复杂的程序，可读性就更低了。
<%
String title="Name List";
String[] names={"Mike","John","Tom","Rose"};
%>
<html>
<body>
<H3>
<%=title%>
</H3>
<select size="5">
<%for(int i=0;i<names.length;i++)
{ %>
<option value="<%=i %>">
<%=names[i] %>
</option>
<%} %>
</select>
</body>
</html>
用Websharp来实现
1. 用可视化的工具Dreamweaver或者FrontPage创建一个新的HTML页面select.htm, 放到Web目录下面。在页面上添加一个下拉列表元素<select>，然后修改HTML源码，结果应该如下所示：
<html>
<body>
<H3>
{%title%}
</H3>
<select size="5">
<!-- begin loop:list -->
<option value="{%index%}">
{%name%}
</option>
<!-- end loop:list -->
</select>
</body>
</html>
说明：
<select></select>元素里面出现了两个奇怪的标记：<!-- begin loop:list -->和<!-- end loop:list -->,这是Websharp中循环块元素（Loop Block Element），这两个标记总是成对出现，你可以认为它们就是一个循环，包含在标记之间的代码可以动态地重复多次。{%index%}和{%name%}就是循环块里面的模板变量，可以在每一次循环中赋予它们不同的值。
此段代码和上面的“一般jsp实现”的代码类似，但它是一个模板，不包含任何jsp标签和jsp语句，这样的代码非常的工整，可维护性特别的好。
2. 第二步需要编写程序代码来调用模板。创建select.jsp,和select.htm放在同一目录，包含如下内容：
<%@ page import="websharp.core.*,websharp.web.*,websharp.util.*"%>
<%
Websharp websharp = new Websharp("select.htm", "", request, response);
websharp.setValue("title","Name List");
String[] names={"Mike","John","Tom","Rose"};
for(int i=0;i<names.length;i++)
{
ValueNode list=websharp.addLoop("list");
list.setValue("index",i);
list.setValue("name",names[i]);
}
websharp.render( null);
%>
说明：
第一行：创建WebSharp实例并引用了先前创建模板select.htm
第二行：给模板变量{%title%}赋值"Name List".
剩下几行是一个for循环，在循环体里面，每一次循环都创建一个叫“list”的ValueNode子节点，映射到模板中的list循环块，即addLoop("list")函数的参数“list”和select.htm中<!-- begin loop:list -->中的名称必须一致，表示这个ValueNode将会给list循环块赋值。 然后再对{%index%}和{%name%}这两个模板变量元素赋予不同的值。。
最后一行：render（）输出执行结果。
运行结果
![clip_image002[1]](https://p-blog.csdn.net/images/p_blog_csdn_net/coolmasoft/453187/o_clip_image002%5B1%5D.jpg)
此页面的源代码是：
<html>
<body>
<H1>
Name List
</H1>
<select size="5">
<option value="0">
Mike
</option>
<option value="1">
John
</option>
<option value="2">
Tom
</option>
<option value="3">
Rose
</option>
</select>
</body>
</html>
小结
从本例子中你可以了解Websharp中的Loop Block元素的使用，其本质就是把重复多次的代码用Loop Block元素表示出来，如例子中的<option></option>要多次出现，就要用Loop Block元素把它包含起来，并通过ValueNode元素对其动态地赋值。你也许觉得Websharp有点繁琐，但它的可读性非常的好，特别对于将来几百行甚至上千行的HTML文件来说，用Websharp无疑大大地减少了开发、调试的烦恼。而且，后面我们将介绍代码框架生成工具，直接根据设计的模板生成java代码框架，减少手写代码量；另外，我们也可以用到DataBind技术，大大减少代码量，这都会在后面介绍。
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
