4.9 Design and implementation of user interface (DIV CSS, editable TreeView user control)_html/css_WEB-ITnose

4.9.1 Div CSS layout

Any system must interact with the final user to reflect its value. Online examination systems are no exception. Because this system is based on the web, the interaction between the system and the user is done through HTML. Because the design of the interface requires layout and beautification. Below we introduce how this system uses div css to layout and beautify the user interface. Figure 4-19 below shows the general layout of the system.

Figure 4-19 Overall layout

As shown in Figure 4.20. The layout is divided into four blocks. Above is the title display part. There are two parts in the middle. On the left is the menu bar. On the right is the content area. At the bottom is the copyright information section. Let’s take a look at the html code and css code above

< html >
< head >
< title > Untitled document
< link href ="style.css" rel ="stylesheet" type ="text/css" />

< body >
< div id ="head" > Online Examination System
< div id ="main" >
< div id ="menu" > Menu Bar
< div id ="content" > content area

< div id ="bottom" > Copyright 2008

The following is the code of the css file
body
{} {
margin:0px;
padding:0px;
text-align:center;
font-size:40px; 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;
}


Using css and div layout not only makes the web page code easier to understand than using table layout. And it’s also simpler. We have a good separation of content and style through the separation of css files and html. Make it easier to modify the style of the entire site.

4.9.2 Editable tree control

table>A custom tree control is also implemented in this system. Because the TreeView control in Asp.net2.0 cannot be edited, added and deleted. In order to make it more convenient for users to manage chapters of a certain subject. The system provides the function of displaying chapters in a tree structure. And you can add, delete, and modify chapter nodes through the right-click menu on the tree structure. As shown in Figure 4-20.

Figure 4-20 Editable tree menu

The custom control is implemented based on the Asp.net 2.0 TreeView control. By looking at the html code generated by the TreeView control, it is found that the html code generated by the TreeNode whose Text attribute is "child node" is as follows

href="javascript :__doPostBack('TreeView1','s1""2')"

onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');"

id="TreeView1t1">

Child node

The value of the Text attribute will be displayed in the link tag. And if a string with html tag is assigned to the Text property of TreeNode, TreeView will be added to without modification. For example, Text="Child node" will present the following html code

href="javascript:__doPostBack( 'TreeView1','s1""2')" onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');"

id="TreeView1t1">

The child node

uses this feature of TreeView to make the TreeView node appear editable. For example, you can directly assign the input tag to the Text property of TreeNode. Figure 4-21 below shows the effect of setting the Text attribute of TreeNode to ""

图4-21 节点显示效果

这样就可以编辑添加新的节点了。下面介绍树形控件是如何触发运行保存，编辑，删除，添加节点代码的。由于页面是在浏览器中呈现的。而添加,删除章节代码却放在服务器端。如何才能在浏览器中触发执行服务器端的处理函数那？下面先分析下Asp.net的事件回传机制。在浏览器中只能通过javascript来捕获用户操作。比如点击按钮。移动鼠标等动作。当然在IE中也可以用vbscript ，但是javascript还是在浏览器中占统治地位的脚本语言。所以Asp.net在浏览器中捕获用户操作事件也是用javascript来实现的。Asp.net首先通过脚本在浏览器中捕获触发事件，然后用隐藏字段来记录触发事件的控件Id和相关的参数信息。最后再通过Post请求进一步将处理交给服务器端。服务器端接收到Post请求。通过读取隐藏字段中控件的Id和事件参数来调用相应的事件处理函数。下面举个简单的例子来说明这个过程。

先新建一个aspx页面然后添加一个LinkButton一个Label代码如下

   

    

        LinkButton

 

       

The button processing function is as follows

protected void LinkButton1_Click(object sender, EventArgs e)

{

       Label1.Text = "LinkButton1 is clicked !";

}

The html code generated by this page is as follows

< body >
< form name ="form1" method ="post" action ="Default2.aspx" id ="form1" >
< div >
< input type ="hidden" name ="__EVENTTARGET " id ="__EVENTTARGET" value ="" />
< input type ="hidden" name ="__EVENTARGUMENT" id ="__EVENTARGUMENT" value ="" />

< script type ="text/javascript" >
// 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 (); t;
& lt; / script >
                                                                                                                                                                
                                                                                                                                                        >





Pay attention to the underlined part. LinkBotton's html on the client is a hyperlink. The link href attribute is a call to the javasciprt function __doPostBack. This function is automatically generated by Asp.net. There is an implementation of the __doPostBack function above. It can be seen that when the LinkButton link is clicked. The __doPostBack function will be run in the browser. This function sets LinkButton1 to the value of the __EVENTTARGET hidden field. This example does not use the __EVENTARGUMENT hidden field, so the second parameter of __doPostBack is set to empty. Because of this, the event does not require any relevant parameters. After modifying the record event trigger ID and event-related parameters, __doPostBack calls the submit method of the form to start postback. When the server receives the postback, you can know which processing function to call by looking at the __EVENTTARGET hidden form

Figure 4-22 below shows the server-side event processing function monitoring the value of __EVENTTARGET when we click the LinkButton.

Figure 4-22 __EVENTTARGET variable monitoring chart

With the above analysis, we can add our own events to our controls. This control provides 4 events. Including adding events. Edit event. Save event. Delete event. Our specific implementation is given below

The link that triggers the event first is as follows

Add Edit

Delete

Save

Check the value of __EVENTTARGET in the Page_Load processing function on the server side and then execute the corresponding processing code.

    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等需要用脚本才能回传的控件才会自动生成。因为提交按钮是不需要通过脚本来回传的。