ASP.NET MVC圖片管理(刪除)

上星期有寫了一篇《ASP.NET MVC圖片管理(上傳，預覽與顯示)》http://www.cnblogs.com/insus/p/4620420.html 它只實現了上傳功能，即時預覽以及顯示功能。今天咱們來完成刪除功能。

因爲圖片是以二進制存儲在數據庫中，這樣刪除是很方便的。只需刪除數據庫記錄便可。

先在數據庫建立一個存儲過程：

CREATE PROCEDURE [dbo].[usp_ImageStore_Delete]
(
    @ImageStore_nbr INT
)
AS
DELETE FROM [dbo].[ImageStore] WHERE [ImageStore_nbr] = @ImageStore_nbr
GO

View Code

在實體Entity中建立刪除方法，程序與數據庫溝通。

接下來，還須要在控制器建立Action操做：



在#70代碼中，因爲咱們使用連接來實現刪除，沒有post數據，所以操做不使用屬性HttpPost。若是你使用的話，刪除會有異常：The resource cannot be found.



好了，在視圖中，數據顯示錶，添加一列，以下高亮部位：


演示一下：

 

 

一點就刪除了，再正常不過了，這樣的設計沒有半點人性化，讓用戶有確認或是後悔的選擇。在刪除的連接中，添加多一個參數htmlAttributes：



再看看效果：

 

 
一筆一筆記錄刪除，彷佛有點不過隱，Insus.NET下面作一個批量刪除演示。
實現這個功能，須要考慮一下，怎樣處理選擇的記錄的主鍵值，收集與存儲，以何方式傳入至數據中去。ASP.NET MVC 作銨鈕刪除：

<input id="Button1" type="button" value="Delete" />

已經不是ASP.NET Form的Web Control。這是客戶端標籤，那就使用jQuery實現吧。

咱們仍是按上面的順序，先在數據庫層入手，寫存儲過程或處理傳入的字符串開始。因爲咱們傳入的字符串，如「2，5，4，10，25」 ，寫一個函數，把這些字符轉換爲一張數據表：



好了，寫一個存儲過程，是爲了批量刪除使用的：


上面畫紅線的部分，便是上面SQL自定義函數的應用。存儲過程代碼:

ALTER PROCEDURE [dbo].[usp_ImageStore_batchDelete]
(
    @MultiPrimaryKeyString NVARCHAR(MAX) 
)
AS
DELETE img FROM [dbo].[ImageStore] AS img 
RIGHT JOIN [dbo].[udf_SplitStringToTable](@MultiPrimaryKeyString,',') AS mpk ON (img.ImageStore_nbr = mpk.Value)

View Code

開發轉至ASP.NET MVC，有Entity寫批量刪除的方法：

 在控制器中，咱們建立一個操做，爲jQuery使用：

 

Ok,主要的工做仍是視圖，咱們須要修改html和添加jQuery代碼，不急同樣同樣來。添加一個銨鈕標籤以及Checkbox:



實現jQuery代碼：

運行看看是否達到預期效果？

沒有問題，能正常刪除記錄。不過仍是沒有後悔提示，讓用戶確認以後，才正確刪除，添加一行代碼：

再次演示：

 

 
jQuery Button的事件代碼：

 $("#Button1").click(function () {
                var valList = "";
                $('input[name="imgSel"]').each(function () {
                    if (this.checked)
                        valList += ',' + $(this).val();
                });
                valList = valList.length > 0 ? valList.substring(1, valList.length) : "";


                if (valList == "") {
                    alert("Select Delete Records.");
                    return;
                }
                else {
                    if (confirm("All selected records will be delete!") == true) {
                        $.ajax({
                            type: 'POST',
                            url: '/July15/BatchDelete',
                            dataType: 'json',
                            data: JSON.stringify({
                                strPkLists: valList
                            }),
                            contentType: 'application/json; charset=utf-8',
                            success: function (data, textStatus) {
                                alert("Delete成功。");
                                location.reload();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(errorThrown);
                            }
                        });
                    }
                }
            });

View Code

無論怎樣，咱們開發程序，均是爲了高效與介面友好。上面批理刪除，咱們是把全部選擇的主鍵值串連一塊兒傳入數據庫中，那是爲了高效。沒必要有程序中循環分別傳入數據庫中去。在較高一些版本的數據庫，還有另一法，也是Insus.NET較經常使用的方法。就是把全部選擇的主鍵值放在一個DataTable中，而後把這個DataTable傳入數據庫中。

你能夠有數據庫自定義一個數據類型，這個類型其實就是DataTable的結構。

 

 再建立一個存儲過程：

在MVC的實體(Entity)中代碼參考下面#59~#78，其中#61,62是定義一個DataTable。#64是把字符串根據 「，」 分割爲陣列。#66~69是循環陣列把值存儲DataTable中。



在控制器中，咱們稍修改一下操做：

OK了，最後一個實例動畫演示就不上了。跟上面的演示是同樣了。整篇中，也許還寫不夠完整。可是Insus.NET所掌握的，均分享於此，望你有所瞭解有所收穫......


如下內容於2015-07-07 14:20分添加：
博文發表完以後，才發現還有一個小功能沒有實現，就是在表頂放一個全選的checkbox。沒有問題，現補充上來，讓其更全面：
在html修改，添加checkbox:



寫jQuery代碼，也是至關簡單：

 
此時，這個須要一個動畫演示：