4.9.1 div+css布局
任何系统都要和最终的用户交互才能体现它的价值。在线考试系统也不例外。因为本系统是基于web的系统因此系统和用户交互的就是通过html来完成的。因为界面的设计需要布局和美化。下面我们介绍下本系统是如何利用div+css来给用户界面布局和美化的。下图4-19展示了系统的大致布局。
图4-19 整体布局
如图4.20所示。该布局分四大块。上面是标题显示部分。中间分两部分。左边是菜单栏。右边是内容区域。最下面是版权信息部分。下面看看上图html代码和css代码
无标题文档 title >
head >
在线考试系统 div >
菜单栏 div >
内容区域 div >
div >
版权所有 2008 div >
body >
html >
下面是css文件的代码
body
{} {
    margin:0px;
    padding:0px; 
    text-align:center; 
    font-size:40px;
}
#head 
{} {
   width:100%;
   height:80px;
   background-color:#3399cc;
   color:#ffffff;
}
#main
{} {
    width:100%;
    height:480px;
}
#menu
{} {
    width:10%;
    height:100%;
    float:left;
    background-color:#33cccc;
}
#content
{} {
    width:90%;
    height:100%;
    float:right;
    background-color:#cccccc;
}
#bottom
{} {
    width:100%;
    height:60px;
    background-color:#ccff00;
}
利用css和div布局不但网页代码比用table布局看起来更加的容易理解。而且也更简洁。我们通过css文件和html分离很好的分离了内容和样式。让整个站点修改样式更加的简单。
4.9.2可编辑的树形控件
在本系统中还实现了一个自定义的树形控件。由于asp.net2.0 中的treeview 控件是无法进行编辑, 添加和删除节点的。为了能够使用用户更加的方便的管理某一科目的章节。系统提供了以树形结构显示章节的功能。并且可以在树形结构上通过右键菜单添加，删除，修改章节节点。如图4-20 所示。
图4-20 可编辑树形菜单
自定义控件是在asp.net 2.0 treeview控件的基础上实现的。通过查看treeview控件生成的html代码发现text 属性为”子结点”的treenode生成的html代码如下所示
   href=javascript:__dopostback('treeview1','s12')
   onclick=treeview_selectnode(treeview1_data, this,'treeview1t1');
   id=treeview1t1>
子结点
其中text属性的值会显示在链接标记内。而且如果将带有html标记的字符串赋给treenode的text属性，treeview会不加修改的添加到中。比如text=” 子结点”，会呈现如下html代码
 href=javascript:__dopostback('treeview1','s12') onclick=treeview_selectnode(treeview1_data, this,'treeview1t1');
id=treeview1t1>
子结点
就是利用treeview这一特点，可以实现让treeview节点表现出可编辑的状态。比如可以直接把input标记赋值给treenode的text属性。下图4-21是将treenode得text属性设为””的效果
图4-21 节点显示效果
这样就可以编辑添加新的节点了。下面介绍树形控件是如何触发运行保存，编辑，删除，添加节点代码的。由于页面是在浏览器中呈现的。而添加,删除章节代码却放在服务器端。如何才能在浏览器中触发执行服务器端的处理函数那？下面先分析下asp.net的事件回传机制。在浏览器中只能通过javascript来捕获用户操作。比如点击按钮。移动鼠标等动作。当然在ie中也可以用vbscript ，但是javascript还是在浏览器中占统治地位的脚本语言。所以asp.net在浏览器中捕获用户操作事件也是用javascript来实现的。asp.net首先通过脚本在浏览器中捕获触发事件，然后用隐藏字段来记录触发事件的控件id和相关的参数信息。最后再通过post请求进一步将处理交给服务器端。服务器端接收到post请求。通过读取隐藏字段中控件的id和事件参数来调用相应的事件处理函数。下面举个简单的例子来说明这个过程。
先新建一个aspx页面然后添加一个linkbutton一个label代码如下
linkbutton
按钮的处理函数如下
    protected void linkbutton1_click(object sender, eventargs e)
    {
        label1.text = linkbutton1 is clicked !;
}
该页面生成的html代码如下
div >
// var theform = document.forms['form1'];
if (!theform) {
    theform = document.form1;
}
function __dopostback(eventtarget, eventargument) {
    if (!theform.onsubmit || (theform.onsubmit() != false)) {
        theform.__eventtarget.value = eventtarget;
        theform.__eventargument.value = eventargument;
        theform.submit();
    }
}
//]]>
script >
id =linkbutton1  href =javascript:__dopostback('linkbutton1','') > linkbutton a >
         label span > div >
div > form >
body >
注意下划线部分，linkbotton在客户端的html是一个超级链接。该链接href属性是对javasciprt函数__dopostback的调用。该函数是asp.net自动生成的。上面有__dopostback函数的实现。可以看出当点击linkbutton这个链接时候。就会在浏览器中运行__dopostback函数。该函数把linkbutton1设为__eventtarget隐藏字段的value。这个例子没有用到__eventargument隐藏字段，所以__dopostback第二个参数设为了空。因为这个该事件不需要任何相关参数。修改了记录事件触发id和事件相关参数后__dopostback调用表单的submit方法开始回传。当服务器接收到回传后通过查看__eventtarget隐藏表单就可以知道该调用那个处理函数了
下图4-22是我们点击linkbutton时候在服务器端事件处理函数监视__eventtarget的值。
图4-22 __eventtarget变量监视图
有了以上分析我们就可以为我们的控件添加自己的事件了。该控件提供了4个事件。包括添加事件。编辑事件。保存事件。删除事件。下面给出我们的具体实现
首先触发事件的链接如下
添加
编辑
删除
保存
在服务器端的page_load处理函数里检查__eventtarget的值然后就可以执行相应的处理代码了。
protected   void  page_load( object  sender, eventargs e)
     {
        if (request.form[__eventtarget] != null)
        {
            string action = request.form[__eventtarget].tostring();
            switch (action)
            {
                case add:
                    //do add
                    break;
                case delete:
                   //do delete
                    break;
                case save:
                    //do save
                    break;
                case edit:
                    // do edit
                    break;
            }
        }
    }
注意__dopostback方法，只有页面上有linkbotton等需要用脚本才能回传的控件才会自动生成。因为提交按钮是不需要通过脚本来回传的。