NET编辑与创新数据,MVC图片管理

Insus.NET在实现《ASP.NET开垦,从二层至三层,至面向对象
(5)
http://www.cnblogs.com/insus/p/3880606.html 中,未有把数量编辑与更新作用同步演示,留下给网上朋友们自由发挥,然而如故有网民想看看Insus.NET用达成方式。

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 。咱们也是在那些基础上张开周全的。

初阶Insus.NET的做法,是在GridView控件中开始展览。如那篇录像教程《GridView
Edit Update Cancel
Delete
http://www.cnblogs.com/insus/archive/2011/01/25/1944295.html

在数据库中开创创新存款和储蓄进程:

恐怕那篇《网址是或不是有广播音乐效果http://www.cnblogs.com/insus/archive/2013/05/09/3066347.html 
均可以观望GridView控件的换代功效。

图片 1

小结过去的经验,认为编辑或更新GridView控件的笔录,用户必要点击多次按键,能力到位。而且对GridView控件编写的代码也多。由此Insus.NET想一贯点击GridView控件某笔记录,然后呈现于增添的域中进行更新。

图片 2图片 3

OK,起初来看望:
首先在GridView控件增加一列:
图片 4

-- =============================================
-- 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

接下来在丰裕按钮后,再增加多个铵钮,一个是立异,三个是吊销:
 图片 5

View Code

 

在实业Entity类ImageStoreEntity.cs增多三个更新方法,为调节器服务:
图片 6

那三个铵钮,一初叶它的意况是禁止使用的,可看它们的Enabled=“false”。也正是说网页加载时,那多个铵钮是不可用。
接下去,大家分别完结OnRowCreated=”GridViewEmployee_RowCreated”,OnClick=”ButtonUpdate_Click”和OnClick=”ButtonCancel_Click”事件。先达成率先个,点击GridView控件某一笔记录时,希望能收获那笔记录数据。由此供给创建一个新的贮存进程,By主键来获得点击当前记下:
图片 7

 
在更新作用方面,Insus.NET也提供三种方法来落到实处,你选择优秀者而参谋。
首先种是按一般格局,是在其它叁个视图更新,也正是说,我们点击链接,转向其它一个视图进行立异,更新完结,转回原始页。

有增多了多少库层的囤积进度,前一篇写好的Employee.cs也亟需增加相应的逻辑方式大概函数。
图片 8

出于在编写制定的视图中,还想显示这笔记录的音信,因而大家把那笔记录搜索出来。还需得写此外多个仓库储存进程:
图片 9

现行反革命得以写了:
图片 10

图片 11图片 12

地点有二个事件委托Button艾德it_Click:
图片 13

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

上边程序有几点表达,先是点击编辑之后,获取被点选的的笔录主键,然后以主键是获取整笔记录,然后绑定给增加域中去(标志1)。标识2,须求把添加铵钮与绑定主键的文本框禁止使用。
标志3是Active更新和注销铵钮。

View Code

上面是收回铵钮ButtonCancel_Click事件,实际便是初步化控件状态效率:
图片 14

咱俩应该养成一个习贯,有添删除存款和储蓄进度,Entity类也理应有照料修改:
图片 15

文本框清空,该禁止使用的铵钮禁用,该启用的铵钮启用。最终是翻新铵钮ButtonUpdate_Click事件:
图片 16

地点得到一笔记录,是在编辑视图加载时,也把此笔记录展现出来。
好了,我们能够创造调整的视图Action了:

观看否,撤销铵钮与革新事件甘休之后,所试行的代码是同样的。因而能够把它们写成三个单身的小方法:
图片 17

 图片 18

 

上面#109行代码,有二个方法,它是将DataRow数据行调换为目的,以本例,它正是ImageStore对象。方法详细,可参看上边:
图片 19

落到实处完了,看看实时操作演示效果,点击“Edit”铵钮时,它出现了二个要命:
Line: 885
Error: Sys.WebForms.PageRequestManagerServerErrorException: Object
reference not set to an instance of an object.
图片 20

创制三个Edit视图:
图片 21
 

F9设定中断点,F5debug,然后按F11进行追踪,跑到上面出现万分了:
图片 22

当今自身要求回至今天好的页面ImageManagement.cshtml的数目展现做编辑链接:
图片 23

细心检查,原本真的的难题,出现在BizBaseSQLSp.cs类库中,函数public
DataSet ExecuteDataSet(),下边是修改精确方法:
图片 24

 

封存,再次运维:
图片 25

现行反革命来运作方面包车型地铁主次,看看效果:

未曾难度,那样的话,设计网页时,能够把增加域与编写制定同用,不必浪费在写GridView控件内,还要定义编辑模版。

图片 26

Insus.NET虽写的不是怎么着绝世之作,平凡之中能让您从中获得对ASP.NET工夫的有所晋级与积淀,足已。

结查还不错。今后在艾德it视图增添图片编辑功效,首先去数据创设创新的蕴藏进度:
图片 27

修改MVC程序的实业Entity:
图片 28

修改调控器,增多三个更新的操作:
图片 29

 

在视图艾德it中,增加文件上传与创新效率:
图片 30

 

多数变成了,看看运营时的效果,演示中所采用图片源于Insus.NET的今日头条(天涯论坛,腾讯)和QQ空间:
http://weibo.com/104325017
http://t.qq.com/leo_insus
http://user.qzone.qq.com/104325017/main

 图片 31

嗯,达到想象中的结果。
接下去,大家一个二个对地点例子中,有何样不足或是难点,尽量阐述与缓慢解决。先看看上面包车型客车最后一个演示,重返前一页时,内容需求Refresh之后,才拿走最新数据,咱们须要在艾德it视图中,加多一个回来按键或超链接:

图片 32

再来看看动态演示:
图片 33

诸如此类传递参数,用户也足以平素改变参数据,当输入一个不存在的主键值时,程序直接抛出特别。
There is no row at position
0.

图片 34

那是因为数据库根本不存在此记录,重临空行记录给程序。因而大家抬高四个肯定在调控器中:
图片 35

 
再来测试其它一种意况,假若用户知道艾德it视图,直接访问,而不是从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

看看:
图片 36

Insus.NET的也未有较好的措施来缓和,但是Insus.NET的不常的拍卖是设置三个暗中认可值给那个Action操作参数。如下:
图片 37

出于这几个暗中同意值,也是数据库中绝非的主键值,它遵照前边三个当主键值不设一时来管理。其实,你仍是能够拉长三个论断,如若用户直接待上访问艾德it视图,能够转导向真正源始视图ImageManagement:
图片 38

好的,还测试一下方才修改好的代码:
图片 39

调控器中艾德it视图操作代码:

图片 40图片 41

 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:
图片 42

 在视图Razor动态产的table中,增添一个列,在数据发生的行中,达成八个编纂铵钮:
图片 43

 

在form中,还索要增加四个铵钮,多个是翻新,贰个撤回,还应该有叁个原始标签须要修改,如下:
图片 44

地点标识1,给form1加多三个属性id,是为着稍后大家在jQuery代码,动态退换form的Action名称。

标志2,加多贰个html隐藏标签,是为了存款和储蓄记录的主键值。

标志3,给原来submit标签增多二个id属性。

标记4与5,分别增加贰个翻新与撤消html标签铵钮,它们起首状态是禁止使用了。也正是说一初阶用户是心有余而力不足点击的。

好了,未来我们须求各自实现这些3个铵钮的风云,先是编辑

图片 45

 

上面代码示例了,标志1是当用户点击某行编辑的铵钮时,即时禁止使用当前的铵钮。
标识2,为隐蔽标签赋值。
标记3,是启用更新与撤废铵钮,依然增加上传铵钮禁止使用。

上面是收回铵钮jQuery事件:
图片 46

当撤除时,大家要求动态去修改form的action值,改为丰盛上传的action。
还要把用户点击编辑的铵钮状态由禁止使用改为启用。

第#95至#97行代码是把上传铵钮的状改为启用。裁撤与立异铵钮改为禁止使用。

再有一个铵钮,是翻新铵钮事件:
图片 47

代码完结了,测试一下效能:

 图片 48

 

上边测试中,出现某个小标题,正是裁撤时,编辑铵钮状态并不曾由禁止使用改为启用。大家修校订一下代码:
图片 49

 

上边大家Review一下我们写好的先后,在调整器,由于应用了多少个立异,有代码冗余:
图片 50

上面高亮部分代码均是冗余的,大家能够重构四个方法:
图片 51

 
重构成上边那标准:
图片 52

 

本篇就罗列多少个例证算了,第三种更新方式,得需另起一篇,因为本篇已经太长了。
三种格局,各有优劣,各有所短。你和睦选拔之。当中有出现格外管理措施,或然还大概有很不圆满,但能够优化之。

 

相关文章