Type Here to Get Search Results !

Lập trình MVC với Razor view engine


Razor View Engine là 1 ngôn ngữ ngắn gọn, rỏ ràng và hữu ích, mà nó cho phép bạn tạo ra các giao diện cho ứng dụng ASP.NET MVC trong khi vẫn giữ được sự phân chia rỏ ràng, khả năng có thể kiểm tra, và sự phát triển dựa trên pattern. Các lập trình viên ASP.NET MVC đang tìm kiếm cho mình 1 ngôn ngữ có cú pháp rỏ ràng, ngắn gọn, và bây giờ nó đã được xây dựng sẳn (dĩ nhiên là có rất nhiều các View Engine của hãng thứ 3 khác) với ngôn ngữ quen thuộc là C#.

Razor View Engine được dùng để tạo ra các sites WebMatrix hoặc là các ứng dụng MVC, trong khi ASP.NET MVC cũng là 1 engine khác, bạn sẽ làm việc với 1 kiểu phát triển được gọi là “convention over configuration”  tạm dịch là “quy ước hơn là cấu hình”. Nghĩa là bạn sẽ phải đặt tên của files, models, views, controllers và các key elements ứng dụng khác hơn là lưu trữ rất nhiều các metadata mà chúng là những elements giống nhau trong tập tin cấu hình. Khi bạn sử dụng MVC trong Visual Studio 2010 nó sẽ được thiết lập để mà bạn sẽ khuyên là sự dụng “convention” đặt tên thay vì cấu hình, cái này sẽ trở thành hiển nhiên khi bạn làm việc với ứng dụng MVC.
Bắt đầu
Trước khi bắt đầu, chúng ta download 2 thứ sau đây:
 ASP.NET MVC 3
 Razor Syntax Highlighter Extension (không bắt buộc, nhưng rất có ít)
Bạn cũng có thể tìm thấy Razor Syntax Highlighter bằng cách chọn Extensions Manager từ menu Tools trong Visual Studio (VS). Sau khi hoàn tất quá trình cài đặt thì chúng ta sẽ thấy template project MVC3 trong VS. Template MVC 3 cho phép bạn tạo và sử dụng Web Form Vew engine hoặc Razor View Engine, trong khi MVC 2 chỉ support WebForm View Engine.

Khi tạo 1 ứng dụng MVC 3 thì 1 hộp thoại xuất hiện yêu cầu lựa chon kiểu, engine để render giao diện, và testing framework mà bạn muốn sử dụng. Bạn cũng nên tạo 1 test project để bạn có thể lập trình để test code của bạn. Hình bên dưới cho thấy việc tạo 1 dự án sử dụng template internet và sử dụng Razor để render View kèm theo là 1 VS unit project test. Internet template project là 1 project trong đó có sử dụng tính năng membership và security, nó cũng tạo các model, view, controller cần thiết cho việc đăng ký và đăng nhập user.
Kiểm tra các tập tin thư mục bao gồm 3 folders: View, Models và Controller, có cũng giống cấu trúc MVC 2, ngoài ra chúng cũng chứa những thư mục phụ cần thiết khác như: Content và App_Data, bởi vì dự án chúng ta sử dụng Razor View Engine, chúng ta sẽ thấy extension .cshtml mới, chúng ta là các trang giao diện được tạo sử dụng công nghệ Razor, nếu chúng ta chưa quen với cú pháp Razor, thì hãy tham khảo bài viết này hoặc tài liệu trực tuyến tạiđây.

Cách tốt nhất để làm việc với MVC trong VS thì chúng ta hãy bắt đầu với Model, sau đó tới Controller và cuối cùng là View.
Models:
Model là đại diện cho data store, nó cũng có thể là 1 lớp đơn giản, Entity Framework hoăc Linq2Sql, code model bên dưới bao gồm 2 lớp: Product và ProductModel. ProductModel trả về List của đối tượng Product thông qua thuộc tính đặt tên Products đại diện cho 1 hoặc nhiều product dưới CSDL. Đối tượng Product chứa các thuộc tính: ProductNumber, Name, Price.
using System.Collections.Generic;
namespace AdventureWorks.Models
{
    public class ProductModel
    {
        public List<Product> Products { get; set; }
        public ProductModel()
        {
            Products = new List<Product>();
            this.Products.Add(new Product("AB-00-J1" ,"Super Fast Bike" ,1000M));
            this.Products.Add(new Product("EE-9-OL"  ,"Durable Helmet"  ,123.45M));
            this.Products.Add(new Product("MMM99-54" ,"Soft Bike Seat"  ,34.99M));
        }
    }
 
    public class Product
    {
        public Product(string productNumber, string name, decimal price)
        {
            Name = name;
            Price = price;        
            ProductNumber=productNumber;
        }
        public string ProductNumber { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}
Model được xử lý từ View thông qua controller để mà View có thể render dữ liệu cho model. Model cũng được validate ra View thông qua metadata và code, bạn cũng có thể add model trong thư mục Models  hoặc bạn có thể tham chiếu 1 thư viện data model bên ngoài.
Controller
Controller là các đối tượng kế thừa từ lớp System.Web.Mvc.Controller mà nó match models với View. Trong lúc gửi request, hệ thống MVC routing sẽ quyết định phương thức controller nào sẽ dự dụng dựa trên routing code được thiết lập trong tập tin global.asax. Routing mặc định đã đáp ứng hết các loại routing mà bạn cần, tuy nhiên bạn cũng có thể thêm/xóa/sửa theo cách của bạn.

Với cách quy ước code controller sẽ được đặt vào thư mục Controllers, nó phải đúng với tên quy ước YOURMODELController ví dụ: ProductsControler, method Index trong controller cũng theo quy ước này, nó phải cùng tên với View không có phần mở rộng, bởi theo quy tắc đặt tên này 1 controller sẽ có thể có nhiều các actions mà sẽ cung cấp dữ liệu cho nhiều Views, làm cho code sẽ dàng viết, bảo trì và kiểm tra.
 namespace AdventureWorks.Controllers
{
    public class ProductsController : Controller
    {
        public ActionResult Index()
        {
            ProductModel p = new ProductModel();            
            return View(p.Products);
        }
    }
}

Bằng cách quan sát các mẫu mã trước đây và các điều ước mà nó sau, thì rõ ràng rằng phương pháp Chỉ số bản đồ cho các lần xem \ \ Sản phẩm \ Index.cshtml xem. Chỉ số () trả về kiểu của phương pháp là một ActionResult từ các tên miền không gian System.Web.Mvc . Có nhiều kết quả khác nhau mà bạn có thể sử dụng cho các kịch bản khác nhau nhưContentResult, FileResult, RedirectResult, ViewResult và những người khác tùy thuộc vào nhu cầu của bạn của xem

View

Lượt xem là một cơ chế để định dạng dữ liệu và đưa ra trong một trình duyệt từ mô hình, theo quy định của thuộc tính mô hình @ (hoặc @ thừa kế) ở trên cùng của khung nhìn. Views ASP.NET MVC với một trong hai ASPX hoặc Razor Xem động cơ sử dụng một cách dựa trên mã để làm cho trang hơn là dựa vào các điều khiển khai báo, mà tạo ra khớp nối chặt chẽ và rất khó để kiểm tra. Sử dụng các phương pháp sản xuất sạch hơn MVC tạo ra trong trình duyệt cũng như cú pháp sạch hơn và ngắn gọn trong các quan điểm là tốt. Lượt xem có nghĩa là để chỉ làm cho đánh dấu, mã số và dữ liệu, chúng tôi không có ý nghĩa như là một nơi để lưu trữ logic kinh doanh. Mô hình và tầng truy cập bằng mô hình, là những nơi thích hợp để lưu trữ logic kinh doanh. Quan điểm có thể có một số lượng nhỏ của logic xác nhận giao diện người dùng, như là một dòng đầu tiên của quốc phòng để vệ sinh đầu vào, ví dụ như, yêu cầu, regex và xác nhận phạm vi.
Để thêm một điểm để dự án của bạn, click phải vào điều khiển và chọn Thêm View.
Visual Studio sẽ cần một số thông tin về quan điểm, được cung cấp trong hộp thoại Xem:
  1. Xác định xem bạn muốn có một quan điểm mạnh mẽ, đánh máy hay không. Tạo ra một cái nhìn mạnh mẽ, đánh máy cho phép bạn tham khảo các cấu trúc dữ liệu cơ bản trong cú pháp object.property cổ điển.
  2. Xác định xem dữ liệu lớp. Danh sách thả xuống hiển thị các lớp học trong dự án là một phần của mô hình dữ liệu.
  3. Xác định động cơ xem. ASPX và Razor là những tùy chọn.
  4. Xác định nội dung xem. Lựa chọn được danh sách, chi tiết, chỉnh sửa.etc...Việc chọn tùy chọn này tạo ra. cshtml hoặc. aspx trang điểm cho rằng làm trang vẽ cho bạn.
Đây là những gì đã chọn các tùy chọn này sẽ sản xuất trong một lần xem trang có tên là Razor \ xem \ Sản phẩm \ Index.cshtml:
@model List<AdventureWorks.Models.Product>
@{
 View.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Indexh2>
<p>
@Html.ActionLink("Create New", "Create")
p>
<table>
 <tr>
 <th>Edit/Details/Delth>
 <th>Product Numberth>
 <th>Nameth>
 <th>Priceth>
 tr>
 
@foreach (var item in Model) {
 <tr>
 <td>
 @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
 @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
 @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
 td>
 <td>
 @item.ProductNumber
 td>
 <td>
 @item.Name
 td>
 <td>
 @String.Format("{0:F}", item.Price)
 td>
tr>
}
table>
Kể từ khi xem là mạnh mẽ gõ, cấu trúc dữ liệu có thể được truy cập vì nó là -. Một đối tượng với tài sản Đoạn mã trên vòng qua các mô hình và làm cho một cho mỗi thực thể mô hình tổ chức cùng với thẻ và thực tế dữ liệu trong chúng (ProductNumber, tên và giá). Kết quả là một danh sách đơn giản trong ba sản phẩm trong mô hình liên kết đi kèm với hành động.
Các nguồn HTML cho thấy một bàn, làm sạch chính xác trả lại cho trình duyệt.

Tóm lại:
Việc render ra danh sách các sản phẩm rất dễ dàng với việc sử dụng MVC và Razor View Engine, cũng giống như việc cập nhật và thao tác với dữ liệu. Nếu bạn muốn tìm hiểu sâu hơn về MCV với Razor trong các chủ đề tiếp theo, bạn cũng sẽ được biết về Jquery và Html validation helper và validation cho model sử dụng data annotations. MVC web site có rất nhiều ví dụ và bài viết về MVC.

Mặc dù có rất nhiều ví dụ về MVC mà sử dụng aspx/web form làm view engine, nó rất dễ dàng so sánh và chuyển đổi sang các trang razor, cho nên nó cũng là 1 cách để học cả 2 công  nghệ MVC với Razor và aspx engine.