2015年5月6日 星期三

Visual 2012 C# 快速製作簡單的線上申請表網頁,並將資料寫入資料庫內(Part 1) -- 20150506

緣由:

出於自身的懶惰,不想寫太多且複雜的程式碼,只想透過簡單拖拉方式就可以寫出一個線上申請單的網頁,但.....爬文找資料與實作測試卻花費我更多的時間...(哈哈哈),不可很慶幸的終究被我亂搞出來了。以下是我製作線上申請的方法,希望對初學者有所幫助。




步驟一、建立資料表,如下:













※將QID欄位設定為流水號編號。


























※建立好欄位後,將資料表(dbo.RequestList)儲存到資料庫中。















步驟二、設計網頁呈現畫面,將TextBox的屬性TextMode改成MultLine(多行)。

















步驟三、從工具箱內拖拉SqlDataSource元件,並設定資料來源。
























































































































































































※這邊有新增一個新的資料夾(photo),其主要是擺放上傳後的照片。













































































※這邊特別注意,還要多點選「顯示進階屬性」。



































































※此處為這篇最重的地方,假若PropertyName採用預設屬性FileBytes,到時候載入資料表時,會出現錯誤訊息「物件必須實作IConvertible」。所以PropertyName屬性必須改為FileNmae。

































※此處是設計網頁時,漏掉Label控制項,在這裡將其補上。












































步驟三、準備開始寫程式碼,連擊「送出」鈕,並觸發Button Click事件。




















※在Button_Click事件中,輸入黃色區塊程式碼。








































程式碼如下:

        try
        {
            SqlDataSource1.Insert();
            Label1.Text = "<br>申請單已成功送出!!";
        }
        catch(Exception ex)
        {
            Label1.Text = ex.Message; 
        }





步驟四、執行測試。














































步驟五、開啟資料庫檢測是否有將資料寫入資料表中。









































結論:

根據上述的方法,可以很簡單地把前端網頁輸入的資料,寫到指定的資料表內,但是有一個很大的缺點,就是無法將夾檔的圖片上傳到指定的資料夾(photo)中。下篇會針對照片上傳到指定的資料夾中做解說。老實講,想透過懶惰的方式製作網頁,反而花費更多的時間在摸索查詢,不過看見自己突破瓶頸,並可以成功製作出來,這一切的辛苦也算是有代價。


















2015年5月1日 星期五

FileUpload檔案上傳的路徑發生錯誤 -- 20150501

緣由:

在練習寫程式的時候,跳出「SaveAs方法設定為需要根路徑,而路徑 'xxxxxx' 不是根目錄。」的錯誤訊息視窗!!!





























發生原因:




修改完後的程式碼,如下:













---------------補充--------------------------------------------------------------

取得實體路徑的方法有很多種,如下:





















舉例:假設本網頁的存放上傳檔案的實體路徑為 D:\練習區\MySeltTest\Upload\


方法一、

string  savePath = "D:\\練習區\\MySelfTest\\Upload\\";  

方法二、

string savePath = @"D:\練習區\MySelfTest\Upload\";

方法三、

string savePath = Server.MapPath("~/Upload/");
     
方法四、

string saveDir = "\\Upload\\";
string appPath = Request.PhysicalApplicationPath;  
string savePath = appPath + saveDir;

※appPath是網站[根]目錄,轉換成Server端硬碟路徑



--------20160111補充-------------------------------------------------------------------

假設網站的路徑URL(網址)為:http://www.goodweb.com.tw/),其網站專門存放圖片的子目錄為 /images/

※透過Request.PhysicalApplicationPath轉換後,Server端硬碟的「實體」路徑,設定可能如下(以微軟Windows Server為例子):

C:\Inetpub\wwwroot\  (網站跟目錄)

C:\Inetpub\wwwroot\images  (網站存放圖片的子目錄)

----------------------------------------------------------------------------------------------






結論:

有時候寫的方式千奇百種,但呈現出來的效果是一樣的,只會一種寫法雖然可以達到目的,假若您會好幾種方式,豈不是非常棒呢?別排斥任何的可以幫助達到目的的方式,因為它會幫您累績無可限量的智慧。



















2015年4月1日 星期三

再輸入資料時出現「字串或二進位資料會被截斷。 陳述式已經結束。」訊息 -- 20150401

緣由:

在製作網頁時,當輸入資料時,按下「送出」鈕 那刻,會跳出「字串或二進位資料會被截斷。 陳述式已經結束。」訊息視窗。(如下圖一)



















(圖一)



解決方式:

檢查資料表內的資料類型-「欄位長度」(如下圖二),是否與輸入資料的長度超過。上(圖一)在「電話簡碼」欄位中,所輸入的資料超出資料表的長度,故會出現錯誤訊息。















(圖二)





結論:

雖然看似簡單的問題,但可能一直會出現在現實生活中,所以把它紀錄下來,將這經驗分享給初學者,一方面可幫助初學者成長;另一方面也可加深自己的印象。





















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] - CustID、Column [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