【正文】 前最常用的是使用 DIV+CSS 完成，小的局部布局使用表格（ Table），方便快捷，極大減少代碼量。 對 InsertItemTemplate模板 用 Table 美化布局 1. 選擇 InsertItemTemplate模板，對其用表格（ Table）進行美觀化處理。 圖 進入 InsertItemTemplate 模板 2. 點擊將光標移到“ 取消 ” 按鈕后 ，回車鍵使其下移，點“菜單”中表（ A），點“插入表”。 33 圖 回車 下移讓出空間 3. 在“插入表格”中輸入行數(shù)為 2，列數(shù)為 3，具體值如下 圖所示。圖 表格工具中行數(shù)，列數(shù)，指定寬度，邊框等都是要關(guān)注的數(shù)值。 34 圖 插入 2 行 3 列 Table 網(wǎng)格 圖 Table 網(wǎng)格 2 行 3 列 4. 將欄目，說明，排序及相對應(yīng)的 文本 框移入到表格中 ，然后刪除多余的“：” 。圖 。 圖 將對象移入表格之中 FormView1對象初 始顯示模式設(shè)定 將鼠標的箭頭移入 FormView1 對象之中， 點右鍵打開屬性窗口，找到屬性“ DefaultMode”，將其值 由“ ReadOnly” 改為“ Insert”，即顯示插入模式 ；寬度設(shè)為 90%。 圖 35 圖 設(shè)置 FormView1 對象的顯示模式為 Insert 網(wǎng)頁運行效果查看 在頁面右鍵打開 菜單，點擊“在瀏覽器中查看”。 注意：一定要保存更改。此處要多 多插 入一些數(shù)據(jù) 。 這是頁面的測試工作，要多多進行插入、編輯、刪除等操作，以判定代碼正確可靠性。 可以發(fā)現(xiàn)的問題是：（ 1）頁面 多數(shù) 操作 基本 正 確，但 頁面不好看 。 可否給出提示？ （ 3） 排序中輸入非數(shù)字時，出現(xiàn)錯誤。 提示為同名錯誤。先點擊選中 GriaView1 對象，點擊 打開“ GridView 任務(wù)”，點擊“自動套用格式”， 從中選取自己認可的格式。 36 在瀏覽器中查看的結(jié)果 ，頁 面好看 多 了。 圖 用自動套用格式美化 網(wǎng)頁操作提示 必須學(xué)會 1． 先點擊選中 GriaView1 對象，點擊 打開“ GridView 任務(wù)”，點“編輯列”。 再從“可用字段”中選擇中 TemplateField，點“添加”，增加一個模板列。圖 模板列操作。右點選 “ 刪除 ” ，點剪切 。 模板列 增加的 模板列 把普通列 轉(zhuǎn)換為 模板列 此列要轉(zhuǎn)換為 模板列 37 圖 編輯模板列 3 中的對象 剪切刪除按鈕 3． 點下拉框，點 Column[4]中的 ItemTemplate，右點選 “ 粘貼 ” 。 圖 刪除按鈕粘貼到 Column[4]中。% delete_bt(Eval(欄目 ).ToString()) %39。函數(shù) delete_bt存放在 CS代碼頁之中，必須用 public描述 。 注意 ： Eval(欄目 ).ToString()為數(shù)據(jù)源將欄目列的值傳遞過來。 38 圖 在 HTML 頁 中對 代碼 進行 修改 6． 在 的 CS 代碼 頁 中輸入 建立公共函數(shù) delete_bt(string bts)， 代碼為： return div onclick=\JavaScript:return confirm(39。)\刪除 /div。 此 行 cs代碼是 生成一段客戶端的 JavaScript 代碼，目地 返回一個彈出 式 的提示信息 窗口 ，供用戶選擇操作 。 39 圖 在 CS 頁中加入 提示 代碼 —生成 java 代碼 7． 設(shè)計后的界面如 圖 圖 設(shè)計好的界面 8． 運行時 刪除 操作界面如 圖 ：有詳細提示 信息 出現(xiàn)。修正錯誤的方法是：對同名的對象，將其中一個改為不同名即可。 2．進入 Html 代碼頁， 按圖 所示 找到同名的對象，修改 為不同名 即可。 2．設(shè)置 RegularExpressionValidator1驗證的四個屬性值： ControlToValidate=排序 TextBox，Display=Dynamic ， ErrorMessage=非數(shù)字 ， ValidationExpression=\d{1,3}。 圖 驗證控件的正則表達式 說明： ControlToValidate=排序 TextBox ：指明要驗證的 對象。 Display=Dynamic ：指明顯示的類型為動態(tài)，即只在顯示結(jié)果時占用空間。 此處為只允許輸入 1位至 3位的數(shù)字。 2．學(xué)習(xí)掌握 GridView 對象和 FormView 對象的用法，掌握數(shù)據(jù)源的基本用法。 學(xué)習(xí)一些測試技術(shù)。 4 新聞頁操 作 新聞 操作 頁的類型 新聞操作由三個頁面構(gòu)成：新聞新增頁，新聞列表頁，新聞編輯頁。即完成新聞的上傳工作。 新聞編輯頁的功能是： 打開 已經(jīng)輸入 到數(shù)據(jù)庫 新聞表 中的 新聞 ，顯示 標題，作者 ，時間 及內(nèi)容 ，讓用戶可以 修改。選擇母版頁 ，點“確定” 。 在 NEWSIO 文件夾上右出，點“添加新項”，選擇“ Web 窗體”，在名稱中改名為 ，勾選中“選擇母版頁”，點“添加”，選擇母版頁 ，點“確定”。 42 在 NEWSIO 文件夾上右出，點“添加新項”，選擇“ Web 窗體”，在名稱中改名為 ，勾選中“選擇母版頁 ”，點“添加”，選擇母版頁 ，點“確定”。 新聞新增頁 設(shè)計新聞 新增 頁 在 頁上點設(shè)計，進入設(shè)計頁面。 使用 FormView 對象 點擊 FormView1 對象的 按鈕，在選擇數(shù)據(jù)源中點擊“新建數(shù)據(jù)源”，再選擇“數(shù)據(jù)庫”， 改數(shù)據(jù)源的 ID 為“ SqlNewsIn”， 點確定，再點下拉框選擇 ”Conn”，點下一步 。次數(shù)列為讀者點擊，審核列為管理員使用，所以不選?！秉c一步，點完成。 1. 只保留 InsertItemTemplate 模板 ，刪除其它模板， 操作參照欄目頁 第 節(jié)的相 應(yīng) 步驟 。 圖 為清空后的兩模板。 圖 清除不用的模板 2. 打 開 FormView1 對象的屬性窗口， 設(shè)其“ DefaultMode”為 Insert，“ Width”為 98%。 如 圖 。 圖 用 Table 進行局部布局。因為此欄目文本框只能進行輸入，而欄目名不能在這里進行輸入工作，只能用 DropDownlist1 對象 來選擇欄目 。如果在增加新聞時還要進行欄目名重新輸入，就會非常煩惱（記不清欄目名），容易出錯。 內(nèi)置 DropDownlist對象 1. 刪除掉默認的 lmid:邊的 欄目文本框， 從“工具箱”中拖入一個 DropDownlist1 對象到 FormView1對象的 InsertItemTemplate 模板 中，用屬性窗修改高度為 22px，寬度為 140px。 45 圖 調(diào)整對象 2． 點 DropDownlist1 對象的 ，點 “ 選擇數(shù)據(jù)源 ” ，在“選擇數(shù)據(jù)源”中選擇“新建數(shù)據(jù)源”。 此處一定要改名，否則 會產(chǎn)生 有重名的問題，至于改成什么名 不重要，但 要 做到 看名知意。點“下一步”，占“完成”。 用于 顯示的數(shù)據(jù)字段選擇“欄目名”，值選擇數(shù)據(jù)字段用“ lmid”。 如 圖 。 如 圖 顯示在頁面上，給用戶看的值 程序中使用的值 47 圖 DropDownlist1 對象 的數(shù)據(jù)綁定 注 意 ：一定要勾中“雙向數(shù)據(jù)綁定”， 才能讓數(shù)據(jù)在用戶操作和數(shù)據(jù)表 之間傳進傳出 。 新聞內(nèi)容輸入框設(shè)計 將“內(nèi)容 Textbox”框的 TextMode 屬性值改為“ MultiLine”即多行， Width 改為 100%， Height 改為了 300px。 圖 界面基本設(shè)計成型 48 頁面間的鏈接 — 從本頁 轉(zhuǎn) 到新聞列表頁 點圖標工具欄 中的 圖標，打開工具箱。 點 NavigateUrl 右邊的 ，找到 頁。在運行頁面中 相應(yīng)文本框中 輸入相關(guān) 文字 后，點“插入”， 即可 將 新聞到 加入到 數(shù)據(jù)庫中。 圖 圖 新聞新增頁的運行效果 修改新聞頁標題 修改 新聞 頁標題。 在線編輯器作為第三方組件，種類有很多，可根據(jù)需要選擇其中的一種。 1. 準備 CuteEditor 在線編輯器所需要的文件。 如圖 。其中 Bin 中有一個授權(quán)文件 ，在網(wǎng)站發(fā)布時一定要復(fù)制過去，否則 CuteEditor 49 在線編輯器不能使用。如圖 3．在“選擇工具項”中點 擊 “瀏覽”， 依次打開 F:盤 的 WebNews 文件夾，打開 Bin 文件夾，選擇 文件，點“打開”。 圖 選擇控件 文件 4．“選擇工具項”中出現(xiàn) Editor， 勾選到。 如圖 50 圖 勾選 CuteEditor 控件 5． 工具箱中出現(xiàn) Editor 對象選項 ，如圖 圖 工具箱中出來 Editor 在線編輯器控件 6．打開 頁，在 頁上點設(shè)計，進入設(shè)計頁面。 圖 。 如圖 替換內(nèi)容 TextBox 圖 用 Editor 對象 替換內(nèi)容 TextBox 對象 8．點 Editor1 對象的 按鈕， 點“編輯 DataBindings..”，勾選“顯示所有屬性”，找到 Text，將其綁定到內(nèi)容列上?；蛘呤?此對象的 對數(shù)據(jù)源進行刷新。之后再進行對象的數(shù)據(jù)列綁定。 因為 Editor1 對象是第三方控件，所以下 圖的現(xiàn)象看似報錯，實則正常，不影響結(jié)果。在這里一定要加入內(nèi)容進行測試，以發(fā)現(xiàn)問題。 1． 生成對應(yīng)的存儲過程，點擊新聞新增 頁 的 “ 源 ” 進入其 HTML 代碼頁中， 找到并 復(fù)制如下的代碼 ，這些是由數(shù)據(jù)源生成的 SQL 操作代碼，可直接改造為存貯過程使用 。 即可生成 名為 nmb_select_all， news_insert， news_update， news_select，news_select_one， news_delete 等 六 個存儲過程。 CREATE PROCEDURE Create_news_sql AS /* CREATE PROCEDURE lmb_select_all 欄目表數(shù)據(jù)選擇所有 記錄 as select lmid, 欄目 from 欄目 order by 排序 return go CREATE PROCEDURE news_insert 新聞表數(shù)據(jù)插入 53 lmid int, 標題 nvarchar(30), 作者 nvarchar(30), 內(nèi)容 text as INSERT INTO [新聞 ] ([lmid], [標題 ], [作者 ], [內(nèi)容 ]) VALUES (lmid, 標題 , 作者 , 內(nèi)容 ) return go CREATE PROCEDURE news_update 新聞表數(shù)據(jù)更新 一條 nwid bigint, lmid int, 標題 nvarchar(30), 作者 nvarchar(30), 時間 nvarchar(30), 內(nèi)容 text as UPDATE [新聞 ] SET [lmid] = lmid, [標題 ] = 標題 , [作者 ] = 作者 , [時間 ] = 時間 , [內(nèi)容 ] = 內(nèi)容 WHERE [nwid] = nwid return go CREATE PROCEDURE news_select 新聞表數(shù)據(jù)選擇所有 as SELECT [nwid], [lmid], [標題 ], [作者 ], [內(nèi)容 ] FROM [新聞 ] return go CREATE PROCEDURE news_select_one 新聞表數(shù)據(jù)選擇一條 記錄 nwid bigint as SELECT [nwid], [lmid], [標題 ], [作者 ], [時間 ], [內(nèi)容 ] FROM [新聞 ] where nwid=nwid return go CREATE PROCEDURE news_delete 新聞表數(shù)據(jù)刪除一條記錄 nwid bigint as DELETE FROM 新聞 WHERE nwid = nwid Return */ RETURN 圖 運行生成存貯過程 —可逐個運行生成 3． 點擊新聞新增頁 的 進入設(shè)計頁