ckeditor編輯的使用方法

1、下載安裝Ckeditor，並將其整合到項目中

一、什麼是CKeditor？爲何要使用它？

      咱們在作門戶網站或者公文系統時，客戶常常要求在錄入時可以更改字體樣式、大小、顏色並具有插入圖片的功能。而通常的TextBox沒法知足咱們的需求， 此時就須要使用一種叫作富文本編輯器的東西，這類編輯器有不少，ckeditor就是其中一種，下面介紹其使用方法

二、如何下載

√ 進入官方網站 http://ckeditor.com/，點擊Download進入下載頁面

√ CKEDITOR支持多種編程語言及框架（如：java、asp.net、sharepoint等），咱們選擇asp.net

√ 下載後解壓，簡單解釋裏面內容

三、下面講如何將CKEditor整合到咱們的應用中

√ 新建一個網站

√ 爲了代碼清晰，新建一個目錄，起名JS，方便將ckeditor放到該目錄下

√ 將解壓後_Samples文件夾中的ckeditor目錄拷貝到JS下

√ 新建網頁，起名test_ckeditor

√ 增長對ckeditor的引用

√ 調用，主要是經過對TextBox的格式化實現富文本的顯示效果

√ 爲了簡便，咱們引入JQUERY類庫(一種使javascript更容易理解與編寫的代碼集合)，從http://jquery.com/下載

√ 將下載後的文件放到JS文件夾下

√ 引用jquery（經過將jquery類庫拖放到title標籤下）

√ 頁面上添加TextBox文本框（ID：TextBox1）

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/>

複製代碼

√ 用ckeditor插件格式化TextBox1。在<script src="JS/jquery-1.6.2.min.js" type="text/javascript"></script>中添加以下代碼

<script type="text/javascript">
 var ckeditor; //定義全局變量 ckeditor
 $(function () {//當所有DOM元素加載完畢後執行下面語句，不加此句javascript將沒法找到TextBox1
 ckeditor = CKEDITOR.replace("<%=TextBox1.ClientID %>"); //用CKEDITOR.replace命令將TextBox1格式化成富文本
 });
 </script>

複製代碼

（注：以上代碼表示當頁面的全部元素加載完畢後用CKEDITOR.replace命令對TextBox1這個文本框進行改造，讓其看起來更炫）

√ 按F5鍵預覽，便可看到TextBox1被ckeditor格式化後的效果

 

 四、CKEDITOR個性化定製

√ 這麼多功能擺在這裏就一個字」亂「，如何去掉咱們不經常使用的功能呢？這就須要定義

 

√ 雙擊ckeditor目錄中的config.js文件，經過對其進行配置可實現您的個性化需求

√ 下面給出經常使用的配置，供您選擇

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig =function (config) {
 // Define changes to default configuration here. For example:
//定義語言，此處改成中文
 config.language ='zh-cn'; //中文
//顏色
//config.uiColor = '#AADC6E';
//字體
 config.font_names ='宋體;楷體;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
 //默認使用的toolbar（工具欄），此設定名字爲「Basic」的toolbar爲系統默認的工具欄
 config.toolbar ='Basic';
 //名字爲「Basic」的toolbar（工具欄）的具體設定。只保留如下功能：
 config.toolbar_Basic =
 [
 { name: 'styles', items: ['Font', 'FontSize'] }, //樣式欄：字體、大小
 {name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }, //對齊欄：左對齊、中心對齊、右對齊、兩端對齊
 {name: 'colors', items: ['TextColor', 'BGColor'] }, //顏色欄：文本顏色、背景顏色
 {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, //基本樣式欄：加粗、傾斜、下劃線、刪除線、下標、上標、移除樣式
 {name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule'] }, //插入欄：圖像、flash、表格、水平線
 {name: 'links', items: ['Link', 'Unlink'] }, //超連接欄：增長超連接、取消超連接
 {name: 'document', items: ['Source']}//源代碼欄：查看源代碼 ]; //工具欄是否能夠被收縮（即：右上角的三角符號是否顯示） config.toolbarCanCollapse =true; //工具欄默認是否展開 config.toolbarStartupExpanded =true; // 是否容許「拖拽改變尺寸」功能（即：右下角的三角符號是否顯示） config.resize_enabled =false; //當輸入：shift+Enter時插入的標籤 config.shiftEnterMode = CKEDITOR.ENTER_P; //可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//回車（Enter）時產生的標籤 config.enterMode = CKEDITOR.ENTER_BR; //可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//寬度//config.width = "600px";//高度//config.height = "500px";//默認樣式//config.skin ：'kama'（默認）、'office2003'、'v2'//config.skin = "kama";//工具欄的位置//config.toolbarLocation = 'top'; //可選：bottom//改變大小的最大高度//config.resize_maxHeight = 3000;//改變大小的最大寬度//config.resize_maxWidth = 3000;//改變大小的最小高度//config.resize_minHeight = 250;//改變大小的最小寬度//config.resize_minWidth = 750;//當提交包含有此編輯器的表單時，是否自動更新元素內的資料//config.autoUpdateElement = true;//絕對目錄仍是相對目錄，爲空爲相對目錄//config.baseHref = ''//編輯器的z-index值//config.baseFloatZIndex = 10000; //如下爲上傳附件的相關配置，需配合ckfinder控件使用// var ckfinderPath = "/Scripts";// config.filebrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html';//上傳文件時瀏覽服務文件夾// config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Images';//上傳圖片時瀏覽服務文件夾// config.filebrowserFlashBrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Flash'; //上傳Flash時瀏覽服務文件夾// config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳文件按鈕(標籤)// config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上傳圖片按鈕(標籤)// config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上傳Flash按鈕(標籤)};

複製代碼

①以上咱們設定了控件默認語言爲中文(config.language = 'zh-cn';)

②默認的工具欄爲Basic，而且在 config.toolbar_Basic =[];中定義了工具欄中須要的功能

③添加了對中文字體的支持 config.font_names = '宋體;楷體;新宋體;黑體;隸書;幼圓;微軟雅黑;'

√ 作完以上配置，通過咱們精簡和優化的ckeditor呈現形式以下：

二、下載安裝Ckfinder，並將其整合到項目中

一、解釋：什麼是Ckfinder？爲何要使用它？下圖會給您說明

二、如何下載

√ 打開http://ckfinder.com/，點擊Download進入下載頁面

√ 在下載頁面能夠看到，ckfinder針對許多語言作了單獨設計，此處咱們選擇ASP.NET

 

√ 將下載後的文件放在JS文件夾下，而後刪除_samples、_source兩個文件夾

（注：_sample爲示例文件夾，咱們不須要；_source爲源代碼文件夾，能夠經過修改它對ckfinder默認行爲進行定義：好比修改上傳文件的名稱，下面會講到）

三、下面講如何將CKFinder整合到咱們的應用中

√ 將ckfinder目錄下的ckfinder.js拖拽至title標籤下方，以示引用

√ 在$(function(){})中添加以下語句，將ckfinder整合至ckeditor

CKFinder.setupCKEditor(ckeditor, "/JS/ckfinder/");//用CKFinder.setupCKEditor命令將ckeditor與ckfinder進行整合

複製代碼

說明以下：

√ 添加CKFinder.dll引用，路徑在 JS\ckfinder\bin\Relase 下

√ 按F5運行，此時再次點擊」圖像「按鈕，會發現多出」上傳「選項

√ 添加上傳權限

      默認狀況下，爲了安全，ckfinder不容許上傳附件，若是須要上傳，則須要更改JS\ckfinder下的config.ascx文件，將CheckAuthentication()方法返回true

√ 關閉ASP.NET驗證功能。處於安全性考慮，ASP.NET會對請求的數據及事件進行安全性驗證，而咱們上傳的文件都是安全的，不須要這些驗證，因此去掉這些功能。

√ 若是用的是.net4.0，那麼請在web.config中加入以下代碼，將驗證模式改成2.0

四、CKFinder個性化定製

√ 規定文件上傳的路徑。

      默認狀況下，ckfinder會把文件上傳到ckfinder\userfiles目錄，以此類推。下面咱們要改變它自有的規則，自定義文件存放位置。

      一樣找到config.ascx文件，定位到SetConfig方法，其中的BaseUrl就是上傳文件的默認路徑，根據實際須要修改便可

√ 以上咱們放開了上傳權限，更改了上傳目錄，按F5鍵，上傳一個圖片查看效果

定位到UPLOAD目錄（咱們自定義的文件上傳目錄），查看咱們上傳的文件

√ 若是咱們想更改上傳到服務器的文件名稱，例如：以日期時間命名，如何作呢？

√ 這就須要更改源文件，打開剛纔下載並解壓好的ckfinder文件夾，將_source目錄中的CKFinder.Net.sln拖到vs2010中進行編輯

√ 按F5預覽，再次上傳一個文件，此時能夠看到文件名改爲了以日期和時間命名的形式

3、添加模擬數據

一、新建數據庫文件

 

√ 此時會彈出一個對話框，提示程序會自動創建App_Data文件夾，並把數據庫放到該文件夾下，點擊」是「便可

√ 雙擊db_test.mdf數據庫，左側會出現並選中剛纔建立的數據庫db_test，右鍵點擊，咱們須要建立一個」表「

√ 數據庫字段定義以下：

√ 設置id（主鍵）列的默認值

√ 設置post_time（提交時間）列的默認值

√ 右鍵點擊第一行，設置id列爲主鍵

√ 在右側屬性欄處，爲該表命名

√ 關閉該表

4、數據的展現

一、用ListView控件呈現數據庫內容

√ 讓ListView根據數據庫（tb_test）的格式自動生成數據

√ 此時在前臺會自動生成以下代碼：

<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" 
 DataSourceID="dc_test">
 <AlternatingItemTemplate>
 <tr style="color: #284775;">
 <td>
 <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'/>
 </td>
 <td>
 <asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>'/>
 </td>
 <td>
 <asp:Label ID="post_timeLabel" runat="server" Text='<%# Eval("post_time") %>'/>
 </td>
 <td>
 <asp:Label ID="content_detailsLabel" runat="server" 
 Text='<%# Eval("content_details") %>'/>
 </td>
 </tr>
 </AlternatingItemTemplate>
 <EditItemTemplate>
 <tr style="color: #000080;">
 <td>
 <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新"/>
 <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消"/> </td> <td> <asp:Label ID="idLabel1" runat="server" Text='<%# Eval("id") %>'/> </td> <td> <asp:TextBox ID="titleTextBox" runat="server" Text='<%# Bind("title") %>'/> </td> <td> <asp:TextBox ID="post_timeTextBox" runat="server" Text='<%# Bind("post_time") %>'/> </td> <td> <asp:TextBox ID="content_detailsTextBox" runat="server" Text='<%# Bind("content_details") %>'/> </td> </tr> </EditItemTemplate> <EmptyDataTemplate> <table runat="server" style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;"> <tr> <td> 未返回數據。</td> </tr> </table> </EmptyDataTemplate> <InsertItemTemplate> <tr style=""> <td> <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入"/> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除"/> </td> <td> <asp:TextBox ID="idTextBox" runat="server" Text='<%# Bind("id") %>'/> </td> <td> <asp:TextBox ID="titleTextBox" runat="server" Text='<%# Bind("title") %>'/> </td> <td> <asp:TextBox ID="post_timeTextBox" runat="server" Text='<%# Bind("post_time") %>'/> </td> <td> <asp:TextBox ID="content_detailsTextBox" runat="server" Text='<%# Bind("content_details") %>'/> </td> </tr> </InsertItemTemplate> <ItemTemplate> <tr style="color: #333333;"> <td> <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'/> </td> <td> <asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>'/> </td> <td> <asp:Label ID="post_timeLabel" runat="server" Text='<%# Eval("post_time") %>'/> </td> <td> <asp:Label ID="content_detailsLabel" runat="server" Text='<%# Eval("content_details") %>'/> </td> </tr> </ItemTemplate> <LayoutTemplate> <table runat="server"> <tr runat="server"> <td runat="server"> <table ID="itemPlaceholderContainer" runat="server" border="1" style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> <tr runat="server" style="color: #333333;"> <th runat="server"> id</th> <th runat="server"> title</th> <th runat="server"> post_time</th> <th runat="server"> content_details</th> </tr> <tr ID="itemPlaceholder" runat="server"> </tr> </table> </td> </tr> <tr runat="server"> <td runat="server" style="text-align: center;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;"> </td> </tr> </table> </LayoutTemplate> <SelectedItemTemplate> <tr style="font-weight: bold;color: #000080;"> <td> <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'/> </td> <td> <asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>'/> </td> <td> <asp:Label ID="post_timeLabel" runat="server" Text='<%# Eval("post_time") %>'/> </td> <td> <asp:Label ID="content_detailsLabel" runat="server" Text='<%# Eval("content_details") %>'/> </td> </tr> </SelectedItemTemplate> </asp:ListView>

複製代碼

√ 千萬別暈，接下來咱們對其進行精簡

DataKeyNames="id" 表示主鍵是id

LayoutTemplate是數據表頭定義，他會自動從數據庫中讀取字段的名稱，而後顯示在表頭，咱們能夠經過更改這些名稱使得顯示更人性化

AlternatingItemTemplate與ItemTemplate表示數據間隔行的數據及樣式（好比：奇數行紅色、偶數行藍色），爲了代碼簡潔，咱們把AlternatingItemTemplate刪除，同時將ItemTemplate中的id（主鍵）列刪掉

EditItemTemplate表示當點擊編輯按鈕時的數據及樣式，爲了代碼簡潔，咱們也將其刪除

EmptyDataTemplate表示當數據爲空的話，顯示的提示信息，默認提示信息：未返回數據。（此時咱們按F5鍵便可看到）

InsertItemTemplate中定義了「插入模板」中的數據及樣式，爲使代碼簡潔，刪掉

SelectedItemTemplate中定義了「選擇模板」的數據及樣式，爲使代碼簡潔，刪掉

√ 經過以上優化，咱們的代碼簡化爲：

<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" DataSourceID="dc_test">
 <EmptyDataTemplate>
 <table runat="server" style=" border-collapse: collapse;
 border-color: #999999; border-style: none; border-width: 1px;">
<tr>
 <td>
 未返回數據。
 </td>
 </tr>
 </table>
 </EmptyDataTemplate>
 <ItemTemplate>
 <tr style=" color: #333333;">
 <td>
 <asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>'/>
 </td>
 <td>
 <asp:Label ID="post_timeLabel" runat="server" Text='<%# Eval("post_time") %>'/>
 </td>
 <td>
 <asp:Label ID="content_detailsLabel" runat="server" Text='<%# Eval("content_details") %>'/>
 </td>
 </tr>
 </ItemTemplate>
 <LayoutTemplate>
 <table runat="server">
 <tr runat="server">
 <td runat="server"> <table id="itemPlaceholderContainer" runat="server" border="1" style=" border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px; font-family: Verdana, Arial, Helvetica, sans-serif;"><tr runat="server" style=" color: #333333;"> <th runat="server"> 標題 </th> <th runat="server"> 錄入時間 </th> <th runat="server"> 內容 </th> </tr> <tr id="itemPlaceholder" runat="server"> </tr> </table> </td> </tr> <tr runat="server"> <td runat="server" style="text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333;"></td> </tr> </table> </LayoutTemplate> </asp:ListView>

複製代碼

二、下面演示如何向數據庫中插入數據

√ 首先按F7鍵切換到後臺代碼

√ 在page_load上方配置數據庫鏈接

√ 切換到前臺

√ 在TextBox1上添加TextBox（ID：txt_Title），做爲標題

標題：<asp:TextBox ID="txt_Title" runat="server"/>

複製代碼

√ 在TextBox1下添加一個Button（ID：btn_Insert），做爲錄入按鍵

<asp:Button ID="btn_Insert" Text="錄入" runat="server"/>

複製代碼

√ 添加完成後總體效果以下圖所示：

√ 在後臺添加「錄入」點擊事件

√ 在錄入按鍵的Click點擊事件中定義以下代碼

protectedvoid btn_Insert_Click(object sender, EventArgs e)
 {
 using (SqlConnection conn =new SqlConnection(str_Conn))//與數據庫創建鏈接
 {
 conn.Open();//打開數據庫
 //執行命令
using (SqlCommand cmd =new SqlCommand("insert into tb_test (title,content_details) values (@title,@content_details)", conn))
 {
 cmd.Parameters.AddWithValue("title",txt_Title.Text);//標題
 cmd.Parameters.AddWithValue("@content_details",TextBox1.Text);//正文
if (cmd.ExecuteNonQuery() >0)//若是插入成功（即：受影響的行數>0）
 {
 ListView1.DataBind();
 }
 else//不然報「插入失敗」的錯誤
 {
 ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), "", "alert('插入失敗')", true);
 }
 }
 }
 }

複製代碼

√ 按F5運行項目，分別在標題、正文處錄入文字及上傳照片，而後點擊「錄入」

√ 點擊「錄入」，咱們能夠看到記錄成功插入

三、美化

      或許你會感受這樣的錄入方式不太給力，若是我點擊錄入按鈕，而後彈出一個模擬層，而且能夠拖動，彷佛更炫，並且客戶要求通常也是如此。

就像下面的感受：

√ 先說拖動效果，代碼能夠本身寫，可是有了JQUERY，咱們只須要在彈出層（此處爲一個DIV）後面加一個.draggable就好了，代碼簡潔，何樂而 不爲。但draggable這個方法並不是JQUERY類庫原始封裝，須要一個叫 JQUERY UI 的插件（該插件可以擴展許多JQUERY的功能）來提供

√ 進入http://jquery.com/

√ 進入UI選項，下載須要的插件

√ 在項目的JS文件加下創建一個jquery_ui目錄，將下載後的文件解壓到該目錄下

√ 前臺添加對UI控件的引用

√ 下面咱們定義彈出層

①在ListView1的下方新增一個div，命名爲div_Pop

②在該div中再建一個div做爲標題行，命名爲div_Title ，而且輸入標題：錄入內容

③將咱們須要錄入的內容所有剪切到該div_Pop中

④在錄入按鈕後面添加取消按鈕，點擊後彈出層消失

<div id="div_Pop" style="display: none;width:750px;"><%--該div包裹標題行及錄入的內容,默認隱藏--%>
 <div id="div_Title"><%--該div是標題行，未來拖動此行可移動整個div_Pop--%>
 錄入內容<hr />
 </div>
 標題：<asp:TextBox ID="txt_Title" runat="server"/>
 <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/>
 <asp:Button ID="btn_Insert" Text="錄入" runat="server" OnClick="btn_Insert_Click"/>
 <input id="btn_Close" type="button" value="取消"/><%--取消按鍵，點擊後彈出層消失--%>
 </div>

複製代碼

√ 在form標籤下新增一個button，點擊該button後出現彈出層

<input id="btn_Add" type="button" value="錄入"/>

複製代碼

√ 在javascript標籤<script type="text/javascript"></script>中，定義彈出層顯示和消失的方法

//彈出層顯示
function show_Win(div_Win, tr_Title, event) {
 var c_Width = document.documentElement.clientWidth; //可見 寬度
var s_Width = document.documentElement.scrollWidth; //滾動 寬度
var s_Left = document.documentElement.scrollLeft || document.body.scrollLeft; //據左邊距 寬度(document.body的加入是爲了兼容safari瀏覽器)
var c_Height = document.documentElement.clientHeight; //可見 高度
var s_Height = document.documentElement.scrollHeight; //滾動 高度
var s_Top = document.documentElement.scrollTop || document.body.scrollTop; //距上邊距 高度(document.body的加入是爲了兼容safari瀏覽器)
var js_Title = $("#"+ tr_Title); //標題
 js_Title.css("cursor", "move");
 //建立遮罩層
 $("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width +"px", "height": s_Height +"px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
 //獲取彈出層
var msgObj = $("#"+ div_Win);
 msgObj.css("display", "block"); //必須先彈出此行，不然msgObj[0].offsetHeight爲0，由於"display":"none"時，offsetHeight沒法取到數據
//y軸位置
var js_Top = (c_Height - parseInt(msgObj[0].offsetHeight)) /2+ s_Top +"px";
 //x軸位置
var js_Left = (c_Width - parseInt(msgObj[0].offsetWidth)) /2+ s_Left +"px"; msgObj.css({ "position": "absolute", "top": js_Top, "left": js_Left, "background-color": "#ffffff", "border": "double 4px #FF9999 " }); //使彈出層可移動 msgObj.draggable({ handle: js_Title, scroll: false });//handdle表示拖動什麼部位可以使整個彈出層移動，scroll表示彈出層移出可視範圍後瀏覽器是否自動生成滾動條 } //彈出層消失function close_Win(div_Win) { var div_Bg = $("#div_Bg"); div_Bg.remove(); $("#"+ div_Win).fadeOut(200); }

複製代碼

√ 在JQUERY標籤$(function(){})中，新增錄入（彈出層顯示）和取消（彈出層消失）事件

//事件：點擊「錄入」後，彈出層顯示
 $("#btn_Add").click(function () { show_Win("div_Pop", "div_Title", event) });
 //事件：點擊「取消」後，彈出層消失
 $("#btn_Close").click(function () { close_Win("div_Pop"); });

複製代碼

√ 按F5預覽結果
我想蘋果系統之因此受歡迎是由於它作到了簡潔、易用與高度的整合。想象一下，若是增刪改查操做在多個頁面給客戶是什麼體驗—繁瑣、暈~，若是在一個頁面而且作得至關人性化又是什麼感受—簡潔、爽！那麼如何將修改功能作的更人性化呢？咱們作以下嘗試：

①當點擊標題行中的數據，自動彈出相關內容（根據主鍵id從WebService獲取）

②彈出層新增「修改」按鍵，點擊後能將修改的數據更新到數據庫

√ 因爲咱們要新增修改功能，因此在錄入、取消中間，要增長「修改」按鍵
√ 同時加入一個HiddenFiled隱藏標籤，並將主鍵的值賦給它（如何賦值後面將講到，見show_Details方法的最後一句代碼），方便後臺編寫修改按鍵程序時調用

√ 進入後臺test_ckeditor.aspx.cs代碼，添加btn_Edit_Click的事件處理程序

protectedvoid btn_Edit_Click(object sender, EventArgs e)
 {
 using (SqlConnection conn =new SqlConnection(str_Conn))//與數據庫創建鏈接
 {
 conn.Open();//打開數據庫
 //執行命令
using (SqlCommand cmd =new SqlCommand("update tb_test set title=@title,content_details=@content_details where id=@id", conn))
 {
 cmd.Parameters.AddWithValue("title", txt_Title.Text);//標題
 cmd.Parameters.AddWithValue("@content_details", TextBox1.Text);//正文
 cmd.Parameters.AddWithValue("@id",hf.Value);//主鍵id
if (cmd.ExecuteNonQuery() >0)//若是修改爲功（即：受影響的行數>0）
 {
 ListView1.DataBind();//從新綁定數據
 }
 else//不然報「修改失敗」的錯誤
 {
 ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), "", "alert('修改失敗')", true);
 }
 }
 }
 }

複製代碼

√ 添加WebService（一種讓前臺頁面與後臺代碼異步通信的技術，能爲咱們帶來網頁局部更新的體驗），取名：WebService1.asmx

√ 取消相關注釋，容許外部javascript方法調用該WebService1；自定義方法，根據主鍵id獲得數據庫其餘字段值

①因爲咱們要返回一個數組列表（該列表包含標題、日期、內容）因此要添加System.Collections引用
②因爲咱們須要對SQLServer數據庫進行操做，因此須要添加System.Data.SqlClient引用
③因爲咱們須要對SQLServer數據庫進行操做，因此須要添加數據庫鏈接字符串，以明確對哪一個數據庫進行操做

 

√ 下面咱們定義本身的方法：根據id獲取標題、日期、內容，並將其存入ArrayList，等待調用

        [WebMethod]
        public ArrayList get_Details(string str_Id)//str_Id參數是從javascript方法中接收的主鍵id值
 {
 ArrayList al =new ArrayList();//定義ArrayList，準備存儲 標題、提交時間、內容
using (SqlConnection conn =new SqlConnection(str_Conn))//創建數據庫鏈接
 {
 conn.Open();//打開數據庫
 //執行SQL命令
using (SqlCommand cmd =new SqlCommand("select title,post_time,content_details from tb_test where id=@id", conn))
 {
 cmd.Parameters.AddWithValue("@id", str_Id);//主鍵id
 //定義只讀數據流，根據主鍵id從中讀取 標題（title）、提交時間（post_time）、內容（content_details）
using (SqlDataReader sdr = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection))//CommandBehavior.CloseConnection表示自動偵測sdr的狀態，若是sdr關閉，則數據庫鏈接也自動關閉
 {
 sdr.Read();//向前讀取一條記錄
 al.Add(sdr["title"].ToString());//標題
 al.Add(sdr["post_time"].ToString());//提交時間
 al.Add(sdr["content_details"].ToString());//內容
if (!sdr.IsClosed) { sdr.Close(); }//若是數據流沒有關閉，就關掉它
 }
 }
 }
 return al;//返回ArrayList
 }

複製代碼

√ 前臺調用步驟：

① 切換到test_ckeditor.aspx前臺頁面，在javascript標籤<script type="text/javascript"></script>中定義方法

② 向WebService1.asmx發送數據庫主鍵id

③ 而後經過主鍵id獲取提交時間、內容等先關信息

//顯示明細（用到了AJAX異步交互技術）
function show_Details(str_Id) {
 $.ajax({
 type: "POST", //AJAX有兩種傳送類型，POST和GET，其中POST更安全
 contentType: "application/json", //微軟的WebService框架採用json內容類型進行數據傳輸
 url: "WebService1.asmx/get_Details", //WebService1.asmx所在路徑/方法
 data: "{str_Id:'"+ str_Id +"'}", //方法的參數
 dataType: 'json', //微軟的WebService框架採用json做爲數據類型
 success: function (result) {//回調函數（即：若是上面的語句都執行成功的話，WebService1.asmx返回來的數據），一般用result.d表示返回的數據集合
 $("#txt_Title").val(result.d[0]); //獲得標題
 ckeditor.setData(result.d[2]); //獲得內容
 show_Win("div_Pop", "div_Title", event); //彈出層
 $("#hf").val(str_Id); //將主鍵存儲在HidenFiled中，方便調用
 }
 });
 }

複製代碼

√ 改造ListView1 <ItemTemplate></ItemTemplate>標籤中的第一列，實現點擊標題行，彈出詳細內容的目的

√ 按F5鍵進行預覽

√ 下面咱們繼續完善，將刪除功能融入其中

√ 在test_ckeditor.aspx前臺頁面，定位到LayoutTemplate中，在table上新增一個叫作「刪除」的th列頭

√ 定位到ItemTemplate中，在最後新增一列，於其中放置「刪除按鍵」，注意必須爲該Button設置CommandName="Delete"， 目的是告訴程序該Button的功能就是「刪除」，不然沒法與後臺的ItemDeleting事件配合實現刪除記錄的功能

√ 進入ItemDeleting後臺事件處理程序

√ 在ItemDeleting後臺事件處理程序中，填寫以下代碼：

protectedvoid ListView1_ItemDeleting(object sender, ListViewDeleteEventArgs e)
 {
 using (SqlConnection conn =new SqlConnection(str_Conn))//與數據庫創建鏈接
 {
 conn.Open();//打開數據庫
 //執行命令
using (SqlCommand cmd =new SqlCommand("delete from tb_test where id=@id", conn))
 {
 cmd.Parameters.AddWithValue("@id", ListView1.DataKeys[e.ItemIndex].Value);//主鍵id
if (cmd.ExecuteNonQuery() >0)//若是刪除成功（即：受影響的行數>0）
 {
 ListView1.DataBind();//從新綁定數據
 }
 else//不然報「刪除失敗」的錯誤
 {
 ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), "", "alert('刪除失敗')", true);
 }
 }
 }
 }

複製代碼