VS 2012 C# 巡覽控制項筆記 -- 20151126

巡覽控制項主要分三類(如下圖)：

• Menu
• TreeView
• SiteMapPath

首先要先知道「巡覽控制項」主要是呈現的網站導覽樣式(畫面)，其需要搭配「SiteMapDataSource」取得各節點資料，然而「SiteMapDataSource」的資料來源取決於「Web.sitemap」檔案。

※何謂「網頁瀏覽檔案(Web.sitemap)」？其功能有下列三項。

它是一個具備描述網站階層的XML檔案。透過修改Web.sitemap檔案來管理頁面巡覽，不需要修改網站內所有網頁中的超連結。

功能：

1. 網站導覽功能

2. 可繫結SiteMapPath網站地圖路徑

3. 可繫結TreeView與Menu控制項


Web.sitemap檔案，其預設基本架構(如下圖)：

---

解說上述：

<?xml version="1.0" encoding="utf-8" ?>敘述，是用來宣告此份文件文XML結構，若沒加入此行敘述，則輸入中文字之後網站導覽路徑會以亂碼顯示。

<siteMap>標籤：用來定義網站導覽的架構。

<siteMapNode>標籤：用來設定每一個網頁的節點，且標籤可使用url、title、description三個屬性。




簡單來說，網站要用到導覽的話，須注意三個重點：

第一、優先製作Web.sitemap檔案(XML檔案)。

第二、使用Menu控制項與TreeView控制項要搭配SiteMapDataSource。

第三、可直接使用SiteMapPath控制項。

---

實際案例：



步驟一、先建置新的網站導覽檔案。

開啟空白Web.sitemap檔案

建置相對應的導覽網頁內容，並儲存該檔案。

步驟二、開啟已建好網頁(需要再Web.sitemap檔案內)，將SiteMapPath控制項拖拉至「設計」網頁中，及即可。

步驟三、同樣開啟主頁面，並將Menu控制項或TreeView控制項拖拉至「設計」畫面中。此時出現「選擇資料來源：無。」

根據上述Menu控制項需要資料來源，故再拖拉「SiteMapDataSource」在畫面中。

再將Menu控制項的資料來源指向「SiteMapDataSource1」，即可。

步驟四、按下F5鍵，看最後完成的畫面。

來源出處：ASP.NET 4.0 從零開始-使用C#2010  碩博文化

VS 2012 C# 有關GridView的光棒效果 -- 20150824

緣由：

早期光棓效果需要寫JavaScript才能做到，但現在Visual Studio內建就有光棒效果可以使用，容易讓使用者辨識目前所選擇的資料列。以下介紹三個方法可以輕鬆地呼叫出光棒效果。



方法一、點選GridView，選擇小箭頭，並勾選「樞紐分析表選取模式」。

方法二、點選GridView，再透過GridView屬性，將AutoGenerateSelectButton：True。

方法三、點選GridView，選擇小箭頭，並選擇「編輯資料行」。

選擇「CommandField」選項內的「選取」鈕，按下「加入」到選取的欄位中。最後按下「確定」鈕。

備註：

假若您同時(方法一)和(方法二)--勾選「樞紐分析表選取模式」和修改--AutoGenerateSelectButton：True 時，這時會出現兩個「選擇」鈕，所以只需要修改一個地方就可以了。另外，這裡有發現一個BUG，當先將「樞紐分析表選取模式」取消勾選時，這時兩個「選擇」鈕會同時消失掉，若先AutoGenerateSelectButton屬性改為Fasle時，只會消失一個「選擇」鈕。





補充：若要修改光棒的顏色...等，可以SelectedRowStyle這屬性下手。(如下圖)

VS 2012 C# Page物件 -- 20150724

何謂網頁的「存留週期」？

當連線ASP.NET網頁時，伺服器端會有一連串處理過程，伺服器端處理完畢後才會將網頁送出，此處理過程便稱為「存留週期」。由此可知，一個網頁從開始到卸載，其生命其實在伺服器送出後便已經結束。(補充：20151126)



最常用到Page物件的重要屬性與方法：

• Page.IsPostBack：檢查網頁是否為第一次連線或因PostBack而被載入

  →  屬性為False：表示用戶端是第一次連線。
  →  屬性為True：網頁是因為PostBack而重新被執行。

※當網頁第一次連線時，進行變數、控制項的初始化、開啟檔案、連線資料庫取得所需資料，都可藉由此屬性來避免重複執行這些動作。

• Page.IsValid：檢查網頁上所有驗證是否都已通過
• Page.Title：取得或設定網頁的標題

--------重點：---------------------------------------------------------------------------------------

在Web畫面上「做的任何動作」，都會引起PostBack(回傳)動作，進而重新觸發Page_Load事件。例如：點TextBox、按任何一個Button按鈕.....等。所以在網頁設計中，加入一段If(!Page.PostBack) 或 IF Not Page.PostBack的判別是來判斷「網頁是否第一次被執行？」。

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

案例：

當在網頁上按下Button按鈕的時候，會觸發Button1_Click事件，這是會導致回傳。根據ASP.NET為例的執行順序，如下：

1.先執行Page_Load事件。

2.接者才執行TextBox1_TextChanged事件。

3.最後才是Button1_Click事件。

VS 2012 C# 快速製作簡單搜尋引擎 -- 20150701

緣由：

想要學寫程式，但又覺得全部都是用寫的很累人，所以找尋最簡單不用寫太多的程式碼的方式，於是就嘗試、測試....再測試....最終成功後，把它一點一滴的紀錄下來，順便分享給網友們。



步驟一、透過元件先將畫面設計好。

步驟二、設定SqlDataSource1的資料來源。

※選擇資料來源的[資料表]與設定「Where查詢條件」。

※選擇資料表中的[查詢欄位(CustName)]與設定查詢所用到的[控制項(TextBox1)]。

※確認[Where條件子句]已建立完成。

步驟三、設定GridView1的資料來源為SqlDataSource1。

步驟四、網頁畫面切換至「原始檔模式」，查看自動產生的程式碼。

※稍微修改Where條件字句，將其改為「模糊查詢」條件。(如下圖)

程式碼：

       Select * From 資料表 Where 欄位A like '%欄位A%'

※修改完程式碼後，切回至[設計模式]。

步驟五、測試查詢功能

結論：

透過工具能快速地解決問題才是王道，同樣能達到目的，為何不選擇簡單又快速的方式呢？我不排斥寫程式碼，但要我每個網頁都要用程式碼一個一個寫，對不起~我真的是做不到。只有頭殼壞掉的人才這樣做。

Visual 2012 C# 主版頁面 -- 20150604

主版頁面(Master Page)

• 該主版頁面的附檔名為*.Master。
• 該檔案可內含：靜態文字、HTML標籤、伺服器控制項......等。(如下圖)
• 一般ASP.NET網頁是以@Page指示詞來設定網頁的屬性；主版頁面是以@Master。
• 主版頁面無法直接執行。
• 可在主版頁面使用HTML表格進行網頁編排、CSS配置網頁外觀、放置Flash廣告動畫、使用巡覽控制項導覽網頁、建立網站公司的Logo及著作權注意事項...等。
• 主版頁面必須含一個或多個的ContentPlaceHolder控制項。

※當新的網頁套用「主版頁面」時，只能在紫色框框(ContentPlaceHolder1)內做編輯。

---------------------補充2015/6/4------(透過程式碼來操控主版頁面的物件)--------------------------


在程式碼畫面中，可以藉由以下程式碼來控制「主版頁面」的物件：

 Control  變數名稱  = Master.FindControl("主版頁面的物件名稱");






範例說明：



步驟一、首先在「主版頁面」中，加入蝙蝠俠的Logo圖片(物件名稱：imgLogo)，如下圖。







步驟二、開啟新網頁，並套用「主版頁面」，且在編輯區中加入兩個按鈕，如下圖。

步驟三、觸發Button事件，並在事件中寫入以下程式碼，如下圖。

    protected void Button1_Click(object sender, EventArgs e)
    {
        Control logoPic = Master.FindControl("imgLogo");

        logoPic.Visible = false;
        
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Control logoPic = Master.FindControl("imgLogo");

        logoPic.Visible = true;
    }

步驟四、當上述步驟完成後，F5執行網頁查看結果。

步驟六、按下「隱藏」鈕，測試是否可以控制「主版頁面」上的Logo圖片，如下圖。

網頁與資料庫相關資訊 -- 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網頁程式設計(施威銘研究室 著)

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)中。下篇會針對照片上傳到指定的資料夾中做解說。老實講，想透過懶惰的方式製作網頁，反而花費更多的時間在摸索查詢，不過看見自己突破瓶頸，並可以成功製作出來，這一切的辛苦也算是有代價。