在ASP.NET Web Forms使用TypeScript

by vivid 15. 十一月 2017 17:38

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N171118902
出刊日期: 2017/11/15

TypeScript簡介

JavaScript Engine是遵循ECMAScript的標準來設計的。現今大部分的瀏覽器都支援ECMAScript 5標準的JavaScript語法,但有愈來愈多的瀏覽器支援ECMAScript 2015(通常稱做ES6)、ECMAScript 2016標準的語法,可是還是有少部分瀏覽器不支援ECMAScript 2015與CMAScript 2016新語法,例如IE11。如此要在瀏覽器中執行JavaScript程式碼就要因應不同瀏覽器,撰寫更多檢查程式碼,才能讓各家瀏覽器都能順利執行。由於現今很多企業網站或專案還是要求需能在IE11上正確執行,那麼這就代表你不能夠使用ECMAScript 2015新語法。若想要使用新語法又能夠在IE11順利運行,現在有一個替代的做法:使用TypeScript,它可以根據需求產生出符合ECMAScript 3、ECMAScript 5或ECMAScript 2015標準的JavaScript程式碼。

使用了TypeScript不代表你就不需要學JavaScript。因為TypeScript會編譯成JavaScript,未來真正會執行的程式碼是JavaScript程式,熟悉JavaScript語法在未來可以幫助除錯程式碼。

除了能根據需求產生符合不同ECMAScript標準的JavaScript程式之外,TypeScript另一個好處是:加入了型別系統,讓程式更容易被理解與編寫。如此便可以在編譯階段進行程式的型別安全檢查,能於撰寫階段找出程式錯誤。

本篇文章將簡介如何使用Visual Studio 2017,在ASP.NET Web Forms 網站以及ASP.NET Web Application類型的專案中使用TypeScript。

 

建立ASP.NET Web Forms網站

我們先用Visual Studio 2017來建立一個ASP.NET Web Forms網站。從 Visual Studio 2017的主選單點選「File」-「New」-「Web Site」,開啟「New Web Site」對話窗,請參考下圖所示:

clip_image002

圖 1:開啟「New Web Site」對話窗

在「New Web Site」對話盒視窗,確認視窗上方.NET Framework的目標版本為「.NET Framework 4.6.1」或以上版本,選取使用的程式語言為「Visual C#」,然後選取「ASP.NET Empty Web Site」,將「Web Location」設為「File System」,並設定網站根資料夾,請參考下圖所示:

clip_image004

圖 2:建立「ASP.NET Empty Web Site」。

從「Solution Explorer」視窗 -「網站(Demo)」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Folder」選項,將新建立的資料夾命名為「Scripts」,請參考下圖所示:

clip_image006

圖 3:加入「Scripts」資料夾。

從Visual Studio 2017開發工具 -「Solution Explorer」視窗- 網站-「Scripts」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,從右上方文字方塊輸入「type」搜尋,選取「TypeScript JSON Configuration File」,設定名稱為「tsconfig.json」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image008圖 4:加入「TypeScript JSON Configuration File」檔案。

預設「tsconfig.json」檔案中將包含以下組態設定:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

其中「target」設定為「es5」,表示要產生符合ECMAScript 5標準的JavaScript程式碼。修改「tsconfig.json」組態檔案,加入「compileOnSave」為「true」,這樣只要儲存TypeScript原始程式碼檔案(*.ts)就會自動產生JavaScript檔案(*.js):

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

 

若沒有設定「compileOnSave」這個項目,那就要採取別的方式手動處理,例如可以在命令提示字元使用以下指令來產生檔案:

tsc file.ts

 

第一個TypeScript檔案

TypeScript檔案的附檔名是「ts」,利用Visual Studio 2017在「Scripts」資料夾中建立檔案。從Visual Studio 2017開發工具 -「Solution Explorer」視窗- 網站 -「Scripts」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,選取「TypeScript File」,設定名稱為預設的「file.ts」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image010圖 5:加入「TypeScript File」檔案。

在「file.ts」檔案中加入以下程式碼:

function btn_click() {
    let message: string = "Hello";
    let userName: string = (<HTMLInputElement>document.getElementById("txtUserName")).value;
    document.getElementById("result").innerHTML = `${message} , ${userName}`;
}

btn_click方法將當做網頁中按鈕的事件接聽程式,在按鈕被按下後執行。方法中利用let宣告兩個string型別變數:message與userName。將兩個文字變數內容組合成以逗號(,)區隔的字串,顯示在id為「result」的HTML Div標籤之中。

現在只要儲存「file.js」檔案就會自動產生「file.js」與「file.js.map」兩個檔案,請參考下圖所示:

clip_image012

圖 6:自動產生「file.js」與「file.js.map」兩個檔案。

「file.js」檔案內容如下,因為要求要使用ECMAScript 5標準,所以產生出的程式碼使用「+」運算子來串接字串:

 

function btn_click() {
    var message = "Hello";
    var userName = document.getElementById("txtUserName").value;
    document.getElementById("result").innerHTML = message + " , " + userName;
}
//# sourceMappingURL = file.js.map

 

 

在HTML使用JavaScript

接著我們在HTML網頁中使用產生出來的JavaScript。本篇文章稍後會介紹在ASP.NET Web Form之中搭配伺服器控制項的做法。從Visual Studio 2017開發工具「Solution Explorer」視窗 -「網站(Demo)」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」選項。

從Visual Studio 2017開發工具 -「Solution Explorer」視窗-「網站(Demo)」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,從右上方文字方塊輸入「Html」搜尋,選取「HTML Page」,設定名稱為「HtmlPage.html」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image014

圖 7:加入「HtmlPage.html」檔案。

在「HtmlPage.html」檔案中<body>標籤內,加入以下HTML標籤:

 

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8" />
  <title> Demo </title>

</head>
<body>
  <label> User Name : </label>
  <input type = "text" id = "txtUserName" name = "txtUserName" value = "" />
  <input type = "button" onclick = "btn_click()" value = "click" />
  <div id = "result"> </div>
  <script src = "Scripts/file.js"> </script>
</body>
</html>


 

從「Solution Explorer」視窗,選取「HtmlPage.html」,按滑鼠右鍵,從快捷選單中選取「View In Browser」選項執行網頁,下圖是在Chrome瀏覽器執行的結果,請參考下圖所示,在文字方塊中輸入使用者的名稱按下「click」按鈕:

clip_image016

圖 8:網頁執行結果。

網頁下方就會顯示歡迎的字串:

clip_image018

圖 9:網頁執行結果。

產生符合ECMAScript 2015標準的JavaScript程式碼

若要讓TypeScript產生符合ECMAScript 2015標準的JavaScript程式碼,只要從組態檔案進行設定。修改「tsconfig.json」檔案,將「target」設定為「es2015」:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es2015"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

再次儲存「file.ts」檔案,就會自動產生符合ECMAScript 2015版本語法的JavaScript檔(*.js),產生出的程式如下所示,採用ECMAScript 2015 Template Literals 功能來處理字串串接部分:

 

function btn_click() {
    let message = "Hello";
    let userName = document.getElementById("txtUserName").value;
    document.getElementById("result").innerHTML = `${message} , ${userName}`;
}
//# sourceMappingURL = file.js.map

 

在Web Application網站使用TypeScript

接下來讓我們建立Web Application網站,聊聊如何在網站中使用TypeScript。從Visual Studio開發工具「File」-「New」-「Project」項目,在「New Project」對話盒中,確認視窗上方.NET Framework的目標版本為「.NET Framework 4.6」或以上版本,選取左方「Installed」清單-「Templates」-「Visual C#」程式語言,從「Web」分類中,選取「ASP.NET Web Application (.NET Framework)」。請參考下圖所示,設定專案名稱為「DemoWebApplication」以及專案存放路徑,然後按下「OK」鍵。

clip_image020

圖 10:建立「ASP.NET Web Application (.NET Framework)」網站專案。

在「New ASP.NET Web Application 」對話盒中,選取下方的「Empty」樣版,勾選「Web Forms」,然後按下「OK」按鈕建立專案,請參考下圖所示:

clip_image022

圖 11:建立「Web Forms」專案。

從「Solution Explorer」視窗 -「網站(DemoWebApplication)」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Folder」選項,將新建立的資料夾命名為「Scripts」,請參考下圖所示:

clip_image024

圖 12:建立「Scripts」資料夾。

從Visual Studio 2017開發工具 -「Solution Explorer」視窗- 網站-「Scripts」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,選取「TypeScript File」,設定名稱為預設的「file.ts」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image026

圖 13:加入「TypeScript File」檔案。

在「file.ts」檔案中加入以下程式碼:

function btn_click() {
    let message: string = "Hello";
    let userName: string = (<HTMLInputElement>document.getElementById("txtUserName")).value;
    document.getElementById("result").innerHTML = `${message} , ${userName}`;
}

 

現在只要編譯專案就會自動產生TypeScript對應的JavaScript程式碼。選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯,並在Scripts資料夾中新增兩個檔案:file.js與file.js.map,請參考下圖所示:

clip_image028

圖 14:編譯專案就會自動產生TypeScript對應的JavaScript程式碼。

目前產生出的程式碼是符合ECMAScript 5標準的程式碼,如下所示:

 

function btn_click() {
    var message = "Hello";
    var userName = document.getElementById("txtUserName").value;
    document.getElementById("result").innerHTML = message + " , " + userName;
}
//# sourceMappingURL = file.js.ma

 

若想要變更使用的ECMAScript標準,使用滑鼠雙擊「Solution Explorer」視窗中「網站(DemoWebApplication)」下方「Properties」項目,就會自動開啟專案的屬性視窗。選取「TypeScript Build」分頁,設定右方的「ECMAScript version」,請參考下圖所示:

clip_image030

圖 15:變更「ECMAScript version」標準。

這些設定都會儲存在專案檔案(*.csproj)中,以下是專案檔案中關於TypeScript目前的設定:

<PropertyGroup Condition = " '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
  <DebugSymbols>true</DebugSymbols>
  <DebugType>full</DebugType>
  <Optimize>false</Optimize>
  <OutputPath>bin\</OutputPath>
  <DefineConstants>DEBUG;TRACE</DefineConstants>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
  <TypeScriptTarget>ES6</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptModuleKind>ES6</TypeScriptModuleKind>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
  <TypeScriptOutFile />
  <TypeScriptOutDir />
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptSourceMap>True</TypeScriptSourceMap>
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />
</PropertyGroup>

 

現在只要編譯專案就會自動產生TypeScript對應的JavaScript程式碼。選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,就會產生符合ECMAScript 2015語法標準的JavaScript 程式碼,參考如下:

function btn_click() {
    let message = "Hello";
    let userName = document.getElementById("txtUserName").value;
    document.getElementById("result").innerHTML = `${message} , ${userName}`;
}
//# sourceMappingURL = file.js.map

 

在WebForms中使用JavaScript

從Visual Studio 2017選單「Project」-「Add New Item」項目,開啟「Add New Item」對話盒。接著在「Add New Item」對話盒中,選取Visual C# 的「Web Form」,設定名稱為「WebForm1.aspx」,按下「Add」按鈕,請參考下圖所示:

clip_image032

圖 16:在WebForms中使用JavaScript。

在Default.aspx「Source」設計畫面,<form> - <div>標籤下方加入以下伺服器控制項與HTML標籤:

<%@ Page Language = "C#" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx.cs" Inherits = "DemoWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title></title>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>
            <asp:Label ID = "Label1" runat = "server" Text = " User Name : "> </asp:Label>
            <asp:TextBox ID = "txtUserName" runat = "server"> </asp:TextBox>
            <asp:Button ID = "Button1"
                onClientClick = "return btn_click();"
                runat = "server" Text = "Click" UseSubmitBehavior = "false" />
        </div>
    </form>
     <div id = "result"> </div>
    <script src = "Scripts/file.js"> </script>
</body>
</html>


 

選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。在「Solution Explorer」,點選ASPX網頁,然後按滑鼠右鍵,從快捷選單中選取「View In Browser」項目執行網頁,下圖是在Chrome瀏覽器執行的結果,和前文的HTML網頁執行結果一致:

clip_image034

圖 17:範例執行結果。

檢視網頁產生的原始HTML標籤如下:


<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title>

  </title>
</head>
<body>
  <form method = "post" action = "./WebForm1.aspx" id = "form1">
    <div class = "aspNetHidden">
      <input type = "hidden" name = "__EVENTTARGET" id = "__EVENTTARGET" value = "" />
      <input type = "hidden" name = "__EVENTARGUMENT" id = "__EVENTARGUMENT" value = "" />
      <input type = "hidden" name = "__VIEWSTATE" id = "__VIEWSTATE" value = "t81jJSpnWDhlE = ...略" />
    </div>

    <script type = "text/javascript">

      //<![CDATA[
      var theForm = document.forms['form1'];
      if (!theForm) {
        theForm = document.form1;
      }
      function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
          theForm.__EVENTTARGET.value = eventTarget;
          theForm.__EVENTARGUMENT.value = eventArgument;
          theForm.submit();
        }
      }
    //]]>
    </script>


    <div class = "aspNetHidden">

      <input type = "hidden" name = "__VIEWSTATEGENERATOR" id = "__VIEWSTATEGENERATOR" value = "..略" />
      <input type = "hidden" name = "__EVENTVALIDATION" id = "__EVENTVALIDATION" value = "...略" />
    </div>
    <div>
      <span id = "Label1"> User Name : </span>
      <input name = "txtUserName" type = "text" id = "txtUserName" />
      <input type = "button" name = "Button1" value = "Click"
onclick = "return btn_click();__doPostBack(&#39;Button1&#39;,&#39;&#39;)" id = "Button1" />
    </div>
  </form>
  <div id = "result"> </div>
  <script src = "Scripts/file.js"> </script>
</body>
</html>

   

將Button控制項的「UseSubmitBehavior」屬性設定為「false」表示不使用瀏覽器提交表單的機制,如此再檢視ASP.NET Button伺服器控制項產生出的HTML標籤,在onclick事件接聽程式中,因為先執行了「return btn_click()」,所以之後叫用的「__doPostBack()」方法這段程式碼不會被執行,也就不會提交表單的資料到伺服端,只會執行用戶端的程式碼。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List