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

在实体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 Controll。这是客户端标签,那就使用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)

开发转至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);
                            }
                        });
                    }
                }
            });

不管怎样,我们开发程序,均是为了高效与介面友好。上面批理删除,我们是把所有选择的主键值串连一起传入数据库中,那是为了高效。不必有程序中循环分别传入数据库中去。在较高一些版本的数据库,还有另外一法,也是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代码,也是相当简单:

此时,这个需要一个动画演示:

时间: 2024-10-11 19:03:07

ASP.NET MVC图片管理(删除)的相关文章

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 .我们也是在这些基础上进行完善的. 在数据库中创

ASP.NET MVC图片管理(上传,预览与显示)

先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹饪的晚餐.如果你也想学习烹饪,也可以关注Insus.NET的微博. 言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中.这次练习是把图片存储于数据库.也就是以图片的数据流存储.在上传时我们需要把文件处理为数据库,显示时,我们需要

Html5+asp.net mvc 图片压缩上传

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

ASP.NET MVC一次删除多笔记录

批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器中去. 上图中的html代码如下: 在MVC的model类,添加一个属性: 在jQuery中,把所有数据循环一遍,把选择的记录的主键值命名用空间分隔组合为一个字符串.其实使用逗号,分号都可以,但最好处理的还是空格. 实体Entity中的删除方法: 最后有数据库中的存储过程是怎样处理:

C# ASP.NET MVC 图片盗链 加水印 的问题

public static void ZoomAuto(System.IO.Stream fromFile, string savePath, System.Double targetWidth, System.Double targetHeight, string waterText, string waterImage,out int NewWidth,out int NewHeight) { //创建目录 string dir = Path.GetDirectoryName(savePat

ASP.NET MVC图片上传

工具:ssi-uploader $('#id').ssi_uploader({ url: 'path' }); public ActionResult path() { HttpPostedFileBase file = Request.Files[0]; string savePath = AppDomain.CurrentDomain.BaseDirectory + ""+file.FileName; file.SaveAs(savePath); }

ASP.NET MVC图片上传前预览

@{ ViewBag.Title = "Picture"; } <!DOCTYPE html> <html> <head> <script src='@Url.Content("~/assets/plugins/jquery-1.10.2.min.js")' type="text/javascript"></script> <script type="text/javas

快速构建ASP.NET MVC Admin主页

前言 后台开发人员一般不喜欢调样式,搞半天样式出不来,还要考虑各种浏览器兼容,费心费力不讨好,还好互联网时代有大量的资源共享,避免我们从零开始,现在就来看怎么快速构建一个ASP.NET MVC后台管理admin主页的方法,先看一看最终的效果! 第一步:选择一个合适的admin模板 互联网时代就是资源共享的时代,网上各种前端模板,这里主要是说明怎么把模板整合到我们的ASP.NET MVC项目中,至于模板大家可以自己去选择喜欢的,这里我们选择这个清爽版的AircraftAdmin,首先看看Aircr

ASP.NET MVC+EF框架+EasyUI实现权限管理系列

http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也要感谢大家了,因这个 项目我已经上传了,得到了很多网友的评价,也有好多人发邮件给我说这个框架容易出现问题,不能访问,这也是支持我写这个系列的动力,我将这个项目写成一个 系列