首頁>網頁設計教程>Dreamweaver教程

Dreamwaver MX與ASP.NET(六)

作者：Eve Cole 更新時間：2009-05-31 21:06:05
6．建立記錄修改頁面

相關介紹(注意：為了能顯示程式碼，以下所有程式碼都在「<」之後和「>」之前加了空格，不便之處請多原諒！):

對資料的新增,修改,刪除是對資料庫的三個基本操作。本節介紹修改記錄部分。

STEP 1 設計修改流程

一般來說,只需要對指定的記錄進行更新，所以需要建立搜尋頁面進行查詢，並將查詢結果顯示在結果頁中，並讓使用者對其進行修改。最後透過提交操作完成更新任務。

首先，建立查詢頁面。在建立dataset的過程中，我們可以透過資料過濾器Filter選擇所需的資料。由於我們將會點擊DataList中的連結來到達此頁面，所以選擇URL Parameter並利用關鍵字CODE來篩選出所需的頁面。


[圖6-1篩選資料]

為此，在網站中新建modify.aspx文件，並加入DataSet如上圖。

Step2 建立細節頁面

為了產生鏈接，首先應建立導航頁面。可以對第3節所建立的DataGrid頁面修改達到這樣的導航效果。 DataGrid的樣式是修改的，資料項目同樣可以設定為顯示有連結的文字。同樣在DataList和Repeater中也可以實現同樣的功能，都是設定一個超級連結到細節頁面。

開啟原來的location2.aspx文件，修改原來的DataList樣式。選擇DataListm點選Edit Columns(如圖6-2)。在彈出的DataGrid樣式設計對話方塊(圖6-3)中，可以將Location_name的類型設定為Hyperlink。選取Location_name，點選Change Column Type按鈕變更為Hyperlink。


[圖6-2 Edit Columns..]


[圖6-3 設定hyperlink]
對於Hyperlink設定如下圖，


[圖6-4 設定連結關鍵字]

顯示的資料域Location_name，連接關鍵字為code，需要跳到的頁面就是modify.aspx頁面。點擊連結後具體的網址連結將會為

http://yoursite/modify.aspx?CODE=所點擊的紀錄的code的值

而modify.aspx頁面也會透過傳來的code的值從資料庫中查詢所需的紀錄。

為了在modify.aspx頁面中更新數據，就需要用到表單。這就需要將資料記錄和輸入框綁定。在Dreamweaver MX中綁定資料的方式和Dreamweaver UltraDev中類似。將頁面設定如圖6-5。新建6個Text Field,1個hiddenField,1個submit按鈕,放到適當的位置。其中hiddernField用於保存此記錄的CODE值。因為code值為關鍵字，所以不需改變。


[圖6-5 modify.aspx頁]

點選Binding標籤，將具體資料項拖曳到與之對應的text field。同時在Format中可以設定資料的顯示類型。而同樣可以將text field的所有屬性和資料來源綁定。選擇記錄的第一個下拉


[圖6-6 Binding] [圖6-7 資料類型選擇] [圖6-8 綁定屬性]

列表，設定被資料來源綁定的text Field屬性。
STEP 3資料更新

至於資料更新可以點選Application面板中的Server Behaviors中的”+」按鈕，選擇Update Record。


[圖6-9 選擇Update Record]


[圖6-10 設定關聯]

在彈出的對話方塊中，需將輸入方塊和相對應更新的資料來源關聯起來,並設定資料類型。其中CODE應為關鍵字即Primary Key。類似Insert Record的頁面，也要設定成功新增和新增失敗跳到的頁面。

現在可以預覽一下做好的頁面。輸入網址http://yoursite/location3.aspx，可以看到如圖6-11的頁面。


[圖6-11 location3.aspx頁面瀏覽]

Location_name的一項是可以點擊的，並將跳到細節頁面modify.aspx。


[圖6-12 更新頁面預覽]
透過modify.aspx頁面就可以修改現有數據，並可以透過​​表單提交事件來更新數據。

其更新的主要程式碼如下:

< MM:Update

runat="server"

CommandText='< %# "UPDATE LOCATIONS SET CITY=?, STATE_COUNTRY=?, FAX=?, TELEPHONE=?, ADDRESS=? WHERE CODE=?" % >'

ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'

DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'

Expression='< %# Request.Form("MM_update") = "form1" % >'

CreateDataSet="false"

SuccessURL='< %# "location3.aspx" % >'

Debug="true"

>

< Parameters >

< Parameter Name="@CITY" Value='< %# IIf((Request.Form("city") < > Nothing), Request.Form("city"), "") % >' Type="WChar" / >

< Parameter Name="@STATE_COUNTRY" Value='< %# IIf((Request.Form("state") < > Nothing), Request.Form("state"), "") % >' Type="WChar" / >

< Parameter Name="@FAX" Value='< %# IIf((Request.Form("fax") < > Nothing), Request.Form("fax"), "") % >' Type="WChar" / >

< Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("tele") < > Nothing), Request.Form("tele"), "") % >' Type="WChar" / >

< Parameter Name="@ADDRESS" Value='< %# IIf((Request.Form("address") < > Nothing), Request.Form("address"), "") % >' Type="WChar" / >

< Parameter Name="@CODE" Value='< %# IIf((Request.Form("hiddenField") < > Nothing), Request.Form("hiddenField"), "") % >' Type="WChar" / >

< /Parameters >

< /MM:Update >

Dreamweaver MX是透過mm:update來表識更新的程式碼的。其格式和MM:Insert類似。
相關文章