Sunday, 15 November 2015 14:43

Tạo ứng dụng ASP.NET đầu tiên với Visual Studio 2015

Written by 
Rate this item
(1 Vote)

ASP.NET cung cấp những cải tiến cho máy chủ hơn so với phiên bản tiền nhiệm của nó, bao gồm cải tiến về hiệu suất, hỗ trợ tốt hơn cho sự phát triển các tiêu chuẩn và công cụ của trang web hiện đại, và cải tiến về sự hòa hợp WebAPI, MVC, và WebForms. Ngoài ra, bạn có thể dễ dàng phát triển ứng dụng ASP.NET bằng cách sử dụng nhiều công cụ và các biên tập viên, nhưng Visual Studio tiếp tục cung cấp một cách hiệu quả để xây dựng ứng dụng web. Trong bài viết này chúng ta sẽ trải qua việc tạo các ứng dụng ASP.NET web đầu tiên của bạn khi sử dụng Visual Studio 2015.

Tạo một dự án ASP.NET mới

Để bắt đầu, chúng ta mở Visual Studio 2015. Sau đó, tạo New Project ( từ Start Page, hoặc  thông qua File-New-Project). Ở phần bên trái của cửa sổ New Project hãy chắc chắn rằng mẫu Visual C# đã được mở và “Web” đã được chọn, như sau:

Ở phần bên phải, chọn ASP.NET Web Application. Hãy chắc chắn rằng khuôn khổ quy định ở trên cùng cửa sổ là .NET Framework 4.6. Nhập vào tên và xác nhận nơi mà bạn muốn tạo dự án, sau đó nhấn OK.

Sau đó bạn sẽ thấy một hộp thoại khác, cửa sổ New ASP.NET Project.

Chọn Web Application từ tập các mẫu ASP.NET 5 Preview. Đó là sự khác biệt so với các mẫu của ASP.NET 4.6, nó có thể sử dụng để tạo một dự án ASP.Net được sử dụng bởi phiên bản trước của ASP.NET. Chú ý rằng bạn có thể chọn cấu hình lưu trữ trực tiếp tại Microsoft Azure từ hộp thoại này bằng việc kiểm tra cái hộp phía bên phải. Sau đó chọn Web Application, nhấn OK.

Tại điểm này, dự an đã được tạo. Nếu bạn bị nhắc nhở hãy chọn một tùy chọn kiểm soát nguồn, chọn bất cứ cái nào mà bạn thích ( ví dụ, tôi đã chọn Git). Nó phải mất một vài phút để  dự án có thể tải, và bạn có thể nhận thấy rằng thanh trạng thái của Visual Studio hiển thị rằng Visual Studio đang tải về một số tài nguyên như một phần của quá trình. Visual Studio đảm bảo rằng một số tập tin cần thiết sẽ được đưa vào dự án khi một giải pháp được mở ra (hoặc một dự án mới được tạo), và những tập tin khác có thể được kéo về tại thời gian biên soạn. Dự án của bạn, một lần tải đầy đủ, sẽ trông như thế này

Hãy nhìn vào Solution Explorer và so sánh các yếu tố với những gì mà chúng ta đã quen thuộc ở phiên bản trước của ASP.NET, một vài điều được chỉ ra là mới và khác nhau. Bây giờ có một thư mục wwwroot , với những biểu tượng của riêng nó. Tương tự, có thư mục Dependencies và còn có thư mục References -  chúng ta sẽ thảo luận sự khác biệt của cả hai tại một thời điểm. Nằm trong danh sách các thư mục , chúng ta có Controllers, Models, và View, là những thứ có ý nghĩa đối với dự án ASP.NET MVC. Mãu này cũng bao gồm thư mục Services, ban đầu giữ lại MessageServices sử dụng bởi ASP.NET Identity, và thư mục Migrations, nắm giữ các lớp sử dụng bởiEntity Framework để theo dõi cập nhật đến các sơ đồ mô hình CSDL.

Nhìn vào các tập tin trong thư mục gốc của dự án, chúng ta có thể chú ý sự vắng mặt của một số tệp tin. Global.asax không còn hiện diện, cũng không có web.config, cả hai trụ cột từ đầu của ASP.NET. Thay vào đó, chúng ta tìm thấy tệp tin Startup.cs và tệp tin config.json. Thêm vào sự hòa hợp này là bower.json, gulpfile.js, package.json, và project.json( tệp tin Project_Readme.html mà bạn có thể thấy trong các tab trình duyệt). Rõ rang sự thành công của JavaScript trong phát triển web có ảnh hưởng đến cách ASP.NET 5 được cấu hình, biên dịch và triển khai, vớiJavaScript Object Notation (JSON) các tệp tin XML thay thế cho mục đích cấu hình.

Trong khi chúng ta đang ở đó, bạn có thể không nhận thấy nó từ Solution Explorer, nhưng nếu bạn mở Windows Explorer bạn sẽ thấy rằng đó không phải là một tệp tin .csproj. Thay vào đó, bạn sẽ tìm thấy tệp tin .xproj, tệp tin MSBuild sẽ phục vụ các mục đích tương tự từ một quan điểm quá trình xây dựng, nhưng nó là đơn giản hơn nhiều so với  csproj/vbproj trước đó

Chạy Ứng Dụng

Chạy ứng dụng (Debug -> Start Without Debugging ) và sau một bước xây dựng nhanh chóng, bạn có thể nhìn thấy nó mở ra trong trình duyệt web của bạn.

Nhấn vào About link, và chú ý nội dung trên trang. Bây giờ, mở tệp tin HomeController.cs 

trong thư mục Controllers, và thay đổi ViewBag.Message  như sau:

ViewBag.Message = "ASP.NET 5 Rocks!";

Lưu tệp tin và không cần xây dựng lại dự án , làm mới lại trình duyệt web của bạn. Bạn nên thấy các văn bản cập nhật. ASP.NET 5 không yêu cầu bạn phải xây dựng logic phía máy chủ của bạn trước khi xem nó, làm cho bản cập nhật nhỏ nhanh hơn nhiều để kiểm tra trong suốt quá trình phát triển.

Hành vi của máy chủ và máy khách

Các ứng dụng web hiện đại thường sử dụng sự kết hợp của các hành vi phía máy chủ và phía máy khách. Qua thời gian, ASP.NET đã phát triển để hỗ trợ nhiều và nhiều hơn nữa cho các hành vi phía máy khách, và với ASP.NET 5 hiện nay nó bao gồm sự hỗ trợ tuyệt vời cho Single Page Applications (SPAs) mà thay đổi hầu như là tất cả các ứng dụng logic của web khách hàng, và máy chủ chỉ sử dụng để lấy và lưu trữ dữ liệu. Cách tiếp cận ứng dụng của bạn sẽ được đưa đến nơi cư trú các hành vi của nó sẽ phụ thuộc vào nhiều yếu tố. Nhóm của bạn thoải mái hơn với sự phát triển bên khách hang, nhiều khả năng rất nhiều hành động của ứng dụng sẽ chạy trên máy khách. Nếu trang web của bạn bao gồm rất nhiều nội dung được phát hiện bởi các công cụ tìm kiếm, bạn có thể đảm bảo máy chủ sẽ trả về nội dung này trực tiếp, thay vì nó được xác định bởi câu lệnh của máy khách, từ sau khi đòi hỏi sự nổ lực để lập chỉ mục bởi công cụ tìm kiếm.

Trên máy chủ, ASP.NET  MVC 6 ( một phần của ASP.NET 5) hoạt động tương tự như tiền nhiệm, bao gồm hỗ trợ cho Razor-formatted Views cũng như tích hợp sự hỗ trợ cho Web API.

Trên máy khách, có nhiều tùy chọn có sẵn để quản lý trạng thái ứng dụng của máy khách, lien kết với các yếu tố giao diện người dùng, và thông tin liên lạc với APIs. Học nhiều hơn về

Bây giờ chúng ta có thể thêm 1 chút hoạt động cho cả máy chủ và máy khách của ứng dụng mặc định, chứng minh rằng nó dễ dàng khi bắt đầu lien kết các ứng dụng ASP.NET 5 của bạn

Thêm vào các hoạt động máy chủ

Chúng tôi cũng điều chỉnh các hành vi của phương pháp HomeController’s About để thay đổi Message thành View. Chúng ta có thể thêm các hoạt động ứng dụng cho máy chủ bằng cách tiếp tục sửa đổi hành động của HomeController’s About và nó lien quan với View. Sau đó, chúng ta sẽ tang cường nâng cao thêm thông tin cơ bản bằng việc thêm vào các họat dộng trên máy chủ, làm cho API gọi lại cho máy chủ.

Để bắt đầu, hãy thêm lớp ViewModel mới gọi là ServerInfoViewModel. Tôi thêm điều này trong thư mục ViewModels mới, nhưng  bạn có thể đặt các tệp tin trong thư mục khác nếu bạn thích.

namespace WebApplication1.ViewModels
{
    public class ServerInfoViewModel
    {
        public string Name { get; set; }
        public string LocalAddress { get; set; }
        public string Software { get; set; }
    }
}

Tiếp theo, cập nhật phương pháp HomeController’s About để nhanh chóng cho lớp này, thiết lập thuộc tính của nó, và trải qua nó đến View.

Bây giờ chúng ta cần cập nhật View để cung cấp cho một loại mô hình mạnh và hiển thị thông tin bằng cách sử dụng cú pháp Razor. Sửa đổi Views/Home/About.cshtml  như sau:

@model WebApplication1.ViewModels.ServerInfoViewModel
@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>
<h2>Server Name: @Model.Name</h2>
<h3>Software: @Model.Software</h3>

Bây giờ chúng ta có thể xây dựng các giải pháp. Từ khi web mặc định mẫu cả mục tiêu .NET và .NET Core đầy đủ, chúng ta kỳ vọng vào việc xây dựng thất bại khi nó cố gắng truy cập biến Environment.MachineName  vàEnvironment.OSVersion  trong HomeController. Hành vi này sẽ không làm việc trong .NET Core ( hiện tại), vì vậy chúng ta sẽ di chuyển .NET Core từ danh sách các mục tiêu cơ bản của chúng ta. Mở project.json  và sửa đổi “framework” bí quyết như sau:

"frameworks": {
    "dnx451": { }
},

Bây giờ chúng ta có thể xây dựng và chạy giải pháp. Điều hướng đến About page và bạn sẽ thấy tên của máy chủ và phiên bản hệ điều hành được hiển thị

Thêm vào các hoạt động máy chủ trong ASP.NET rất quen thuộc nếu bạn đã làm việc với các phiên bản trước của ASP.NET MVC

Thêm vào các hoạt động máy khách

Các ứng dụng web hiện đại thường sử dụng phong phú các hoạt động của máy khách, cho dù một phần trang cá nhân được tạo ra bở máy chủ, hoặc như là Single Page Application. Phổ biến các khuôn khổ JavaScript như AngularJS cung cấp phong phú các tiện ích cho SPAs (see Using Angular for Single Page Applications (SPAs)), nhưng ở ví dụ này chúng ta sẽ tận dụng lợi thế của một khuôn khổ bao gồm trong các dự án mẫu web cơ bản: jQuery. Mục đích của chúng ta là cho phép người dùng nhấn vào nút trên trang About và có nó tải về một danh sách các quá trình hiện tại đang chạy trên máy chủ, nhưng không làm mới trang. Để làm được điều này, chúng ta sẽ cần thêm vào một số HTML và JavaScript đến xem About.cshtml của chúng ta, cũng như tạo bộ điều khiểnWeb API qua mã của máy khách có thể gọi để lấy danh sách quá trình đang chạy trên web máy chủ.

Hãy bắt đầu với mã của máy khách. Chúng ta sẽ cần một nút và danh sách đó sẽ cư trú ở kết quả của cuộc điện thoại đến máy chủ. Từ khi chúng ta cần tham khảo cái nút và danh sách lập trình bằng mã JavaScript, chúng ta sẽ cung cấp cho mỗi người một ID. Kể từ khi dự án mẫu web mặc định bao gồm Bootstrap, chúng ta có thể sử dụng một số lớp CSS để tạo kiểu cho các yếu tố. Thêm mã sau vào dưới cuối cùng của trang About.cshtml.

<button id="listButton" class="btn-success">List Processes</button>
<ul id="processList" class="list-group"></ul>

Tiếp theo, chúng ta cần thêm một vài câu lệnh mà sẽ chạy khi nút listButton được nhấn, và sẽ được phổ biến nội dung của danh sách processList. Từ khi chúng ta muốn câu lệnh này chạy sau khi jQuery tải xong ( trong tệp _Layout.cshtml razor ), chúng ta cần đặt chúng vào Razor Section được gọi là lệnh. Trong phần này, chúng ta sẽ bao gồm khối câu lệnh sẽ xác định chức năng để liên kết danh sách đến một số dữ liệu, và một handler sẽ bấm vào đó để tạo một yêu cầu Get đến API và gọi hàm ràng buộc với các dữ liệu kết quả. Cập nhật About.cshtml để thêm @section scripts  như sau

 

Tại thời điểm này, chúng ta đang làm với mã máy khách và chúng ta cần thêm mã Web API để đáp ứng yêu cầu Get đến “/api/processes” URL. Thêm vào một lớp mới, ProcessInfoViewModel  (không nhầm lẫn với thư viện khuôn mẫu .NET của ProcessInfo lớp ), đến thư mục ViewModels và cung cấp cho nó một tài khoản string, Name:

namespace WebApplication1.ViewModels
{
    public class ProcessInfoViewModel
    {
        public string Name { get; set; }
    }
}

Bây giờ thêm một mục mới vào thư mục Controllers, và chọn một lớp Web API Controller mới. Gọi ProcessesController như sau

Xóa tất cả các phương pháp ngoại trừ phương pháp Get (), và cập nhật các phương pháp Get () để quay lại sự liệt kê của mục ProcessInfoViewModel như hình vẽ.

Tại thời điểm này, bạn sẽ có thể kiểm tra các API bằng cách điều hướng đến đường dẫn /api/processes trong trình duyệt của bạn. Bạn sẽ thấy một số tên quá trình định dạng JSON.

Điều hướng trở lại trang About, nhấn vào nút tương tự tải các danh sách chương trình vào danh sách HTML.

Bây giờ các ứng dụng bao gồm cả hành vi máy chủ và máy khách, chạy cùng nhau trên trang About

Tóm lại

ASP.NET 5 giới thiệu một số khái niệm mới, nhưng vẫn quen thuộc với các nhà phát triển, người mà sử dụng các phiên bản trước của ASP.NET. Tạo một ứng dụng web mới bao gồm cả hành vi của máy chủ và máy khách chỉ mất vài phút sử dụng mẫu Visual Studio ASP.NET Started Web

Nguồn dịch từ http://docs.asp.net

Read 12368 times Last modified on Sunday, 15 November 2015 15:38