整合ASP.NET Web Forms與Bootstrap -1

by vivid 15. 七月 2015 00:41

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N150716102
出刊日期:2015/07/15
開發工具:Visual Studio 2013 Ultimate Update 4
版本:.NET Framework 4.5.xASP.NET Web Formsbootstrap 3.3.4

在《響應式網頁設計-Bootstrap for ASP.NET WebForms》這篇文章之中,我們簡介了如何在ASP.NET Web Form網站內加入Bootstrap套件來設計響應式網頁,而今Bootstrap套件愈來愈流行,許多網站也跟隨響應式的腳步,趕流行紛紛將現有網站套用Bootstrap來呈現。

在這篇文章之中,我將介紹在Web Form之中,使用Bootstrap的Grid系統進行版面配置,並在表單之中整合ASP.NET 伺服器控制項(Web Server Control),例如Label、TextBox、Button,套用Bootstrap樣式來顯示。

ASP.NET伺服器控制項

ASP.NET Web Forms使用Web伺服器控制項(Web Server Control)來建立UI介面,使用者透過文字方塊(TextBox)、按鈕(Button)…等等UI項目來讓使用者輸入資料。Web伺服器控制項在伺服端執行時,會有一個生 成標籤的程序(稱Rendering),藉以產生HTML標籤,讓瀏覽器顯示適當的UI畫面>例如,若有一個ASP.NET Web Form Button伺服器控制定義如下:

<asp:Button ID = "Button1" runat = "server" Text = "Button" />

在執行時期便會產生以下的HTML Input(type="submit")標籤:

<input type = "submit" name = "Button1" value = "Button" id = "Button1">

若有一個ASP.NET Web Form TextBox伺服器控制定義如下:

<asp:TextBox ID = "TextBox1" runat = "server"> </asp:TextBox>

在執行時期便會產生以下的HTML Input(type="text")標籤:

<input name = "TextBox1" type = "text" id = "TextBox1">

若要讓ASP.NET Web伺服器控制項能和Bootstrap整合在一起,你必需要知道使用的ASP.NET Web伺服器控制項,在執行階段產生的HTML標籤是否適合搭配Bootstrap來使用。

 

基本ASP.NET 網頁

我們先來設計一個基本的ASP.NET 網頁,其中包含表單用來搜集使用者輸入的資料,網頁中包含了Label、TextBox、RadioButtonList、Button等伺服器控制項,程式範例如下:

<%@ Page Language="C#" %>
 
<!DOCTYPE html>
 
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
   <form id="form1" runat="server">
    <h1>基本資料</h1>
    <asp:Label ID="Label1" runat="server" Text="姓名:" AssociatedControlID="txtName"></asp:Label>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="Label2" runat="server" AssociatedControlID="txtName" Text="密碼:"></asp:Label>
    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
    <br />
    <asp:Label ID="Label3" runat="server" AssociatedControlID="txtAge" Text="年齡:"></asp:Label>
    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="Label4" runat="server" AssociatedControlID="rdoGender" Text="性別:"></asp:Label>
    <asp:RadioButtonList ID="rdoGender" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal">
      <asp:ListItem>男</asp:ListItem>
      <asp:ListItem>女</asp:ListItem>
    </asp:RadioButtonList>
    <br />
    <asp:Label ID="Label5" runat="server" AssociatedControlID="txtMail" Text="EMail:"></asp:Label>
    <asp:TextBox ID="txtMail" runat="server" TextMode="Email"></asp:TextBox>
    <br />
    <asp:Label ID="Label6" runat="server" AssociatedControlID="txtBirth" Text="生日:"></asp:Label>
    <asp:TextBox ID="txtBirth" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="btnSave" runat="server" Text="儲存" />
    <asp:Button ID="btnReset" runat="server" Text="重置" />
 
  </form>
  </body>
</html>

 

這個網頁在瀏覽器的執行結果看起來如下圖所示:

clip_image002

圖 1:未套用Bootstrap的網頁。

這樣的畫面實在很單調又呆板,若沒有美術設計人員可以協助撰寫樣式表美化其外觀的話,一般的程式設計師很難做出漂亮的網頁,更何況要支援響應式網頁的設計架構。

套用Bootstrap樣式

那麼,讓我們來套用Bootstrap樣式吧。修改程式碼如下,在<head>標籤之中使用<link>標籤來引用Bootstrap樣式,並在</body>標籤之上引用jquery與bootstrap所需的JavaScript檔:

 

<%@ Page Language="C#" %>
 
<!DOCTYPE html>
 
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h1>基本資料</h1>
      </div>
    </div>
  </div>
  <div class="container">
 
    <form class="form-horizontal" id="form1" runat="server">
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label1" runat="server" Text="姓名:" AssociatedControlID="txtName"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtName" runat="server" placeholder="姓名"></asp:TextBox>
        </div>
      </div>
 
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label2" runat="server" AssociatedControlID="txtPwd" Text="密碼:"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtPwd" runat="server" TextMode="Password" placeholder="密碼"></asp:TextBox>
        </div>
      </div>
 
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label3" runat="server" AssociatedControlID="txtAge" Text="年齡:"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtAge" runat="server" placeholder="年齡"></asp:TextBox>
        </div>
      </div>
 
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label4" runat="server" AssociatedControlID="rdoGender" Text="性別:"></asp:Label>
        <div class="col-sm-8">
          <asp:RadioButtonList ID="rdoGender" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
            <asp:ListItem class="btn btn-default">男</asp:ListItem>
            <asp:ListItem class="btn btn-default">女</asp:ListItem>
          </asp:RadioButtonList>
        </div>
      </div>
 
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label5" runat="server" AssociatedControlID="txtMail" Text="EMail:"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtMail" runat="server" placeholder="Email" TextMode="Email"></asp:TextBox>
        </div>
      </div>
 
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label6" runat="server" AssociatedControlID="txtBirth" Text="生日:"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtBirth" placeholder="生日" runat="server"></asp:TextBox>
        </div>
      </div>
 
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-4">
          <asp:Button CssClass="btn btn-primary btn-block" ID="btnSave" runat="server" Text="儲存" />
        </div>
        <div class="col-sm-4 ">
          <asp:Button CssClass="btn btn-default btn-block" ID="Button2" runat="server" Text="重置" />
        </div>
      </div>
    </form>
  </div>
  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

這個範例的執行結果,請參考下圖所示:

clip_image002[4]

圖 2:套用Bootstrap樣式。

版面變的漂亮多了,並且還支援響應式網頁,當瀏覽器寬度變窄的情況下,網頁中的控制項會自動調整他們的大小,或改用垂直方式堆疊顯示,請參考下圖所示:

clip_image002[6]

圖 3:自動調整他們的大小。

我們來看一下這個範例,範例在<body>標籤之中使用兩個container:

<div class="container">

</div>

第一個Container用來顯示網頁標題,第二個Container則用來顯示網頁內容。因此第一個Container之中包含一個row,利用Grid系統,指定「col-sm-12」讓標題可以佔滿瀏覽度的寬度,而「text-center」則可讓其中的文字置中做顯示:

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h1>基本資料</h1>
    </div>
  </div>
</div>

 

「form-horizontal」樣示用來告訴<form>標籤,以水平方式來對齊群組(form-group)中包含的<asp:Label>與<asp:TextBox>伺服器控制項:

 

<form class="form-horizontal" id="form1" runat="server">
      <div class="form-group">
        <asp:Label CssClass="col-sm-2 control-label" ID="Label1" runat="server" Text="姓名:" AssociatedControlID="txtName"></asp:Label>
        <div class="col-sm-8">
          <asp:TextBox CssClass="form-control" ID="txtName" runat="server" placeholder="姓名"></asp:TextBox>
        </div>
      </div>
…略
</form>

 

<asp:Label>伺服器控制項設定了AssociatedControlID屬性,以便關聯到<asp:TextBox>伺服器控制項,如此產生的HTML標籤for屬性就會關聯到Input方塊,以顯示姓名的這一組伺服器控制項為例,<asp:Label>伺服器控制項產生的標籤為:

<label for="txtName" id="Label1" class="col-sm-2 control-label">姓名:</label>

<asp:TextBox>伺服器控制項將轉換為<input(type=text)>標籤,我們為其加上「placeholder="姓名"」因此產生的標籤如下,placeholder會讓文字方塊具有浮水印的提示效果:

<input name="txtName" type="text" id="txtName" class="form-control" placeholder="姓名">

<asp:Label>與<asp:TextBox>伺服器控制項皆使用CssClass屬性來套用Bootstrap樣式。其中<asp:Label>伺服器控制項套用「col-sm-2」讓欄位標題佔Grid系統2欄(Bootstrap 3以後定義Grid最多可以有12欄),而<asp:TextBox>伺服器控制項則佔Grid系統的8欄,因不足12欄,剩餘的兩欄便自動留白。

「control-label」樣式設定了欄位標題(Label)文字的留白(padding)、文字對齊方向。「form-control」則定義了寬、高、字型大小、顏色、背景、框線、圓角、陰影…等樣式。

在這個例子中,比較值得注意的是Bootstrap與<asp:RadioButtonList>伺服器控制項的整合。在Bootstrap中,Input(type=radio)圓型按鈕若要套用Bootstrap樣式,它的標籤必需是<label>包住<input>,如下例所示:

 

<div class="radio">
<label>
   <input type="radio">
   MyRadio
</label>

 

而預設若使用了<asp:RadioButtonList>伺服器控制項,其定義如下:

<asp:RadioButtonList ID="rdoGender" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal">
  <asp:ListItem>男</asp:ListItem>
  <asp:ListItem>女</asp:ListItem>
</asp:RadioButtonList>

網頁執行後<asp:RadioButtonList>伺服器控制項產生的HTML標籤會變成:

<span id="rdoGender">
  <input id="rdoGender_0" type="radio" name="rdoGender" value="男">
  <label for="rdoGender_0">男</label>
  <input id="rdoGender_1" type="radio" name="rdoGender" value="女">
  <label for="rdoGender_1">女</label>
</span>

<Input>和<Label>標籤排列的方式不符合Bootstrap所需的巢狀式架構。因此在此範例中我們將它套用Bootstrap的「btn-group」樣式,將其中的<asp:ListItem>選項包在同一個群組,每個<asp:ListItem>套用「btn btn-default」樣式,讓它們變成按鈕。另外RadioButtonList加上「data-toggle="buttons"」屬性,讓群組中的按鈕可以變成保留狀態的開關按鈕(Toggle Button)。

<asp:RadioButtonList ID="rdoGender" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
            <asp:ListItem class="btn btn-default">男</asp:ListItem>
            <asp:ListItem class="btn btn-default">女</asp:ListItem>
</asp:RadioButtonList>

網頁執行後,此<asp:RadioButtonList>伺服器控制項產生的標籤如下:

<span id="rdoGender" class="btn-group" data-toggle="buttons">
  <span class="btn btn-default">
    <input id="rdoGender_0" type="radio" name="rdoGender" value="男">
    <label for="rdoGender_0">男</label>
  </span>
  <span class="btn btn-default">
    <input id="rdoGender_1" type="radio" name="rdoGender" value="女">
    <label for="rdoGender_1">女</label>
  </span>

最後這個範例表單內兩個按鈕:「儲存」與「重置」,我們希望這按鈕的寬度也會隨著瀏覽器寬度自動做調整,因此我們設定兩個按鈕套用「btn-block」樣式,讓他們的寬度可以和Grid系統col-sm-4寬度一致:

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-4">
    <asp:Button CssClass="btn btn-primary btn-block" ID="btnSave" runat="server" Text="儲存" />
  </div>
  <div class="col-sm-4 ">
    <asp:Button CssClass="btn btn-default btn-block" ID="Button2" runat="server" Text="重置" />
  </div>
</div>

 

整合RadioButton伺服器控制項

上一個範例使用RadioButtonList伺服器控制項來顯示性別,您也可以改用RadioButton伺服器控制項來達到相同的效果,例如將前例的RadioButtonList伺服器控制項取代如下,使用兩個RadioButton來顯示男、女兩種性別:

<div class="form-group">
  <div class="col-sm-2 control-label">
    <label>性別:</label>
  </div>
  <div class="col-sm-8 ">
    <div id="rdoGender" class="btn-group" data-toggle="buttons" runat="server">
      <asp:RadioButton CssClass="btn btn-default" ID="RadioButton1" runat="server" GroupName="gender" Text="男" />
      <asp:RadioButton CssClass="btn btn-default" ID="RadioButton2" runat="server" GroupName="gender" Text="女" />
    </div>
  </div>
</div>

 

套用input-group與input-group-addon樣式

接下來我們再繼續美化一下表單,Bootstrap提供input-group與input-group-addon樣式可以針對Input項目,像是文字方塊,做進一步的美化。例如,以下範例的年齡欄位,我們在文字方塊之後,可以加上一個計量的單位「歲」,請參考下圖所示:

clip_image002[8]

圖 4:套用input-group與input-group-addon樣式。

我們只要略加調整,將<asp:TextBox>伺服器控制項放和一個<span>標籤放在一個標示「class="input-group"」的<div>標籤之中,然後設定<span>標籤套用「input-group-addon」樣式即可:

<div class="form-group">
  <asp:Label CssClass="col-sm-2 control-label" ID="Label3" runat="server"
     AssociatedControlID="txtAge" Text="年齡:"></asp:Label>
  <div class="col-sm-8">
    <div class="input-group">
      <asp:TextBox CssClass="form-control" ID="txtAge" runat="server" placeholder="年齡"></asp:TextBox>
      <span class="input-group-addon">歲</span>
    </div>
  </div>
</div>

 

同樣地,生日欄位也可如法泡製:

<div class="form-group">
  <asp:Label CssClass="col-sm-2 control-label" ID="Label6" runat="server"
    AssociatedControlID="txtBirth" Text="生日:"></asp:Label>
  <div class="col-sm-8">
    <div class="input-group">
      <asp:TextBox CssClass="form-control" ID="txtBirth"
        placeholder="生日" runat="server"></asp:TextBox>
      <span class="input-group-addon">日</span>
    </div>
  </div>
</div>

 

套用佈景主題

Bootstrap預設的佈景主題可能不符合你的需求,你可以撰寫CSS來進行客製化的動作。此外,還有一個更簡單的解決方式,你可以到訪http://bootswatch.com/ 網站,挑選你喜歡的佈景主題,這個網站的首頁會列出許多的範本,只要點選喜愛的佈景主題上方之「Download」按鈕,請參考下圖所示:

clip_image002[10]

圖 5:下載佈景主題。

下載bootstrap.min.css檔案,蓋掉網站中原來的bootstrap.min.css檔案就行了。參考下圖是套用Superhero怖景主題的效果,請參考下圖所示:

 
clip_image002[12]

圖 6:套用怖景主題。

 

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | Bootstrap | 許薰尹Vivid Hsu

評論 (1) -

Choo
Choo Taiwan
2015/12/19 下午 09:49:16 #

謝謝您,此系列對我很有用!

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List