FormView顯示、更新、插入、刪除數(shù)據(jù)庫操作[ASP.NET源代碼](一)
FormView可分頁呈現(xiàn)一個表格的數(shù)據(jù),每頁只呈現(xiàn)表格中的一項。它的最大特點是可自由編輯模板,一般用來顯示商品的詳細信息。FormView有三個可編輯模板,ItemTemplate、EditItemTemplate和InsertItemTemplate、常用來管理數(shù)據(jù)庫表格數(shù)據(jù),顯示、編輯、插入、刪除表格中的數(shù)據(jù)項。
一、使用 FormView控件顯示 SqlDataSource控件中的值
1、設(shè)置FormView控件,注意DataKeyNames="ItemID"項。
2、設(shè)置SqlDataSource屬性,由于要查詢兩個內(nèi)聯(lián)表,兩個表中都有一個Name字段,因此用了別名。
3、編輯ItemTemplate模板,先添加了“編輯”、“刪除”、“新建”按鈕,“編輯”和“新建”按鈕都有個CommandName屬性,分別為Edit和New,點擊可分別進入EditItemTemplate和InsertItemTemplate、模板;刪除按鈕的CommandName屬性是Delete,點擊可執(zhí)行SqlDataSource中的DeleteCommand命令,同時,還可發(fā)出OnItemDeleting等命令,在刪除前完成一些功能。
4、窗體文件代碼如下:
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FormViewDemo1.aspx.cs" Inherits="FormViewDemo1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head runat="server">
<title>肯德基訂餐系統(tǒng)</title>
</head>
<body>
<form id="form1" runat="server">
<h3>FormView 顯示、更新、插入、刪除數(shù)據(jù)庫操作</h3>
<
asp:FormView ID="fvwItem" DataSourceID="sdsItem" runat="server"
AllowPaging="True"
DataKeyNames="ItemID"
EmptyDataText="數(shù)據(jù)庫中暫時沒有任何數(shù)據(jù)">
<RowStyle BackColor="Yellow" Wrap="False" />
<InsertRowStyle BackColor="GreenYellow" Wrap="False" />
<EditRowStyle BackColor="LightPink" Wrap="false" />
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<td colspan="6" height="30" width="420" align="center">
<h4>FormView ItemTemplate 模板</h4>
</td>
</tr>
<tr>
<td width="30">
</td>
<td rowspan="4" width="120">
<asp:Image Width="120" Height="120" ID="imgItem" ImageUrl='<%# Eval("Image") %>' AlternateText='<%# Eval("Name") %>'
runat="server" /></td>
<td width="30">
</td>
<td width="60">
</td>
<td width="60">
</td>
<td width="60">
</td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
類別:</td>
<td colspan="2">
<%# Eval("CategoryName") %>
</td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
名稱:</td>
<td colspan="2">
<%# Eval("Name") %>
</td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
價格:
</td>
<td colspan="2">
<%# Eval("Price") %>
</td>
<td width="60">
</td>
</tr>
<tr>
<td height="30" width="30">
</td>
<td height="30" width="120">
</td>
<td height="30" width="30">
</td>
<td height="30" width="60">
</td>
<td height="30" width="60">
<asp:Button ID="btnEdit" runat="server" Text="編輯" CommandName="Edit"/></td>
<td height="30" width="60">
<asp:Button ID="btnDelete" runat="server" Text="刪除" CommandName="Delete"/></td>
<td height="30" width="60">
<asp:Button ID="btnNew" runat="server" Text="新建" CommandName="New" /></td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
//==========
<asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:NetShopConnString %>"
SelectCommand="SELECT Item.ItemId AS ItemId,Item.CategoryId AS CategoryId,Item.Name AS Name,Item.Price AS Price,Item.Image AS Image,Category.Name As CategoryName FROM Item INNER JOIN Category ON Item.CategoryId=Category.CategoryId">
</asp:SqlDataSource>
</form>
</body>
</html>
5、代碼頁不需要任何代碼,可直接在
瀏覽器查看運行情圖,如圖1示。
二、使用 FormView控件編輯數(shù)據(jù)
1、編輯EditItemTemplate模板,代碼如下:
[html]
<EditItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<td colspan="6" height="30" width="420" align="center">
<h4>FormView EditItemTemplate 模板</h4>
</td>
</tr>
<tr>
<td width="30">
</td>
<td rowspan="4" width="120">
<asp:Image ID="imgItem" runat="server" AlternateText="上傳瀏覽圖片" Height="120px" ImageUrl='<%# Eval("Image") %>'
Width="120px" /></td>
<td width="30">
</td>
<td colspan="2">
<asp:FileUpload ID="fupImage" runat="server" Width="100%" /></td>
<td width="60">
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="上傳" /></td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
分類:</td>
<td width="120">
<asp:DropDownList ID="ddlCategory" runat="server" DataSourceID="sdsCategory" DataTextField="Name"
DataValueField="CategoryId">
</asp:DropDownList></td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
名稱:</td>
<td width="120">
<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox></td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
價格:
</td>
<td width="120">
<asp:TextBox ID="txtPrice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></td>
<td width="60">
</td>
</tr>
<tr>
<td height="30" width="30">
</td>
<td height="30" width="120">
</td>
<td height="30" width="30">
</td>
<td height="30" width="60">
</td>
<td align="right" height="30" width="120">
<asp:Button ID="btnUpdate" runat="server" CommandName="Update" Text="更新" /></td>
<td height="30" width="60">
<asp:Button ID="btnCancel" runat="server" CommandName="Cancel" Text="取消" /></td>
</tr>
</table>
</EditItemTemplate>
2、為SqlDataSource控件sdsItem添加UpdateCommand命令,并添加<UpdateParameters>
[html]
UpdateCommand="UPDATE Item SET
CategoryId=@CategoryId,Name=@Name,Price=@Price,Image=@Image WHERE
[html]
<UpdateParameters>
<
asp:Parameter Name="CategoryId" />
<asp:Parameter Name="Name" />
<asp:Parameter Name="Price" />
<asp:Parameter Name="Image" />
<asp:Parameter Name="ItemId" />
</UpdateParameters>
3、編輯模板加了一個FileUpload控件,可以選擇并上傳圖片圖片,為了能在上傳后顯示圖片,添加了一個btnUpload按鈕,并添加了這個按鈕的響應(yīng)函數(shù),點擊后,可將文件上傳,并在窗體中顯示上傳后的圖片,代碼如下:
[csharp]
protected void btnUpload_Click(object sender, EventArgs e)
{
FileUpload fup = (FileUpload)fvwItem.FindControl("fupImage");
if (fup.HasFile)
{
fup.SaveAs(Server.MapPath("~\\Images\\Items\\") + fup.FileName);
String str = "~\\Images\\Items\\" + fup.FileName.ToString();
Image img = (Image)fvwItem.FindControl("imgItem");
img.ImageUrl = str;
}
else
{
Response.Write("<script>alert('請先瀏覽并選擇圖片')</script>");
}
}
4、在模板中添加一個類別下拉列表框,為了獲得一個完全的類別,只能再弄一個SqlDateSource,配置如下:
[html]
<asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="<%$ ConnectionStrings:NetShopConnString %>"
SelectCommand="SELECT CategoryId,Name FROM Category">
</asp:SqlDataSource>
5、5、編輯模板中,CategoryID和Image等參數(shù)沒有雙向綁定,需要在上傳前給這兩個參數(shù)賦值,為些,為fvwItem添加了OnItemUpdating="fvwItem_ItemUpdating"消息響應(yīng)函數(shù),代碼如下:
[csharp]
protected void fvwItem_ItemUpdating(object sender, FormViewUpdateEventArgs e)
{
DropDownList ddl = (DropDownList)fvwItem.FindControl("ddlCategory");
sdsItem.UpdateParameters["CategoryId"].DefaultValue = ddl.SelectedValue;
Image img = (Image)fvwItem.FindControl("imgItem");
sdsItem.UpdateParameters["Image"].DefaultValue = img.ImageUrl;
}
6、在
瀏覽器中查看運行結(jié)果。
三、使用 FormView控件更新數(shù)據(jù)
1、編輯InsertItemTemplate模板,代碼如下:
[html] <InsertItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<td colspan="6" height="30" width="420" align="center">
<h4>FormView InsertItemTemplate 模板</h4>
</td>
</tr>
<tr>
<td width="30">
</td>
<td rowspan="4" width="120">
<asp:Image ID="imgItem" runat="server" Width="120px" Height="120px" ImageUrl='<%# Eval("Image") %>'
AlternateText="上傳瀏覽圖片" /></td>
<td width="30">
</td>
<td colspan="2">
<asp:FileUpload ID="fupImage" runat="server" Width="100%"/></td>
<td width="60">
<asp:Button ID="btnUpload" Text="上傳" OnClick="btnUpload_Click" runat="server"></asp:Button></td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
分類:</td>
<td width="120">
<asp:DropDownList ID="ddlCategory" runat="server" DataSourceID="sdsCategory" DataTextField="Name"
DataValueField="CategoryId">
</asp:DropDownList></td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
名稱:</td>
<td width="120">
<asp:TextBox ID="txtName" Text='<%# Bind("Name") %>' runat="server" /></td>
<td width="60">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="30">
</td>
<td width="60">
價格:
</td>
<td width="120">
<asp:TextBox ID="txtPrice" Text='<%# Bind("Price") %>' runat="server" /></td>
<td width="60">
</td>
</tr>
<tr>
<td height="30" width="30">
</td>
<td height="30" width="120">
</td>
<td height="30" width="30">
</td>
<td height="30" width="60">
</td>
<td height="30" width="120" align="right">
<asp:Button ID="btnInsert" Text="插入" CommandName="Insert" runat="server" /></td>
<td height="30" width="60">
<asp:Button ID="btnCancel" Text="取消" CommandName="Cancel" runat="server" /></td>
</tr>
</table>
</InsertItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:NetShopConnString %>"
SelectCommand="SELECT Item.ItemId AS ItemId,Item.CategoryId AS CategoryId,Item.Name AS Name,Item.Price AS Price,Item.Image AS Image,Category.Name As CategoryName FROM Item INNER JOIN Category ON Item.CategoryId=Category.CategoryId"
UpdateCommand="UPDATE Item SET
CategoryId=@CategoryId,Name=@Name,Price=@Price,Image=@Image WHERE
InsertCommand="INSERT INTO Item(CategoryId,Name,Price,Image) VALUES (@CategoryId,@Name,@Price,@Image)">