ASP.NET MVC5網站開發新增文章

一、新增文章

1、KindEditor富文字編輯器

到官方網站

http：//kindeditor。net/down。php

下載最新版本，解壓後把程式碼複製到專案的Scripts資料夾下。

編輯

新增圖片註釋，不超過 140 字（可選）

2、新增介面的顯示。

在ArticleController中新增Add 方法

右鍵新增Article的強型別檢視，程式碼如下

效果如圖

編輯

切換為居中

新增圖片註釋，不超過 140 字（可選）

3、後臺接受的處理。

在做架構的時候DAL、BLL的base類裡有Add方法，我們可以直接使用ArticleService。Add方法新增到資料庫

新增文章功能就實現了，但是不能上傳附件，不能選擇首頁圖片，不能刪除多餘的附件。下面就來實現附件功能。

二、附件上傳

目標可以上傳附件（圖片，檔案等），檔案儲存到上傳目錄中，且資料庫中儲存相應記錄，可以瀏覽檔案列表，未使用的附件可以刪除記錄。

一、新增附件

在AttachmentController新增Upload（）方法，方法方法把檔案寫入磁碟中把附件的記錄也儲存到資料庫中，中間會用到讀取配置檔案，見《。Net MVC 網站中配置檔案的讀寫》。

二、查詢附件列表

開啟InterfaceAttachmentService介面，新增兩個方法，都進行了註釋比較容易理解，直接上程式碼。

AttachmentService中寫現實程式碼

由於KindEditor檔案管理需要從伺服器獲取json格式檔案列表，在Ninesky。Web。Areas。Member。Models中單獨給列表格式寫個檢視模型。AttachmentManagerViewModel

在AttachmentController新增返回檔案列表的方法FileManagerJson。方法供KindEditor的檔案管理器呼叫

3、為圖片建立縮圖

把建立縮圖的方法寫著Common專案中

在Ninesky。Common的Picture類中新增方法

在AttachmentController新增生成縮圖的action

三、整合

新增和上傳附件都做好了，現在把他們整合到一起，我們就可以上傳附件了。

開啟Add檢視，在建立KindEditor位置新增指令碼

編輯

新增圖片註釋，不超過 140 字（可選）

現在開啟瀏覽器就可以上傳和管理附件了

編輯

新增圖片註釋，不超過 140 字（可選）

編輯

新增圖片註釋，不超過 140 字（可選）

新增文章的最後一個欄位是文章的預設首頁圖片，我希望點選選擇按鈕，可以在已上傳中選擇圖片，並建立縮圖。

那麼在Add視圖裡再彈出一個檔案空間讓使用者選擇已上傳的檔案，使用者選擇後講選擇的地址傳送到伺服器建立縮圖，並返回縮圖地址，然後將地址複製給隱藏表單，CommonModel_DefaultPicUrl，同事複製個的src屬性用來顯示圖片。Js程式碼如下：

看下效果

編輯

新增圖片註釋，不超過 140 字（可選）

在儲存文章的action中刪除未使用的附件

編輯

新增圖片註釋，不超過 140 字（可選）

完整的Add方法程式碼

單純新增文章比較簡單，複雜點在上傳附件，瀏覽新新增的附件，刪除文章中未使用的附件及生成縮圖上。KindEditor還支援批次上傳附件，由於批次上傳使用的swfupload，在提交時flash沒傳輸cookie到伺服器，無法驗證使用者導致上傳失敗，暫時無法使用批次上傳，希望這篇文章可以對大家的學習有所幫助，大家可以結合小編之前發的文章進行學習，相信一定會有所收穫。