如何添加/删除/编辑/更新图像，并将其保存到 SQL 数据库表，以及如何创建类似 Outlook 的带淡入幻灯片的菜单
演示如何添加/删除/编辑/更新图像，并将其保存到 SQL 数据库表，以及如何创建类似 Outlook 的带淡入幻灯片的菜单
此项目（文章）是如何实现的？
创建一个目录C:\AlmojeArticle2。
将 zip 源文件复制到您的计算机：C:\AlmojeArticle2 然后解压…
项目位置在C:\ AlmojeArticle2\Article2 如下所示
点击CreateUserSetupDB子目录。
双击UserSetup文件（SQL 脚本文件），如上所示。
（请注意，您的计算机上应安装有 MS-SQL Management Studio - 2005 或更高版本。）
然后双击“执行”（SQL 脚本，如上所示）。
SQL Management Studio 将创建一个数据库，如下面的屏幕截图所示
如果您打开 SQL Management Studio，脚本应该会自动附加。检查是否出现了如下所示的数据库附加
双击解决方案。
右键单击Welcome.aspx。将其设置为“起始页”，然后按 F5。
应用程序将运行，如下所示
单击菜单“用户帐户”，如上所示。
单击“添加新”按钮，如上所示，以添加记录…
填写文本框，然后单击“保存”。
系统将在数据库表中保存记录，并在网格中显示信息，如下所示。
单击“编辑”图标。
浏览文件夹C:\AlmojeArticle2\Article2\Sample Images。
选择一个图像文件。
单击“保存”按钮
系统将更新数据库表中的图像，并在网格中显示，如下所示
添加另一个（或多个）带有图像的记录。
单击“返回”查看自动幻灯片。
您可以添加任意多条记录。图像保存在数据库表中，而不是虚拟目录中…
引言
本文是我之前文章的更新版本，位于DatabaseToGridview.aspx。
本文将演示技术用法，包括如何添加/删除/编辑/更新图像，将其保存到 SQL 数据库表，以及如何创建类似 Outlook 的带淡入幻灯片的菜单。
数据库
正如我之前在我的文章中提到的原因
为什么我们应该使用数据库，而不是仅仅将图像放在 ASP.NET 主文件夹下的虚拟文件夹中？嗯，将图像存储在数据库中有几个好处。
原因请参见此处。
那么数据库[UsersInfo]看起来是怎样的？
它只包含一个名为User的表，可以使用以下脚本进行设置（此 SQL 脚本是本文开头创建的对象中的内容）
USE [master]
GO
/****** Object: Database [UsersInfo] Script Date: 10/14/2011 08:49:36 ******/
CREATE DATABASE [UsersInfo] ON PRIMARY
( NAME = N'UserDB', FILENAME = N'C:\AlmojeArticle2\Article2\App_Data\UsersInfo.mdf' ,
SIZE = 2048KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N'UserDB_log', _
FILENAME = N'C:\AlmojeArticle2\Article2\App_Data\UsersInfo_log.ldf' ,
SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [UsersInfo] SET COMPATIBILITY_LEVEL = 90
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [UsersInfo].[dbo].[sp_fulltext_database] @action = 'disable'
end
GO
ALTER DATABASE [UsersInfo] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [UsersInfo] SET ANSI_NULLS OFF
GO
ALTER DATABASE [UsersInfo] SET ANSI_PADDING OFF
GO
ALTER DATABASE [UsersInfo] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [UsersInfo] SET ARITHABORT OFF
GO
ALTER DATABASE [UsersInfo] SET AUTO_CLOSE ON
GO
ALTER DATABASE [UsersInfo] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [UsersInfo] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [UsersInfo] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [UsersInfo] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [UsersInfo] SET CURSOR_DEFAULT GLOBAL
GO
ALTER DATABASE [UsersInfo] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [UsersInfo] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [UsersInfo] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [UsersInfo] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [UsersInfo] SET DISABLE_BROKER
GO
ALTER DATABASE [UsersInfo] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [UsersInfo] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [UsersInfo] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [UsersInfo] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [UsersInfo] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [UsersInfo] SET READ_COMMITTED_SNAPSHOT OFF
GO
ALTER DATABASE [UsersInfo] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [UsersInfo] SET READ_WRITE
GO
ALTER DATABASE [UsersInfo] SET RECOVERY FULL
GO
ALTER DATABASE [UsersInfo] SET MULTI_USER
GO
ALTER DATABASE [UsersInfo] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [UsersInfo] SET DB_CHAINING OFF
GO
USE [UsersInfo]
GO
/****** Object: Table [dbo].[User] Script Date: 10/14/2011 08:49:37 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[User](
[UserID] [int] IDENTITY(1,1) NOT NULL,
[Username] [varchar](255) NOT NULL,
[Password] [varchar](max) NOT NULL,
[LastName] [varchar](255) NULL,
[FirstName] [varchar](255) NULL,
[MiddleName] [varchar](255) NULL,
[WorksiteCode] [varchar](50) NOT NULL,
[AccessLevel] [int] NOT NULL,
[Active] [varchar](5) NOT NULL,
[DateCreated] [datetime] NULL,
[DateUpdated] [datetime] NULL,
[Worksitedesc] [varchar](50) NULL,
[Picture] [varbinary](max) NULL,
[ImageFull] [varbinary](max) NULL,
CONSTRAINT [PK_Users] PRIMARY KEY CLUSTERED
(
[UserID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, _
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
那么我如何制作一个类似 Outlook 的菜单呢？
让我们来看看我制作的客户端代码及其代码隐藏。它们非常简单，事实上，我认为代码注释已经解释得很详细了。所以我只挑了一些重要的代码行，不会用更多解释性的文字来烦扰您，因为它很清楚，不是吗？
所以这是客户端代码（js\OutlookMenu.aspx）。
<link rel="Stylesheet" type="text/css" href="css/XPStyle.css" />
<style type="text/css">
.marquee:
{
width: auto;
height: auto;
color: #CC9900;
}
.verticaltext
{
font: bold 10px Arial;
position: absolute;
right: 3px;
top: 20px;
width: 15px;
writing-mode: tb-rl;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/AlgemShow.js"></script>
<script language="JavaScript" src="js/crossbrowser.js" type="text/javascript"> </script>
<script language="JavaScript" src="js/outlook.js" type="text/javascript"></
我创建了一个 CSS 代码（css/XPStyle.css）用于外观和感觉的页面自定义，并对其进行了引用，还包括一个用于图像滚动的附加 CSS（如上所示）。我还包含来自 Dynamic Drive 的四个 JavaScript 来执行幻灯片图像。
所以这是（客户端代码）…
<td width="14%">
<asp:Literal ID="myMenu" runat="server" OnPreRender="myMenu_PreRender" Text="">
</asp:Literal>
</td>
<td>
<div id="fadeshow1">
<asp:Literal ID="Literal1" runat="server" Text=""></asp:Literal>
</div>
</td>
在上面的代码中，我定义了一个宽度为 14% 的菜单表格，使用 asp:Literal 和唯一的 ID="myMenu"。这用于保存菜单选择。我还定义了一个用于自动幻灯片的 division，使用唯一的 div id="fadeshow1" 作为 asp:Literal。
这是实现上述功能的代码隐藏…
protected void Page_PreRender(object sender, EventArgs e)
{
try
{
// Call a function to return a literal text then register on page
string fadeshow1 = AlgemShow("Show", "*.jpg",
"always", "fadeshow1", "340", "340", "peekaboo", "");
Page.ClientScript.RegisterStartupScript(GetType(), "Startup", fadeshow1, false);
}
catch (Exception)
{
}
// Here I include a hidden text field to hold an access level
// if ever login page should provide.
if (this.hfAccessLvl.Value == string.Empty)
{
this.hfAccessLvl.Value = "9"; // Since I have no login page,
//I set Administrator rights to 9 for demo purposes.
}
//string menus = string.Empty;
try
{
string appsPath = Server.MapPath("./");
//Call the function AlMenu passing target outlook file menu,
//and the access level of
//user with its target width and height of the menu page.
this.myMenu.Text = AlMenu("js/OutlookMenu.aspx?accesLevel=" +
this.hfAccessLvl.Value, "no", "460px", "100");
}
catch (Exception)
{
}
}
protected string AlMenu
(string outlookFile, string isScrolling, string height, string width)
{
//Purpose wrapped the C# code to form an html code (for Outlook like menu)...
StringBuilder sb = new StringBuilder();
sb.Append("<iframe id=\"OutLookMenu\"");
sb.Append("src='" + outlookFile + "' ");
sb.Append("name=\"Links\" scrolling='" + isScrolling + "' height='" + height + "', ");
sb.Append("width='" + width + "%'></iframe>'");
return sb.ToString();
}
public string AlgemShow(string target, string fileExt, string toggle,
string ids, string heigth, string weidth, string descreveals, string message)
{
// Author: Algem G Mojedo
// Date: 2-22-2011
//Purpose Get file name of images in a target virtual drive…
//Wrapped the C# code to form an html script code (for slide show)...
// Target drive image show is at: C:\AlmojeArticle2\Article2\Show
bool useFileName = false;
if (message == string.Empty)
{
useFileName = true;
}
string path = AppDomain.CurrentDomain.BaseDirectory.ToString() + target;
string targets = path + "\\";
string[] files = Directory.GetFiles(targets, fileExt);
DirectoryInfo infoDir = new DirectoryInfo(targets);
StringBuilder sb = new StringBuilder();
sb
.Append("<script type=\"text/javascript\"> ")
.Append("var gallary=new AlgemShow({ ")
.Append("wrapperid: ")
.Append("\"").Append(ids).Append("\", ")
.Append("dimensions: [" + heigth + "," + weidth + "], ")
.Append("imagearray: [");
foreach (var item in files)
{
string fileName = Path.GetFileNameWithoutExtension(item);
string messages = item.Replace(targets, "");
string itemValue = target + "\\\\" + messages;
if (useFileName)
{
message = fileName;
}
sb.Append("[").Append("\"").Append(itemValue).Append("\",").Append("\"\",\"")
.Append("\",\"").Append(message).Append("\"], ");
}
string arr = sb.ToString().Substring(0, sb.ToString().LastIndexOf(","));
StringBuilder sb2 = new StringBuilder();
sb2.Append(arr);
sb2.Append("], ")
.Append("displaymode: {type:'auto', pause:2500, cycles:0, wraparound:true}, ")
.Append("persist: false, ")
.Append("fadeduration: 500, ")
.Append("descreveal: \"").Append(descreveals).Append("\", ");
if (toggle == string.Empty)
{
sb2.Append("togglerid: \"\" ");
}
else
{
sb2.Append("togglerid: \"").Append(toggle).Append("\" ");
}
sb2.Append("}) ")
.Append("</script>");
string cmd = sb2.ToString();
return cmd;
}
DataGridView 的代码隐藏，用于添加/删除/展开图像，在我之前的文章 DatabaseToGridview.aspx 中。
这是用于编辑 DataGridView 的客户端代码。我应该概述重要的代码行，因为有些代码非常简单
所以这是…
<%@ Register Src="~/UsersControl/EditUserAcct.ascx"
TagName="EditUserAcct" TagPrefix="uc4" %>
上面的代码是用于在页面上注册用户控件
<asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Edit">
<ItemTemplate>
<asp:ImageButton ID="gImgBtnEdit" runat="server" ToolTip="Edit"
ImageUrl="~/Images/btn_edit.gif" OnClick="gImgBtnEdit_Click" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
上面的代码定义了用于图像按钮单击的模板字段。
<cc1:ModalPopupExtender runat="server" ID="mpeEditUserAcct"
TargetControlID="hfPopEditAcct"
PopupControlID="pnlEditUserAcct" BackgroundCssClass="AlgemBackground"
BehaviorID="mpeBehavior4"
DropShadow="false" PopupDragHandleControlID="pnlEditUserAcct">
</cc1:ModalPopupExtender>
<asp:Panel runat="server" ID="pnlEditUserAcct" Style="display: none;
background-color: White;" Width="70%">
<uc4:EditUserAcct runat="server" ID="ucEditUserAcct" />
</asp:Panel>
<asp:Button runat="server" ID="hfPopEditAcct" Style="display: none" />
上面的代码是弹出模态窗口（用户控件）的定义。
protected void gImgBtnEdit_Click(object sender, EventArgs e)
{
ImageButton iBtnEdit = sender as ImageButton;
GridViewRow row = (GridViewRow)iBtnEdit.NamingContainer;
User user = new User();
// Get the value of column cell and store to user defined class
user.UserID = Tools.Tools.IifInt(row.Cells[2].Text);
user.Username = Tools.Tools.IifStr(row.Cells[3].Text);
user.Password = Tools.Tools.IifStr(row.Cells[4].Text);
user.LastName = Tools.Tools.IifStr(row.Cells[5].Text);
user.FirstName = Tools.Tools.IifStr(row.Cells[6].Text);
user.MiddleName = Tools.Tools.IifStr(row.Cells[7].Text);
user.WorksiteCode = Tools.Tools.IifStr(row.Cells[8].Text);
user.AccessLevel = Tools.Tools.IifInt(row.Cells[9].Text);
user.Active = Tools.Tools.IifStr(row.Cells[10].Text);
// Save to current page to Session for retrieving when back from popup edit page...
// To store the page index and the primary key User
// Id where the edit record was clicked…
SessionManager.KeyPrimary = Convert.ToInt32(user.UserID).ToString();
SessionManager.PageIndex = this.GridView1.PageIndex.ToString();
// Call the public function DisplayInf of User's control page.
// Pass 'user class' values...
ucEditUserAcct.DisplayInf(sender, e, user);
// Show the user's custom control popup page for editing...
mpeEditUserAcct.Show();
}
上面的代码是用于编辑的图像按钮点击事件。它们非常简单，事实上，我认为上面的代码注释已经解释得很详细了。
public void CloseModalEditUserAcct()
{
mpeUserAccountUC.Hide();
mpeUserAccountUC.Dispose();
Response.Redirect("DisplayRecord.aspx");
}
上面的代码在关闭用户控件弹出模态窗口后，从自定义控件弹出页面调用。
public void IvokeEdit()
{
mpeEditUserAcct.Show();
this.upUserGrid.Update();
}
上面的代码从自定义控件弹出页面（‘btnUpload_Click(object sender, EventArgs e)’）调用。执行上传点击按钮后。自定义用户控件会回发，因此关闭弹出编辑页面并转到网格显示。通过调用此 InvokeEdit 显示，会重新打开弹出编辑用户自定义控件及其更新条目…
关注点
本文作者描述了技术用法，包括如何添加/删除/编辑/更新图像，保存到 SQL 数据库表，以及如何创建类似 Outlook 的带淡入幻灯片的菜单。
Added
这是一个健壮的、跨浏览器的淡入幻灯片脚本，它集成了您最常要求的一些功能。页面上的每个淡入幻灯片实例都是完全独立的，并支持为每个幻灯片选择性地启用不同的功能。
这个独特的 Outlook 式菜单会在用户干预之前隐藏其内容。它支持无限数量的类别，并且在所有 DHTML 浏览器（IE4、NS4+、Mozilla 0.9、Opera5）中都能工作。在框架页面中效果最好。
历史
- 2011 年 10 月：初始版本