4.9 ユーザーインターフェイスの設計と実装 (DIV+CSS、編集可能な TreeView ユーザーコントロール)_html/css

4.9 ユーザーインターフェイスの設計と実装 (DIV+CSS、編集可能な TreeView ユーザーコントロール)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:29:48

オリジナル

1422 人が閲覧しました

4.9.1 Div+Css レイアウト

どのシステムも、その値を反映するために最終ユーザーと対話する必要があります。オンライン試験システムも例外ではありません。このシステムは Web に基づいているため、システムとユーザー間の対話は HTML を通じて行われます。インターフェースのデザインにはレイアウトと美化が必要だからです。以下では、このシステムが div+css を使用してユーザーインターフェイスをレイアウトし、美しくする方法を紹介します。以下の図 4-19 は、システムの一般的なレイアウトを示しています。

図 4-19 全体のレイアウト

図 4.20 に示すとおり。レイアウトは 4 つのブロックに分かれています。上はタイトル表示部分です。真ん中に2つの部分があります。左側にはメニューバーがあります。右側はコンテンツエリアです。一番下には著作権情報セクションがあります。上記の HTML コードと CSS コードを見てみましょう

< タイトルなし
< rel ="stylesheet" type ="text/css" />

div id ="メイン" > < div id="メニュー" > < div > ;
< div id ="bottom" >

{} {
マージン:0px;
フォントサイズ: 40px;
幅:100%;
背景色:#3399CC ;
color:#FFFFFF
} #main
{} {

width:100%;
#menu
{} {
width: 10%; :left;
背景色:#33CCCC;
#コンテンツ
{} {
高さ:100%;
背景色:#CCCCCC;
{} {
width:100%;
height:60px;
background-color:#CCFF00;
}

CSS と div レイアウトを使用すると、テーブルレイアウトを使用するよりも Web ページのコードが簡単に見えるだけではありません。そしてそれはさらにシンプルです。 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',' s1 "2 ')" 2

= "TreeView_SelectNode (TreeView1_data, this,' Treeview1t1 '); & gt; の値がリンクタグ内に表示されます。そして、TreeNodeのTextプロパティにhtmlタグ付きの文字列を代入すると、にTreeViewがそのまま追加されます。たとえば、Text="Child Node" は次の HTML コードを表示します

href="javascript:__doPostBack('TreeView1','s1"") 2')" 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代码如下

生成される HTML コードは次のとおりです

< body >

< フォーム名 ="form1" メソッド ="post" アクション ="Default2.aspx" id = "form1" > < div > < 入力タイプ ="__EVENTTARGET" id ="__EVENTTARGET"

< 入力タイプ ="hidden" " 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() id="LinkButton1" href="javascript :__doPostBack('LinkButton1','')" > ;/ a > < link href 属性は、javasciprt 関数 __doPostBack の呼び出しです。この関数は Asp.net によって自動的に生成されます。上記の __doPostBack 関数の実装があります。 LinkButton リンクをクリックするとそれが確認できます。 __doPostBack 関数はブラウザーで実行されます。この関数は、LinkButton1 を __EVENTTARGET 隠しフィールドの値に設定します。この例では、__EVENTARGUMENT 隠しフィールドを使用しないため、__doPostBack の 2 番目のパラメーターは空に設定されます。このため、イベントには関連するパラメーターは必要ありません。レコードイベントトリガー ID とイベント関連パラメーターを変更した後、__doPostBack はフォームの submit メソッドを呼び出してポストバックを開始します。サーバーがポストバックを受信すると、__EVENTTARGET の隠しフォームを見ることで、どの処理関数を呼び出すかがわかります
下の図 4-22 は、LinkButton をクリックしたときにサーバー側のイベント処理関数によって監視される __EVENTTARGET の値を示しています。

図 4-22 __EVENTTARGET 変数監視図

上記の分析により、独自のイベントをコントロールに追加できます。このコントロールは 4 つのイベントを提供します。イベントの追加も含めて。イベントを編集します。イベントを保存します。イベントを削除します。具体的な実装を以下に示します

最初にイベントをトリガーするリンクは次のとおりです

Add
編集

 削除

 保存

サーバー側のPage_Load処理関数の__EVENTTARGETの値を確認し、対応する処理コードを実行してください。

boid page_load（オブジェクト送信者、eventArgs e）

{
if（request.form ["__ eventTarget"]！= null）
{
string action = request.form ["__ eventTarget"]。toString（）;
switch (アクション)
{
case "Add":
//do Add
休憩。
case "削除":
//do 削除
break;
case 「保存」:
//保存します
break;
case 「編集」:
// 編集する
break;
}
}
}