【Visual Studio】【ASP.NET】新增網站共用類別設定教學

這邊要來為大家介紹一下，如果再使用Visual Studio建立新網站時該如何讓class能夠被共用
為什麼會需要讓Class能夠被共用呢?
因為在一個專案或是網站中總是會有些功能會重複使用，這時候共用class就發揮出作用了~!

操作前注意事項

1.小弟我用的是XP OS搭載Visual Studio 2010 Framework4.0

2.Visual Studio中網站跟專案是不一樣的東西(很多教學都混為一談或是寫不清楚這部分要注意)

快點讓我們一起來看看如何在網站中建立一個共用類別吧

Step.1 建立網站

一開始我們要先來建立新的網站，先開啟Visual Studio 2010然後再會出現「起始頁」的畫面
在畫面上方工具列的地方左邊數來第一個小ICon就是新增網站/專案的按鈕
然後選擇「新網站」(請參考下圖)
※請注意因為一般預設是建立專案，所以這邊要點選小Icon旁邊的黑色箭頭部分

我們可以看到接下來會出現一個視窗是設定一些基礎資訊的視窗
在這邊我們首先要選擇網站的類型，小弟我個人是習慣用「ASP.NET空網站」這部分看個人喜好囉~!

再來我們看到下方有一個「Web位置」的地方，這是要設定用來存放網站位置路徑的地方
首先我們可以看到下拉選單有出現「檔案系統、HTTP、FTP」這三個選項
這主要是代表網站根目錄的存放位置，有興趣可以去官方看說明，在UI項目的部分有介紹
這邊就不多做介紹，因為小弟我是本機端測試所以我們就選預設的「檔案系統」

接著是存放的路徑，這邊要注意一下「新網站」存放位置設定
下圖我們可以看到網站存放的路徑是在Visual Studio 2010的預設「Projects」資料夾下
重點來了~重點來了~重點來了~(很重要所以要說三次)


請大家到Visual Studio 2010的預設「Projects」資料夾下，建立存放網站的資料夾
以此範例為例就是找到Projects資料夾然後建立一個名為「SampleSite」的資料夾
並將「新網站」的「檔案系統」位置指向該資料夾，以小弟我的電腦來說路徑位址如下
「c:\Documents and Settings\你的電腦名稱\My Documents\Visual Studio 2010\Projects\SampleSite」
※路徑位置每個人可能會不同，一般來說安裝時沒有調整的話都會在「我的文件夾」中找到Visual Studio 2010這個資料夾

溫馨提醒

這邊要注意以此例來說如果沒有照上述步驟到「Projects」資料夾下建立名為「SampleSite」的資料夾來存放網站檔案
那麼建立的網站檔案會放在「Projects」資料夾下，如果每次新建網站都是指定放在「Projects」資料夾下
那麼會很容易出現BUG喔，而且管理上也不方便(因為會讓所有的網站資料混在一起)。

按照上述步驟建立好網站資料後，我們來看看剛建立的網站資料夾架構是長怎樣
因為小弟這邊是選擇空網站，所以系統並沒有產生任何奇怪的檔案
只有一個「App_Code資料夾」跟一個「Web.Config檔」

緊接著我們要來建立共用的類別檔「SampleClass1.cs」還有測試類別檔的頁面「Default.aspx」這兩個檔案
「SampleClass1.cs/Default.aspx」這兩個檔案都可以從「新增項目」的頁面中功能中找到

溫馨提醒

「SampleClass1.cs」就是類別檔(類別庫)

「Default.aspx」就是ASP.NET網站或是ASP.NET空網站(網站會有新增一些預設功能或屬性而空網站則是沒有)

「SampleClass1.cs」檔案一定要放在App_Code資料夾下才可以唷

再來我們先來建立類別檔內的程式首先先點擊「SampleClass1.cs」這個類別檔
開啟後我們可以看到初始的類別檔除了using幾個預設的dll檔
還幫我們先建立的類別名稱以及一個空的類別方法

看完類別檔的基本架構以後，我們就要在類別中加入自己寫的類別方法

//設定私有字串變數
private string testStringValue;
//設定字串變數寫入跟讀取的方式
public string testString
{
  get
  {
    return testStringValue;
  }
  set
  {
    testStringValue = value;
  }
}

寫完後程式碼會呈現如下圖所示

再來是要建立「Default.aspx」頁面，我們先點擊「Default.aspx」這個頁面
開啟後再畫面左下角會有個「程式碼|分割畫面|設計師」這三個選項選擇設計師畫面
然後從建立「Lable、text、button」這三個元素然後按下分割畫面就會出現如下圖所示的畫面

建立完成「Lable、text、button」這三個元素後，緊接著連點button按鈕兩下
就會進入程式編輯的畫面，一開始進入時我們可以發現系統已經幫我們建立了一個
空的button click行為

在來我們要在button click行為中輸入以下程式碼

//將類別檔案中的類別實體化
SampleClass1 sc = new SampleClass1();
//將text文字欄位的值，設定給類別檔中的私有變數(透過set)
sc.testString = TextBox1.Text;
//將類別檔中回傳回來的私有變數設定給labal(透過get)
Label1.Text = sc.testString;

寫完後呈現的畫面如下圖所示

最後我們按下F5執行看看會是什麼效果

接著在text欄位中輸入任意文字或數字按下button
可以發現text中的值順利的傳遞給lable了

在之前有提到說「SampleClass1.cs」檔案一定要放在App_Code資料夾下才可以
大家一定會很好奇為什麼，就讓我們來試試看「SampleClass1.cs」檔沒放在App_Code資料夾下
會是什麼樣的情況，先將「SampleClass1.cs」檔移出App_Code資料夾放在其它任意地方

然後我們回到Button的Click方法下查看可以發現
在將類別檔案中的類別實體化的Command文字下方出現了紅色的波浪線條
SampleClass1 文字顏色也變成黑色了，不用執行就很明顯可以知道這樣做是會有問題的

會這樣主要是因為如果是建立網站系統只會將App_Code資料夾下的.CS檔案做編譯
在其它地方就不會進行編譯動作才會產生錯誤
所以大家記得在使用「新網站」的時候共用類別檔要放在App_Code的資料夾下唷