ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

• 建構與執行在Windows、Mac和Linux上的跨平台ASP.NET
• 基於.NET Core，支援了side-by-side的app versioning（譯者註解：.NET Core支援不同應用程式使用各自獨立的runtime，版本互不干擾）。
• 新工具，讓新的Web開發更加簡化。
• Single aligned web stack for Web UI和Web APIs。
• 為雲端環境而建、即時可用的設定（Cloud-ready environment-based configuration）。
• 整合了創建和使用的NuGet軟體套件。
• 內建對於DI（dependency injection）的支援。
• 可以在IIS上建構主機，或是在自己的程序上自訂Host（Ability to host on IIS or self-host in your own process）。

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

				
						@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
				
							@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })

 

現在可以改寫成這樣：

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="UserName" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="UserName" class="form-control" />
        <span asp-validation-for="UserName" class="text-danger"></span>
    </div>
</div>

 

 

Tag Helper能讓您寫的view畫面更自然、可讀性更高。也可以用來自訂HTML helper的輸出，額外加入其他HTML編輯器的完整特性。

 

想要瞭解更多建立MVC 6應用程式的範例，可以參閱 http://www.asp.net/vnext/overview/aspnet-vnext。

 

 

新的Web開發

 

本次（2015/2/23）釋出的ASP.NET 5 預覽版也包含許多有趣的特點，讓您能夠建構更好的 Web應用程式：

 

動態發展（Dynamic Development）

 

在Visual Studio 2015裡面，我們從動態編譯的優點裡，企圖讓開發經驗更加流暢。您再也不用每次小改變時就得重新編譯一次，如下圖，只要：(1). 編輯程式碼，(2). 存檔，(3). 直接刷新（refresh）瀏覽器，(4). 就能自動看到您剛剛的修改成果。

 

 

盡情享受您的開發經驗吧！如同撰寫直譯式語法一般，卻能享有編譯式語法的優勢。

 

您也可以選擇其他的程式碼編輯器來完成你的ASP.NET 5專案。Visual Studio使用者界面中的每一個功能都可以對應跨平台的命令行（Command-line）操作（譯者註解：也可以透過輸入指令碼來達成）。

 

 

與流行的Web開發工具整合（如Bower、Grunt與Gulp）

 

另一個令人開心的功能是Visual Studio 2015本身即支援了Bower、Grunt與Gulp這些廣受歡迎的開放原始碼（開源）工具，我們認為應該將它們包含在開發工具裡面。

 

• Bower是一個用於用戶端（Client-side）的函式庫管理工具，包含了JavaScript與CSS函式庫。

• Grunt與Gulp是task runner，用來協助您自動化Web開發流程。您可以使用他們來編譯LESS、CoffeeScript或TypeScript檔案，執行JSLint或是縮減JavaScript檔案。

 

說明與展示如下：

 

Bower：如下圖，您可以直接在bower.json檔案裡面加入一個JavaScript函式庫到ASP.NET專案裡面。

 

提醒您，Visual Studio透過許多可用的軟體套件來增強「智慧選字（IntelliSense）」功能。下次當您打開一個方案，Visual Studio會自動還原您先前遺失的軟體套件，您就不用大費周章地檢查這些原始檔（資源檔）了。

 

如果是Server端的軟體套件，您最好使用NuGet來幫忙。

 

 

Grunt：現在的Web開發，您通常得自己管理一大堆task，只是為了建立自己的應用程式，例如：編譯LESS、TypeScript或CoffeeScript檔案、做lint、縮減JavaScript檔案、執行JS單元測試等等。每個開發團隊都有自己的需求並且依賴各自所需的工具來完成。Task runner讓這些管理與協同工作更加簡單。Visual Studio 2015支援了兩種最流行的task runner，就是Grunt與Gulp。

 

例如，假設您想用Grunt編譯LESS文檔。只要到package.json裡面加入「grunt-contrib-less」軟體套件即可，它是一個第三方的Grunt plugin。關於grunt-contrib-less套件可以參閱 https://github.com/gruntjs/grunt-contrib-less 。

 

如下圖，使用Visual Studio 2015裡面的Task Runner Explorer來綁定（繫結、bind）task的步驟如下：pre-build、post-build、clean或是在方案被打開的時候。

如下圖，Visual Studio 2015智慧選字（IntelliSense）助您一臂之力，讓您迅速找到相關的NuGet軟體套件：

如下圖，智慧選字（IntelliSense）也幫您列出這些NuGet軟體套件的可用版本。

上述的程式碼片段用來表示：一個專案從JSON文檔裡面取得設定值與環境變數。您可以輕易地定義其他來源，例如config.json文檔裡面的設定（如下圖）。

using System;
 
namespace WebApplication1
{
    public class TimeService
    {
        public TimeService()
        {
            Ticks = DateTime.Now.Ticks.ToString();
        }
        public String Ticks { get; set; }
    }
}

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddTransient();
}

public class HomeController : Controller
{
    public TimeService TimeService { get; set; }
 
    public HomeController(TimeService timeService)
    {
        TimeService = timeService;
    }
 
    public IActionResult About()
    {
        ViewBag.Message = TimeService.Ticks + " From Controller";
        System.Threading.Thread.Sleep(1);
        return View();
    }
 
    // Code removed for brevity
}

public class HomeController : Controller
{
    [Activate]
    public TimeService TimeService { get; set; }
 
    // Code removed for brevity
}

@using WebApplication23
@inject TimeService TimeSvc
 
<h3>@ViewBag.Message</h3>
 
<h3>
    @TimeSvc.Ticks From Razor
</h3>

當您執行這份應用程式時，可以看見controller與view有不同的（時間）tick值。如下圖。

public void Configure(IApplicationBuilder app)
{
    // Add static files to the request pipeline.
    app.UseStaticFiles();
 
    // Add cookie-based authentication to the request pipeline.
    app.UseIdentity();
 
    // Add MVC and routing to the request pipeline.
    app.UseMvc(routes =>
    {
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action}/{id?}",
        defaults: new { controller = "Home", action = "Index" });
 
});

• Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower

• View components and Inject in ASP.NET MVC 6