Idea

本文目的是幫助您升級現有的ASP.NET專案，以滿足當前的HTML5響應式設計需求，並通過消除所有伺服器往返行為

使其加快響應速度。 我們試著從頁面中消除ViewState，使其在客戶端輕量化，並且僅通過服務（Web API）

與後臺進行的所有互動。

Summary

• Part I ：使用Bootstrap建立一個ASP.NET Web表單移動應用程式來設計佈局，將Web API作為服務層，並使用JSON格式來提高瀏覽器的易讀性。 如此，可以消除大多數程式碼隱藏邏輯，並實現巨大的效能提升。
• Part II：演示瞭如何使用FooTable外掛建立一個響應式的HTML表，並使用HandlebarsJs、JavaScript庫應用客戶端繫結。

Part I 步驟

• A、建立一個簡單的ASP.NET Forms 應用程式使用bootstrap template。
• B、建立一個bundle 優化web資源。
• C、向現有應用程式新增一個具有JSON格式的服務層（Web API）。

A）建立簡單的ASP.NET Forms 應用程式使用bootstrap模板

首先在ASP.NET中建立新的Visual C＃專案，並從“新建專案”對話方塊中選擇 “空的Web應用程式”。 單擊確定建立新專案。 （VS 2012）

現在是這樣：

繼續在這個專案中建立Global.asax 檔案

右擊專案選擇"Manage NuGet Package..." 安裝JQuery 和 Bootstrap。接下來會建立三個檔案Content for CSS ，"fonts" 和 "Scripts" 。

筆記：我喜歡刪除所有的.min.* 和.map 檔案 在新建立的資料夾，並使用繫結技術來優化web資源（Bundle稍後建立）。另外，在專案中建立一個新的檔案"packages.config"，我們可以找到所有安裝的NuGet軟體包及其版本。

警告：如果安裝的軟體包的版本與package.config檔案中指定的軟體包版本不匹配，Nuget將無法正常工作。
現在，我們將建立一個主頁面（Main.Master），在主體中的"ContentSection"和"關閉"主體標籤之前的"ScriptSection"中分別放置了三個"StyleSection"部分。 對於本示例，我們將使用引導模板中的"Navbar"模板。 從瀏覽器"檢視頁面源"獲取源HTML，並將其放在底部的母版頁面中。 使用下載的源替換所需的HTML，並保留HTML以保留其主頁面行為。

筆記：這裡我們評論了表單標籤； 如果需要，我們可以在我們的內容頁面中建立表單部分。 現在，我們的主頁面如下所示：

建立一個新的內容頁面"ContentPage.aspx"。 將Bootstrap模板中的HTML程式碼（div類別為“jumbotron”）新增到“ContentSection”中。 我們的程式碼應該是這樣的：

設定"ContentPage.aspx"作為起始頁;建立並執行這應用程式

Laptop/Tablet View

Mobile View

筆記：如果您檢視頁面的原始碼，則會單獨引用.css和.js檔案。 當網頁上新增大量檔案時，這將影響我們的頁面載入時間。 要解決這個問題，我們需要為Style和Script型別建立一個bundle。

B) 建立bundle 來優化web 資源

首先，我們需要建立一個新的資料夾“App_Start”到專案的根目錄。

使用靜態RegisterBundles方法向資料夾新增一個新類“BundleConfig.cs”。 每個指令碼或樣式包位於從根（〜/ bundles /）指定的虛擬路徑。

將檔案新增到包中的順序很重要；檢查依賴關係。

修復BundleCollection錯過的引用； 從NuGet安裝軟體包"Microsoft.AspNet.Web優化"。

筆記：將“System.Web.Optimization;”名稱空間新增到“BundleConfig.cs”檔案中。 用指向虛擬路徑的軟體包指令碼替換現有的樣式和指令碼標籤。 現在，您的主頁應該如下所示：

<script src="<a href="view-source:http://localhost:2469/Scripts/jquery-2.1.1.js"

>/Scripts/jquery-2.1.1.js</a>"></script>
<script src="<a href="view-source:http://localhost:2469/Scripts/jquery-2.1.1.intellisense.js"
>/Scripts/jquery-2.1.1.intellisense.js</a>"></script>
<script src="<a href="view-source:http://localhost:2469/Scripts/bootstrap.js">
/Scripts/bootstrap.js</a>"></script>

接下來，我們需要註冊我們的bundle 在Global.asax檔案中的Application_Start

protected void Application_Start(object sender, EventArgs e)
{
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

執行應用程式檢查一切是否正常。 現在，如果我們檢視頁面源，即使在建立捆綁包之後，仍然會顯示每個資源的各個連結，如下所示：

<script src="<a href="view-source:http://localhost:2469/Scripts/jquery-2.1.1.js"

>/Scripts/jquery-2.1.1.js</a>"></script>
<script src="<a href="view-source:http://localhost:2469/Scripts/jquery-2.1.1.intellisense.js"
>/Scripts/jquery-2.1.1.intellisense.js</a>"></script>
<script src="<a href="view-source:http://localhost:2469/Scripts/bootstrap.js">
/Scripts/bootstrap.js</a>"></script>

要檢視bundle的效果，我們需要使用語句明確地啟用bundle優化：

// Enable bundle optimization.
BundleTable.EnableOptimizations = true;

啟用包優化後，執行應用程式檢視頁面源。 所有三個指令碼檔案組合成一個最小化的檔案。

<script src="<a href="

view-source:http://localhost:2469/bundles/jQuery?v=7cwTEn6KyyUMXFP2b6gmRFCP5GslErEu2IVcRGkvL-s1">
/bundles/jQuery?v=7cwTEn6KyyUMXFP2b6gmRFCP5GslErEu2IVcRGkvL-s1</a>"></script>

C) 將具有JSON格式的服務層（Web API）新增到現有應用程式

我們需要在專案根目錄下建立一個新的資料夾“Controller”。 預設情況下，Web表單不具有Web API功能。

我們需要依靠NuGet軟體包管理器來搜尋“Microsoft ASP.NET Web API 2.2”並安裝軟體包。

筆記：這也將安裝“Newtonsoft.Json”庫來序列化和反序列化物件。 如果沒有，您可以隨時在NuGet找到該軟體包。

 右擊這Controller 資料夾並增加一個新專案。從模板中選擇Web API Controller Class並建立“ProductController”。

筆記：您將看到基本的Get，Post，Put和Delete操作方法。 評論所有的程式碼或擴充套件它。 我更喜歡刪除所有的動作，並新增新的動作方法“GetHelloWorld”來測試API。

public class ProductController : ApiController
{
   [HttpGet]
   [ActionName("GetHelloWorld")]
   public string GetHelloWorld()
   {
      ArrayList al = new ArrayList { "Hello", "World", 
      "From", "Sample", "Application" };
      return JsonConvert.SerializeObject(al);
   }
}

為了訪問API方法，我們需要設定正確的路由機制。 所以讓我們這樣做

在“App_Start”資料夾中新增一個新類“WebApiConfig.cs”，程式碼如下：

public static void Register(HttpConfiguration config)
{
   config.EnableCors();

   config.Routes.MapHttpRoute(
      name: "DefaultApi",
      routeTemplate: "api/{controller}/{Action}/{id}",
      defaults: new { Controller = "Product", 
      Action = "GetHelloWorld", id = RouteParameter.Optional }
   );
}

新增對這個名稱空間“System.Web.Http”的引用。 如果您的程式碼在“config.EnableCors（）”中引發錯誤，請轉到NuGet並安裝Cors（Cross Origin Resource Sharing）包（Microsoft.AspNet.WebAPI.Cors）以從其他域訪問Web API。 （這在我們的示例專案中不是必需的）

現在，將我們的API路由器註冊到Global.asax檔案中的“Application_Start”方法中：

WebApiConfig.Register(GlobalConfiguration.Configuration);

現在，嘗試使用連結訪問API：

http://localhost:7656/api/

在上述連結中沒有指定控制器和操作名稱。

這些值在WebAPIConfig檔案中設定為預設值（如“ProductController”和“GetHelloWorld”）。 結果以XML格式出現，這是預設的Web API行為。 以JSON（JavaScript Object Notation）格式獲取結果； 我們需要使用WebAPIConfig暫存器方法中的以下語句設定媒體型別標頭來接受“text / html”。

// To return json return

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

現在，再次執行API連結，此時您將看到JSON格式的結果：

要更好地瞭解JSON，請檢查這些示例。 點選這裡繼續閱讀第二部分。
如果您喜歡使用Asp.Net MVC開始實施流行的AngularJS，請檢查這篇文章
檢查這篇文章瞭解更多關於ASP.NET 5和C＃6中的新功能
我希望你有一個美好的時光學習新知識。 如果您有任何建議，請告訴我們 隨意評價這篇文章，留下更好的意見。
 

作者： Sreekanth Mothukuru 

原文有原始碼可以下載