ASP.NET MVC圖片管理(更新)

Insus.NET在ASP.NET MVC專案中，實現了圖片管理，上傳，預覽，顯示，刪除等功能，還差一個功能，就是更新圖片的功能，那此次來完成它。你能夠先參考前2篇
《ASP.NET MVC圖片管理(上傳，預覽與顯示)》http://www.cnblogs.com/insus/p/4620420.html 和
《ASP.NET MVC圖片管理(刪除)》http://www.cnblogs.com/insus/p/4623507.html 。咱們也是在這些基礎上進行完善的。

在數據庫中建立更新存儲過程：

-- =============================================
-- Author:        Insus.NET
-- Create date: 2015-07-09
-- Description:    Update image.
-- =============================================
CREATE PROCEDURE [dbo].[usp_ImageStore_Update]
(
    @ImageStore_nbr INT,
    @Name [nvarchar](50),
    @MimeType [nvarchar](50),
    @Content [image]
)
AS
UPDATE [dbo].[ImageStore] SET [Name] = @Name,[MimeType] = @MimeType,[Content] = @Content 
WHERE [ImageStore_nbr] = @ImageStore_nbr
GO

View Code

在實體Entity類ImageStoreEntity.cs添加一個更新方法，爲控制器服務：

 
在更新功能方面，Insus.NET也提供幾種方法來實現，你擇優而參考。
第一種是按普通方式，是在另一個視圖更新，也就是說，咱們點擊連接，轉向另一個視圖進行更新，更新完畢，轉回原始頁。

因爲在編輯的視圖中，還想顯示這筆記錄的信息，所以咱們把這筆記錄搜索出來。還需得寫另一個存儲過程：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        Insus.NET
-- Create date: 2015-07-09
-- Description:    get record data by primary key.
-- =============================================
CREATE PROCEDURE [dbo].[usp_ImageStore_GetByPrimaryKey]
(
    @ImageStore_nbr INT
)
AS
SELECT [ImageStore_nbr],[Name],[MimeType],[Content] FROM [dbo].[ImageStore] WHERE [ImageStore_nbr] = @ImageStore_nbr
GO

View Code

咱們應該養成一個習慣，有添刪除存儲過程，Entity類也應該有相應修改：



上面獲取單筆記錄，是在編輯視圖加載時，也把此筆記錄顯示出來。
好了，咱們能夠建立控制的視圖Action了：

 

上面#109行代碼，有一個方法，它是將DataRow數據行轉換爲對象，以本例，它就是ImageStore對象。方法詳細，可參考下面：



建立一個Edit視圖：

 

如今我須要回至前些天好的頁面ImageManagement.cshtml的數據顯示作編輯連接：

 

如今來運行上面的程序，看看效果：

結查還行。如今在Edit視圖添加圖片編輯功能，首先去數據建立更新的存儲過程：



修改MVC程序的實體Entity:

修改控制器，添加一個更新的操做：

 

在視圖Edit中，添加文件上傳與更新功能：

 

基本上完成了，看看運行時的效果，演示中所選擇圖片來源於Insus.NET的微博(新浪，騰訊)和QQ空間:
http://weibo.com/104325017
http://t.qq.com/leo_insus
http://user.qzone.qq.com/104325017/main

 


嗯，達到想象中的結果。
接下來，咱們一個一個對上面例子中，有哪些不足或是問題，儘可能解說與解決。先看看上面的最後一個演示，返回前一頁時，內容須要Refresh以後，才獲取最新數據，咱們須要在Edit視圖中，添加一個返回按鈕或超連接：

再來看看動態演示：



這樣傳遞參數，用戶也能夠直接修改參數據，當輸入一個不存在的主鍵值時，程序直接拋出異常。
There is no row at position 0.




這是由於數據庫根本不存在此記錄，返回空行記錄給程序。所以咱們添加一個判斷在控制器中：

 
再來測試另一種狀況，若是用戶知道Edit視圖，直接訪問，而不是從ImageManagement視圖中連接點擊來轉向呢？或是刪除參數，也會出現異常。

The parameters dictionary contains a null entry for parameter 'imageStore_nbr' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'Insus.NET.Controllers.July15Controller'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

看看：



Insus.NET的也沒有較好的辦法來解決，不過Insus.NET的暫時的處理是設置一個默認值給這個Action操做參數。以下：



因爲這個默認值，也是數據庫中沒有的主鍵值，它根據前面一個當主鍵值不存在時來處理。其實，你還能夠添加一個判斷，若是用戶直接訪問Edit視圖，能夠轉導向真正源始視圖ImageManagement：



好的，還測試一下剛纔修改好的代碼：



控制器中Edit視圖操做代碼：

 public ActionResult Edit(int imageStore_nbr = 0)
        {
            if (Request.QueryString["imageStore_nbr"] == null)
                return RedirectToAction("ImageManagement");
            
            ImageStore objIS = new ImageStore();

            ImageStoreEntity ise = new ImageStoreEntity();
            DataTable dt = ise.GetRecordByPrimary(imageStore_nbr);

            if (dt.Rows.Count > 0)
            {
                DataRow dr = dt.Rows[0];
                DataTableUtility.DataRow2Object(dr, objIS);
                return View(objIS);
            }
            else
            {
                ContentResult cr = new ContentResult();
                cr.Content = "不存在或錯誤的主鍵值。";
                cr.ContentType = "text/plain";
                cr.ContentEncoding = System.Text.Encoding.UTF8;
                return cr;
            }
        }

View Code

第二種更新方法，是在同一個視圖，上傳標籤仍是與添加功能共用一個。爲了區別前面的操做方法，在控制器中，添加另一個Action:

 在視圖Razor動態產的table中，添加一個列，在數據產生的行中，實現一個編輯銨鈕：

 

在form中，還須要添加兩個銨鈕，一個是更新，一個取消，還有一個原有標籤須要修改，以下：

上面標記1，給form1添加一個屬性id，是爲了稍後咱們在jQuery代碼，動態更改form的Action名稱。

標記2，添加一個html隱藏標籤，是爲了存儲記錄的主鍵值。

標記3，給原有submit標籤添加一個id屬性。

標記4與5，分別添加一個更新與取消html標籤銨鈕，它們初始狀態是禁用了。也就是說一開始用戶是沒法點擊的。

好了，如今咱們須要分別實現這個3個銨鈕的事件，先是編輯

 

上面代碼示例了，標記1是當用戶點擊某行編輯的銨鈕時，即時禁用當前的銨鈕。
標記2，爲隱藏標籤賦值。
標記3，是啓用更新與取消銨鈕，仍是添加上傳銨鈕禁用。

下面是取消銨鈕jQuery事件:

當取消時，咱們須要動態去修改form的action值，改成添加上傳的action。
還要把用戶點擊編輯的銨鈕狀態由禁用改成啓用。

第#95至#97行代碼是把上傳銨鈕的狀改成啓用。取消與更新銨鈕改成禁用。

還有一個銨鈕，是更新銨鈕事件：

代碼完成了，測試一下效果：

 

 

上面測試中，出現一點小問題，就是取消時，編輯銨鈕狀態並無由禁用改成啓用。咱們修改正一下代碼：

 

下面咱們Review一下咱們寫好的程序，在控制器，因爲使用了幾個更新，有代碼冗餘：

上面高亮部分代碼均是冗餘的，咱們能夠重構一個方法：

 
重構成下面這樣子：

 

本篇就列舉兩個例子算了，第三種更新方式，得需另起一篇，由於本篇已經太長了。兩種方式，各有所長，各有所短。你本身選擇之。其中有出現異常處理方法，也許還有很不完美，但能夠優化之。