Hiển thị các bài đăng có nhãn MVC 6 vNext. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn MVC 6 vNext. Hiển thị tất cả bài đăng

Tạo controller đầu tiên cho dự án .net mvc6 P2


Model-View-Controller (MVC) mô hình kiến ​​trúc tách ứng dụng thành ba thành phần chính: Model, View, và Controller. Các mô hình MVC giúp bạn tạo ra các ứng dụng có phát triển và bảo trì dễ dàng hơn

Trong hướng dẫn này, một mô hình Phim lấy dữ liệu phim từ một cơ sở dữ liệu, cung cấp cho nó để xem hoặc cập nhật nó. cập nhật dữ liệu được ghi vào một cơ sở dữ liệu SQL Server. Moder : xem là các thành phần hiển thị giao diện người dùng của ứng dụng (UI). Nhìn chung, giao diện người dùng này sẽ hiển thị các dữ liệu mô hình. Control: Lớp học có thể xử lý yêu cầu trình duyệt, lấy dữ liệu từ, và sau đó xử lý và trả về trình duyệt. Trong một ứng dụng MVC, View chỉ hiển thị thông tin

3 thành phần này được quản lý bởi 3 thư mục tương ứng như hình bên dưới

../../_images/mvc1.png
  • tromg Solution Explorer, click chuột phải vào phần Control và chọn Add > New Item.
../../_images/add_controller.png
  • Trong phần Add New Item 
    • chọn MVC Controller Class
    • Đặt tên cho control là “HelloWorldController”
    • Click Add
../../_images/new_hell_ctl.png
Control vừa tạo sẽ có code như sau  với đường dẫn tương đối Controllers/HelloWorldController.cs 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using Microsoft.AspNet.Mvc;
using Microsoft.Extensions.WebEncoders;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        // 
        // GET: /HelloWorld/ 

        public string Index()
        {
            return "This is my default action...";
        }

        // 
        // GET: /HelloWorld/Welcome/ 

        public string Welcome()
        {
            return "This is the Welcome action method...";
        }
    }
}
Mọi phương thức public trong control đều có thể gọi được ta thử chạy đoạn code dưới nhé
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/ 

    public string Index()
    {
        return "This is my default action...";
    }

    // 
    // GET: /HelloWorld/Welcome/ 

    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}
Và đây là cách gọi đến hàm trong control từ trình duyệt khi chạy ở chế độ không debug (bấmCtrl+F5)
../../_images/hell1.png
MVC gọi phương thức mặc định trong controller classes  với các phương thức khác trong control ta gọi như sau trên trình duyệt /[Controller]/[tên hàm]/[tham số]
điều này được định nghĩa trong file Startup.cs 
1
2
3
4
5
6
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
Khi bạn không truyền tham số nào trên trình duyệt mặc định MVC sẽ chọn control và action là Index 
kết quả trả về khi gọi tới control HelloWorld và phương thức webcome
../../_images/welcome.png
Bây giờ ta sẽ truyền thêm tham số vào phương thức Welcome
1
2
3
4
5
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.HtmlEncode(
        "Hello " + name + ", NumTimes is: " + numTimes);
}
Note
đoạn mã  HtmlEncoder.Default.HtmlEncode  bên trên giúp bạn loại bỏ những đoạn mã nguy hiểm được truyền từ trình duyệt
Note
Trong Studio 2015, khi bạn chạy ở chế độ không debug (Ctl+F5), bạn không cần buld lại web đơn giản chỉ save file và refesh trình duyệt 
Chạy trương trình và truyền tham số từ trình duyệt 
../../_images/rick4.png
Bài sau mình sẽ hướng dẫn tạo View để hiển thị dữ liệu mà control trả về.

Tạo project MVC 6 đầu tiên P1

Trong bài hướng dẫn này sử dụng Visual Studio 2015.


Cài đặt Visual Studio and ASP.NET

Hưỡng dẫn cài đặt tại đây ASP.NET 5 and Visual Studio 2015.

Tạo web đầu tiên

Từ Visual Studio Start page, chọn New Project.
../../_images/new_project.png
Chọn File > New > Project.
../../_images/alt_new_project.png
Tạo một New Project
  • chọn như hình dưới Web > ASP.NET Web Application > OK
../../_images/new_project2.png

../../_images/p3.png
Một web site đơn giản đã được tạo ra. Bạn bấm F5 để chạy web hoặc Ctl-F5 để chạy chế độ không debug
../../_images/12.png
  • Visual Studio sẽ khởi động IIS Express để chạu web của bạn.
  • Chạy ở chế độ không debug Ctrl+F5 cho phép bạn sửa code và lưu file khi trương trình đang chạy
../../_images/debug_menu.png
  • Bạn có thể chạy chế độ debug bằng cách clck nút IIS Express
../../_images/iis_express.png
Và ta đã có giao diện web thân thiện với Mobile
../../_images/2.png
Cảm ơn bạn đã theo dõi. Bài sau tôi sẽ đi sâu hơn vào code.

[MVC 6 vNext] - Top 10 thay đổi lớn của ASP.NET 5 và MVC 6

1. ASP.NET on OSX and Linux

Linux and OSX
ASP.NET 5 ứng dụng có thể chạy trên Windows , OSX và Linux. ASP.NET 5 to run on Windows, OSX, and Linux changes everything. Giờ đây các lập trình viên có thể sử dụng trình soạn thảo riền của mình như Sublime Text và WebStorm  khi viết ứng dụng  ASP.NET apps mà không cần  Visual Studio .

2. Chính thức chia tay Web Forms
ASP.NET Unleashed
Với những lập trình viên kỳ cựu vẫn còn tiếc nuối hàng trăm thậm trí hàng ngàn giờ làm trang web của mình mà vẫn chưa muốn nâng lên nền tảng mới thì đây chính là thời điểm bạn nên quết định
Bạn có thể xây dựng Web Forms trên Visual Studio 2015 với nền .NET 4.6 . Tuy nhiên Web Forms không thể có được sự uyển chuyển và rất nhiều thứ tuyệt vời của ASP.NET 5 .

3. Không còn Visual Basic
Visual Basic
Đây cũng là thời điểm nói lời tạm biệt với Visual Basic. ASP.NET 5 chỉ hỗ trợ duy nhất C# và Visual Basic đã bị bỏ lại phía sau. Thật sự là tin không vui cho các lập trình viên sử dụng VB

4. Tag Helpers Tag Helper là một trong những điểm nổi bật, nó có tác động mạnh đến cách mà bạn tạo ra những cái view trong một ứng dụng ASP.NET MVC. Tag Helper là một sự lựa chọn tốt hơn so với việc sử dụng MVC helper truyền thống trước đây.

Xem xét view MVC dưới đây nó chứa đựng một cái form cho việc tạo một sản phẩm mới:
  1. @model MyProject.Models.Product
  2. @using (Html.BeginForm())
  3. {
  4.   <div>
  5.       @Html.LabelFor(m => p.Name, "Name:")
  6.       @Html.TextBoxFor(m => p.Name)
  7.   </div>
  8.   <input type="submit" value="Create" />
  9. }
Trong view ở bên trên, Html.BeginForm(), Html.LabelFor() và Html.TextBoxFor() helper đã được dùng để tạo ra một cái form. Nhưng những thẻ helper này sẽ không thân thiện với những nhà thiết kế HTML.
Còn đây cũng là một form tương tự nhưng lại được tạo ra bằng việc sử dụng Tag Helpers:
  1. @model MyProject.Models.Product
  2. @addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"
  3. <form asp-controller="Products" asp-action="Create" method="post">
  4.   <div>
  5.       <label asp-for="Name">Name:</label>
  6.       <input asp-for="Name" />
  7.   </div>
  8.   <input type="submit" value="Save" />
  9. </form>
Chú ý rằng ở phiên bản mới này form chỉ chứa đựng duy nhât (những gì giống như) là những phần tử HTML. Cho ví dụ, form này chứa đựng một phần tử INPUT thay thế cho Html.TextBoxFor(). Một nhà thiết kế front-end sẽ làm việc tốt hơn với những trang như thế này.
Điều đặc biệt duy nhất về cái view này đó là thuộc tính asp-for. Những thuộc tính này được sử dụng dành cho những phần tử có chức năng từ phía server-side của ASP.NET MVC.
Bạn có thể xem qua ví dụ của Damien Edwards về việc sử dụng Tag Helpers ở link bên dưới:
5. View Components
Tạm biệt subcontrollers và xin chào View Components!
Trong những phiên bản trước đây của ASP.NET MVC, bạn đã sử dụng Html.Action() để gọi đến một cái subcontroller. Ví dụ bạn tưởng tượng bạn muốn hiển thị một banner quảng cáo trên nhiều view. Trong trường hợp đó, bạn sẽ tạo subcontroller cái mà chứa những xử lý logic cho việc trả về một banner quảng cáo cụ thể và gọi đến subcontroller bằng cách thông qua Html.Action() từ một cái view nào đó.
Subcontroller – Html.Action() không có trong bản beta hiện tại của MVC 6. Thay vào đó MVC 6 sẽ thay đổi bằng công nghệ khác được gọi là View Components.
Ví dụ bên dưới cho bạn thấy việc tạo một View Component để hiển thị một hoặc hai banner quảng cáo phụ thuộc vào thời gian trong ngày.
  1. using Microsoft.AspNet.Mvc;
  2. using System;
  3. namespace Partials.Components
  4. {
  5.   public class BannerAd : ViewComponent
  6.   {
  7.       public IViewComponentResult Invoke()
  8.       {
  9.           var adText = "Buy more coffee!";
  10.           if (DateTime.Now.Hour > 18)
  11.           {
  12.               adText = "Buy more warm milk!";
  13.           }
  14.           return View("_Advertisement", adText);
  15.       }
  16.   }
  17. }
Nếu thời gian mà trước 5:00 chiều thì View Compenent trả về một partial tên là _Advertisement với nội dung quảng cáo là “Buy more coffee!”. Nếu mà sau 5:00 chiều thì nội dung quảng cáo sẽ thay đổi là “Buy more warm milk!”.
Partial _Advertisement sẽ trong như sau:
  1. @model string
  2. <div style="border:2px solid green;padding:15px">
  3.   @Model
  4. </div>
Cuối cùng bạn có thể sử dụng BannerAd View Component trong view MVC như sau:
  1. @Component.Invoke("BannerAd")
View Component tương như như là subcontroller. Tuy nhiên, subcontroller luôn có gì đó hơi kỳ quặc. Nhìn thì có vẻ chúng tương tự với action của Controller nhưng thực tế nó không phải như vậy. Gọi là View Component dường như có vẻ chính xác hơn và tự nhiên hơn.

6. Hỗ trợ GruntJS, NPM và Bower
Phát triển font-end sẽ nhận được nhiều yêu mến trong ASP.NET 5 thông qua việc hỗ trợ cho GruntJS. (và cuối cùng là Glup).
GruntJS là một task runner nó cho phép bạn xây dựng ngồn front-end như là JavaScript và file CSS. Ví dụ, bạn có thể sử dụng GruntJS để kết nối vào nhau thành một và làm nhỏ đi file JavaScript của bạn, bất kỳ khi nào mà bạn thực hiện việc build trong Visual Studio.
Có hàng ngàn plugin của GruntJS cho phép bạn làm nhiều điều tuyệt vời bằng những task khác nhau (hiện tại có 4,334 plugin được liệt kê ra trong repository của GruntJS plugin):
Ví dụ, có nhiều plugin cho việc chạy unit test của JavaScript, kiểm tra chất lượng mã JavaScript của bạn (jshint), biên dịch những file LESS và Sass thành CSS, biên dịch TypeScript thành JavaScript, và giảm bớt hình ảnh.
Để hỗ trợ GruntJS, Microsoft cần hỗ trợ hai bộ quản lý package mới (ngoài Nuget). Đầu tiền, plugin GruntJS được phân phối như là NPM packages, Microsoft đã thêm những hỗ trợ cho NPM package.
Thứ hai, bởi vì có nhiều nguồn client-side như là Twitter Bootstrap, JQuery, Polymer và AngularJS đã được phân phối thông qua Bower nên Microsoft đã thêm vào việc hỗ trợ cho Bower.
Điều này có nghĩa là bạn có thể chạy GruntJS sử dụng plugin từ NPM và client resource từ Bower.

7. Hợp nhất MVC và Web API Controllers
Trong những phiên bản trước của ASP.NET MVC, controller của MVC khác biệt so với controller của Web API. Một controller của MVC được sử dụng bởi lớp cơ sở System.Web.MVC.Controller và một controller của Web API được sử dụng bởi lớp cơ sở System.Web.Http.ApiController.
Trong MVC 6, chỉ có duy nhất một và chỉ một lớp controller là lớp cơ sở cho cả hai MVC và Web API controller. Lớp duy nhất đó là Microsoft.AspNet.Mvc.Controller.
Controller trong MVC 6 trả về một IActionResult. Khi sử dụng như một controller của MVC, IActionResult có thể là một view. Khi sử dụng như là một controller của Web API, IActionResult có thể là dữ liệu (như là một danh sách các sản phẩm). Controller giống nhau có thể có những action trả về cả hai view và data.
Trong MVC 6, cả hai controller của MVC và controller của Web API sử dụng cùng một route giống nhau. Bạn có thể sử dụng cả hai, đó là convention-based route hoặc thuộc tính route và chúng ứng dụng đến tất cả những controller trong project.

8. AngularJS
AngularJS là một trong những framework client-side phổ biến nhất cho việc xây dựng Single Page Applications (SPAs). Visual Studio 2015 đã bao gồm những template phục vụ cho việc tạo module, controller, directive và factory của AngularJS.
null
Việc hỗ trợ GruntJS trong ASP.NET 5 làm cho ASP.NET là một framework server-side xuất sắc cho việc xây dựng những ứng dụng client-side bằng AngularJS. Bạn có thể kết hợp và giảm bớt những cái file của AngularJS một cách tự động bất kỳ khi nào bạn thực hiện việc build. Bạn có thể tương tác với một controller của MVC 6 từ một $resource của AngularJS sử dụng REST.

9. ASP.NET Dependency Injection Framework
ASP.NET 5 đã được xây dựng để hỗ trợ cho việc Dependency Injection và Service Locator pattern. Điều này có nghĩa là bạn không còn cần dựa vào những framework bên thứ ba như là Ninject hoặc Autofac.
Tưởng tượng, ở ví dụ này bạn tạo một lớp interface IRepository và một lớp EFRepository sẽ implement từ lớp interface. Trong trường hợp này, bạn có thể liên kết lớp EFRepository đến lớp IRepository trong phương thức ConfigureService() được viết trong lớp Startup.cs như thế này:
  1. services.AddTransient<IRepository, EFRepository>();
Sau đó bạn liên kết EFRepository và IRepository khi ấy bạn có thể sử dụng hàm khởi tạo denpendency injection trong những controller MVC của bạn (và bất kỳ lớp nào khác) sử dụng đoạn mã sau:
  1. public class ProductsController : Controller
  2. {
  3.   private IRepository _repo;
  4.   public ProductsController(IRepository repo)
  5.   {
  6.       _repo = repo;
  7.   }
  8. }
Trong đoạn mã trên, interface IRepository đã truyền đến hàm khởi tạo của ProductsController. Việc xây dựng ASP.NET Dependency Injection framework để mà truyền EFRepository đến ProductsController bởi vì IRepository đã liên kết đến EFRepository.
Bạn cũng có thể sử dụng Service Locator pattern. Bất kỳ nơi nào bạn có thể truy cập HttpContext, bạn có thể truy cập đến bất kỳ servicer nào đã được đăng ký. Ví dụ, bạn có thể nhận lại EFRepository bằng cách sử dụng đoạn mã bên dưới vào bên trong một MVC controller action:
  1. var repo = this.Context.ApplicationServices.GetRequiredService<IRepository>();


10. xUnit.net
Tạm biệt framework Visual Studio Unit Testing và xin chào xUnit.net!
Trong những phiên bản trước của ASP.NET MVC, mặc định framework về testing là Visual Studio Unit Testing Framework (đôi khi nó được gọi là mstest). Framework này sử dụng những thuộc tính là [TestClass] và [TestMethod] để mô tả một unit test:
  1. [TestClass]
  2. public class CalculatorTests {
  3.   [TestMethod]
  4.   public void TestAddNumbers() {
  5.       // Arrange
  6.       var calc = new Calculator();
  7.       // Act
  8.       var result = calc.AddNumbers(0, 0);
  9.       // Assert
  10.       Assert.AreEqual(0, result);
  11.   }
  12. }
ASP.NET 5 sử dụng xUnit.net như là một framework unit test giành cho nó. Framewrok này sử dụng thuộc tính [Fact] thay cho thuộc tính [TestMethod] và không còn thuộc tính [TestClass] nữa:
  1. public class CalculatorTests
  2. {
  3.   [Fact]
  4.   public void AddNumbers()
  5.   {
  6.       // Arrange
  7.       var calculator = new Calculator();
  8.       // Act
  9.       var result = calculator.AddNumbers(1, 1);
  10.       // Assert
  11.       Assert.Equal(result, 13);
  12.   }
  13. }
Nếu bạn nhìn vào mã nguồn cho ASP.NET 5 khi ấy bạn sẽ thấy rằng xUnit.net đã sử dụng để kiểm tra ASP.NET bao quát. Ví dụ về repository MVC chứa đựng unit test được viết bởi xUnit.net. Bạn có thể tìm thấy tại repository MVC (và unit test của nó) ở đây:
ASP.NET sử dụng một phân nhánh của xUnit.net đặt ở đây: