2015年5月22日 星期五

網頁與資料庫相關資訊 -- 20150522


ASP.NET提供一種方便的資料存取方式「資料繫結(DateBind)」,讓使用者可寫出實用的資料庫應用程式。

※「資料繫結」就是將[控制項]與[資料]連繫在一起,讓控制項可自動讀取資料並顯示在控制項之中。


在 Web.Config中的<connectionStrings>標籤內,以<add/>標籤加入資料庫之連接字串後,前台網頁中就可以用<%$ ConnectionStrings:連接字串名稱 %>的方式來表示整個連接字串的內容。

  • <%$ ...%>是專用於存取Web.Config檔案中設定內容的特殊語法。
  • <%# ...%>資料繫結運算式的表示法。


-----------Web.Config 範例如下:-----------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>

<!--    如需如何設定 ASP.NET 應用程式的詳細資訊,請造訪   http://go.microsoft.com/fwlink/?LinkId=169433    -->

<configuration>

    <connectionStrings>
        <add name="ConnectionString" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\DataBase1.mdf;Integrated Security=True"
            providerName="System.Data.SqlClient" />
    </connectionStrings>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>

</configuration>


※備註:|DataDirectory| 此表示網站的App_Data資料夾。

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

顯示資料的控制項,目前常見的三種,如下:

  1. FormView:每次僅顯示一筆紀錄,但顯示格式可由網頁設計師全部自訂。
  2. GridView:以表格的方式條列出資料來源中每一筆紀錄。
  3. DetailsView:以表格的形式顯示資料,但每次僅顯示一筆紀錄。
※當然還有DataList、ListView、Repeater...等資料控制項。

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

※GridView、DetailsView、FormView三者的差異:(2015/7/7補充)

→GridView的HTML原始碼,每一個欄位都放在<asp:Columns>.....</asp:Columns>標籤內部

→DetailsView的HTML原始碼,每一個欄位都放在<asp:Fields>.......</asp:Fields>標籤內部

→FormView控制項的每一個樣板,都直接寫在<asp:FormView>....</asp:FormView>標籤裡面

※再「分頁」與「排序」功能上,GridView支援CallBack(就是AJAX非同步的功能),而DetailsView只有「分頁」支援CallBack,但FormView控制項缺乏CallBack介面。


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

在GridView控制項中,使用BoundField欄位顯示來自資料庫的資料時,ASP.NET都會自行將資料庫中的資料,轉換成字串後顯示出來。


ASP.NET再將資料轉成字串時,有一套預設的轉換格式。對預設格式不滿意可在BoundField設定兩個屬性:DataFormatString屬性 與 HtmlEncode屬性

DataFormatString屬性
指定一組「格式字串」,讓ASP.NET依程式設計師指定的格式來轉換、顯示來自資料庫的資料。


指定「格式字串」時,可使用如下的格式:

           "{0:格式字元qq}"

qq表示:
使用具有小數的格式時,可在格式字元後加上一數字表示有效位數,也就是要顯示到小術後第幾位。


舉例說明:



























上述相關資訊請參考此網址:https://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.boundfield.dataformatstring(v=vs.110).aspx


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


HtmlEncode屬性:(預設值為True)
此設定ASP.NET在顯示資料前是否要將資料中出現的大於、小於符號等特殊字元加以編碼,也免干擾網頁的HTML標籤。


※因編碼的動作發生在套用格式字串之前,所以須將此屬性設為False,而DataFormatString屬性的設定才能生效。




參考書籍:新觀念ASP.NET4.0網頁程式設計(施威銘研究室 著)



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  (網站存放圖片的子目錄)

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






結論:

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