2015年3月23日 星期一

Visual 2012 C# 快速製作簡單的網頁,並將資料寫入資料庫內(Part 2) -- 20150320

緣由:

根據前面一篇文章是教網友們如何將網頁上的資料寫入資料表中,接下來這篇文章是將資料呈現在畫面上,並可自行將這些資料做修改(幾乎不需要寫任何程式碼)。另外,如下圖所示,它是呈現上篇文章所寫入到資料表內的所有資料,但有兩個欄位(CustID、SiteID)的值確是以數字顯示,這跟網頁上所呈現的中文名字和中文地點是不一樣的,這會讓預覽者很錯愕,而這篇最主要的精華就是將這兩個欄位轉換成文字。(※這可是「林伯」花好幾個禮拜亂搞、亂摸弄出來的)



























步驟一、在網頁設計畫面上有一個「修改(預覽)」鈕,按照圖上操作,觸發Button_Click事件。























※在Button_Click事件中,寫入如下列的程式碼。(按下此鈕,可直接跳至另一個網頁)

          →    Response.Redirect("指定網頁");                 




























步驟二、建立新網頁(Test20150312-02.aspx),並將GridView拖曳到新網頁上,並設定GridView格式。
GridView的功能,是將資料呈現在網頁面上的容器。


※GridView可自動設定格式/樣式。

















步驟三、在拖曳「SqlDataSource」在網頁上。




























步驟四、設定SqlDataSource資料來源。


































































































































































步驟五、設定GridView1的資料來源為「SqlDataSource1」。



※設定資料來源完後,記得勾選「啟動分頁」、「啟用排序」、「啟用編輯」三項功能。

























※接下來設定「編輯資料行....」。
























※將ButtonType改為Button。






























※預覽呈現畫面如下,因為CustID、SiteID兩欄位都是數字呈現,造成觀察者不知道數字所代表的...是什麼意思?



























步驟六、接下來就是將數字替換成看得懂文字,先點選「GridView1」,選擇「編輯資料行..」。



※將CustID欄位」轉換為TemplateField





























































※同理,將CustID、SiteID兩個欄位都轉換成TemplateField。






























步驟七、修改GridView所呈現的畫面,首先點選「編輯樣板」。


























  • 在樣板中可清楚看見Column[2] - CustIDColumn [3] - SiteID兩個欄位。
  • 通常會變動的樣板: ItemTemplate(每一筆資料列顯示的內容)、EditItemTemplate(編輯模式顯示的內容)。






















※將原先ItemTemplate[Label1]項目,更換成[DropDownList]控制項,並加入[SqlDataSource]
















※根據先前提到的,同樣的設定資料來源。


















































































※底下就是純手動一步一步地做設定,才會達到所呈現的樣子,按下「查詢產生器」鈕。















※加入Customer、QA這兩個資料表,因為CustID可以讓此兩個資料表做關聯,且需要使用到Customer資料表中的CustName欄位。


























※接下來看見此兩張資料表與它的關聯。





































※勾選兩張資料表中所要顯示的欄位。Customer資料表→CustName、QA資料表→CustID。





































※勾選完畢後,電腦化自動幫你產生SQL語法。








































































※設定DropDownList控制項的資料來源為SqlDataSource2















































※此處所對應的欄位為剛才所勾選的CustName、CustID這兩個欄位。
































※預覽後的畫面(如下圖),但為何CustID欄位所顯示的值,卻都為「王小五」?


※接下來的步驟很重要唷,此設定會影響「資料欄位的值」連動。點選DropDownList1控制項,選擇「編輯DataBindings....」。















※選擇「SelectedValue」,並在右邊的下拉選單中,選擇「CustID」欄位。




















































※再次預覽畫面,此時資料已隨資料表改變了。



























待續..........









結論:









相關文章出處:http://www.slideshare.net/mis2000lab/07-grid-view
























2015年3月19日 星期四

Visual 2012 C# 快速製作簡單的網頁,並將資料寫入資料庫內(Part 1) -- 20150319

緣由:

因目前公司要所有的電腦科室的人員加入開發系統的行列,但小弟本身就是對這塊比較不熟悉,故都是照的書上的範例練習,於是小弟比較偷懶,想藉助拖拉的方式,將網頁畫面製作出來,而程式碼盡可能寫越少越好。接下介紹比較簡單的方式,製作一個簡單可讀、寫的網頁。




步驟一、先建立一個資料庫TestDB,並開三張資料表(Customer、QA、Site),如下:

※CustID、qaID、SiteID都設定成自動產生編號。














步驟二、將網頁的畫面透過控制項工具製作完成,且執行看預覽畫面。(如下圖)























步驟三、從「資料」選項中,拖拉出「SqlDataSource」控制項到畫面上。
































點選「SqlDataSource1」,並設定[發問者]的資料(資料庫)來源。






















































※設定IP位址或名稱(※此處「點號」代表SQL Server安裝在這台電腦上),並輸入sa的帳號與密碼,最後在選擇在將資料從哪個資料庫(TestDB)讀取或存入。











































































※選擇[發問者]的資料表,並勾選其欄位。(※此欄位到時候會用到)







































































步驟四、點選「DropDownList」控制項,並選擇資料來源(※剛才設定的SqlDataSource1)。


















※此處有兩個資料欄位要選擇,這對下拉式選單來說,是非常重要的。攸關是否可從[資料表]帶出值,且當寫入資料表時,是否不會跳出錯誤訊息。

































※同理,依照上述步驟,也將[地點]的資料表[Site]做好連結(SqlDataSource2)。此時連線字串,可一直無限重複使用。























































































※針對上述都設定好後,執行預覽畫面。(如下圖)






















步驟五、先拖拉「SqlDataSource3」放置網頁畫面上,因為「SqlDataSource3」攸關網頁上的欄位寫入資料表中,故此步驟是很重要的。



























根據上述操作「步驟三」再重複操作一遍。(※唯一不同的地方,必須點選「進階」鈕。)




































進入「進階...」後,要勾選「產生INSERT、UPDATE和DELETE陳述式」。有時候「進階..」中沒辦法勾選「產生INSERT、UPDATE.....」,原因是在設資料表時,沒有給主索引鍵的關係。





















步驟六、點選「SqlDataSource3」,再選擇「InsertQuery」屬性。

根據網頁上面的資料欄位,設定對應的「參數來源」。※此處影響資料是否可以寫入資料表中。





 ※對應都設定完之後,測試查詢是否可帶出資料。





































步驟七、點選「送出」鈕,觸發Button_Click事件。(※準備開始寫程式碼)

























步驟八、根據下圖程式碼照抄即可!!!



步驟九、測試是否可以加資料寫入資料表中。











































步驟十、直接開啟資料表,查看是否剛才那筆資料是否有寫入。


























結論:

懶惰的人會想辦法找出簡單的作法,來達相同的目的,本人是想用最少的程式碼來達到想要的結果,藉由自己亂摸索與參考書本上,最後不小心搞出來的心得。