Razor syntax

Syntax/Sample Razor Web Forms Equivalent (or remarks)
Code Block
@{ 
  int x = 123; 
  string y = "because.";
}
<%
  int x = 123; 
  string y = "because."; 
%>
Expression (Html Encoded)
<span>@model.Message</span>
<span><%: model.Message %></span>
Expression (Unencoded)
<span>
@Html.Raw(model.Message)
</span>
<span><%= model.Message %></span>
Combining Text and markup
@foreach(var item in items) {
  <span>@item.Prop</span> 
}
<% foreach(var item in items) { %>
  <span><%: item.Prop %></span>
<% } %>
Mixing code and Plain text
@if (foo) {
  <text>Plain Text</text> 
}
<% if (foo) { %> 
  Plain Text 
<% } %>
Using block
@using (Html.BeginForm()) {
  <input type="text" value="input here">
}
<% using (Html.BeginForm()) { %>
  <input type="text" value="input here">
<% } %>
Mixing code and plain text (alternate)
@if (foo) {
  @:Plain Text is @bar
}
Same as above
Email Addresses
Hi philha@example.com
Razor recognizes basic email format and is smart enough not to treat the @ as a code delimiter
Explicit Expression
<span>ISBN@(isbnNumber)</span>
In this case, we need to be explicit about the expression by using parentheses.
Escaping the @ sign
<span>In Razor, you use the 
@@foo to display the value 
of foo</span>
@@ renders a single @ in the response.
Server side Comment
@*
This is a server side 
multiline comment 
*@
<%--
This is a server side 
multiline comment
--%>
Calling generic method
@(MyClass.MyMethod<AType>())
Use parentheses to be explicit about what the expression is.
Creating a Razor Delegate
@{
  Func<dynamic, object> b = 
   @<strong>@item</strong>;
}
@b("Bold this")
Generates a Func<T, HelperResult> that you can call from within Razor. See this blog post for more details.
Mixing expressions and text
Hello @title. @name.
Hello <%: title %>. <%: name %>.

Source: haacked.com

Advertisements

Shopping cart demo

Mã nguồn đính kèm là ví dụ về cách xây dựng Shopping cart trong ASP.NET MVC, bạn có thể tải mã nguồn đầy đủ ở link sau.

Ví dụ sử dụng csdl Northwind có thể download về từ site của Microsoft.

Code tham khảo ở HomeController.cs

public ActionResult Index()
{
Models.Northwind2Entities db = new Models.Northwind2Entities();
return View(db.Products.ToList());
}
public ActionResult AddToCart(int id, int quantity =1)
{
ShoppingCart cart = (ShoppingCart)Session[“cart”];
if (cart == null){
cart = new ShoppingCart();
}
cart.AddItem(id.ToString(), quantity, 300);
//Save cart
Session[“cart”] = cart;
return RedirectToAction(“YourCart”);
}
public ActionResult YourCart()
{
return View();
}
public ActionResult RemoveItem(int id)
{
ShoppingCart cart = (ShoppingCart)Session[“cart”];
if (cart == null){
cart = new ShoppingCart();
}
cart.RemoveItem(id.ToString());
return RedirectToAction(“YourCart”);
}

public ActionResult Checkout()
{
ShoppingCart cart = HttpContext.Session[“cart”] as ShoppingCart;
//Process your cart

//remove cart
HttpContext.Session.Clear();
return RedirectToAction(“Index”);
}

Code trong Home/Index view

 

idx

Home/Yourcart view

yc

ShoppingCart.cs class

public class ShoppingCart
 {
 // internal member variables
 private String user;
 private DataTable items;
 private Double total;

 // public properties
 public String UserID
 {
 get { return user; }
 set { user = value; }
 }
 public DataTable CartItems
 {
 get { return items; }
 set { items = value; }
 }
 public Double TotalValue
 {
 get { return total; }
 set { total = value; }
 }
 // default constructor
 public ShoppingCart()
 {
 // create an empty shopping cart
 user = String.Empty;
 // create an empty DataTable to hold the cart items
 items = new DataTable("Items");
 items.Columns.Add(new DataColumn("ProductID", Type.GetType("System.String")));
 items.Columns.Add(new DataColumn("Quantity", Type.GetType("System.Int32")));
 items.Columns.Add(new DataColumn("Price", Type.GetType("System.Double")));
 // set total value of the new cart to zero 
 total = 0;
 }
 public void UpdateCart()
 {
 //Update cart code
 }
 public void RemoveItem(string productID)
 {
 DataRow[] rows = items.Select("ProductID='" + productID + "'");
 if (rows.Length > 0)
 {
 items.Rows.Remove(rows[0]);
 }
 }
 // add an item to the cart
 public void AddItem(String proId, Int32 Qty, Double price)
 {
 if (!IsExistItem(proId))
 {
 // create new DataTable row and populate with values - Hàng mới
 DataRow row = items.NewRow();
 row["ProductID"] = proId;
 row["Quantity"] = Qty;
 row["Price"] = price;
 // add row to DataTable update total value
 items.Rows.Add(row);
 total += (Qty * price);
 }
 else
 {
 //tăng số lượng hàng trong giỏ hàng
 for (int i = 0; i < items.Rows.Count; i++)  {  if (items.Rows[i]["ProductID"].Equals(proId))  {  items.Rows[i]["Quantity"] = int.Parse(items.Rows[i]["Quantity"].ToString()) + Qty;  total += (Qty * price);  break;//Exit loop  }  }  }  }  public bool IsExistItem(string proID)  {  bool b = false;  if (items.Rows.Count > 0)
 {
 for (int i = 0; i < items.Rows.Count; i++)
 {
 if (items.Rows[i]["ProductID"].Equals(proID))
 {
 b = true;
 break;//exit loop
 }
 }
 }
 return b;
 }
 // empty the cart by clearing the DataTable
 public void Clear()
 {
 items.Rows.Clear();
 total = 0;
 }
 }

Bài 11 – Enforcing SSL in an ASP.NET Core app

Thiết lập: Require SSL

  • Bổ sung dòng mã dưới đây vào phương thức ConfigureServices trong lớpStartup.cs:
// Requires using Microsoft.AspNetCore.Mvc;
public void ConfigureServices(IServiceCollection services)
{
services.Configure<MvcOptions>(options =>
{
options.Filters.Add(new RequireHttpsAttribute());
});

}

  • Bổ sung đoạn mã sau vào phương thức Configure(…)

15

Lưu ý: phải cài gói sau trước khi sử dụng RewriteOptions()

Install-Package Microsoft.AspNetCore.Rewrite

Set up IIS Express for SSL/HTTPS

  • Trong cửa sổ Solution Explorer, click chuột phải trên Project và chọn Properties.
  • Trên pane bên trái, chọn Debug
  • Check Enable SSL
  • Copy đường dẫn SSL và dán vào ô text App URL

Bài 10 – using tag helpers in forms in ASP.NET Core

The Form Tag Helper

10

The Input Tag Helper

<input asp-for=“<Expression Name>” />

12

Expression names

13

The Textarea Tag Helper

14

The Label Tag Helper

<label asp-for=“Email”></label>

The Validation Tag Helpers

<span asp-validation-for=“Email”></span>

The Validation Summary Tag Helper

<div asp-validation-summary=“ModelOnly”></div>

The Select Tag Helper

<select asp-for=“Country” asp-items=“Model.Countries”></select>

 

Bài 9 – Migrations – EF Core with ASP.NET Core MVC

Bài 8 – Validation
Bài 7 – Bổ sung chức năng tìm kiếm
Bài 6 – Add a new field and update database
Bài 5 – SQL Server LocalDB
Bài 4 – Add a model
Bài 3 – Add a view
Bài 2 – Add Controllers
Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1

Điểm mới trong Migrations EF Core là không xóa và tạo mới cơ sở dữ liệu mỗi khi thay đổi Model classes mà cho phép cập nhật các bảng trong cơ sở dữ liệu để giữ nguyên những dữ liệu đã nhập trước đây.

Bài này hướng dẫn sử dụng Migrations bằng Command-line interface (CLI)

  • Click chuột phải trên Project > sau đó chọn Edit Tên_dự_án.csproj.
  • Bổ sung dòng thứ 2 sau đây vào file .csproj
<ItemGroup>
<DotNetCliToolReference Include=”Microsoft.VisualStudio.Web.CodeGeneration.Tools” Version=”1.0.0″ />
<DotNetCliToolReference Include=”Microsoft.EntityFrameworkCore.Tools.DotNet” Version=”1.0.0″ />
</ItemGroup>
  • Thay đổi thông tin cơ sở dữ liệu ở connection string trong file appsettings.json
{
“Logging”: {
“IncludeScopes”: false,
“LogLevel”: {
“Default”: “Warning”
}
},
“ConnectionStrings”: {
“MvcMovieContext”: “Server=(localdb)\\mssqllocaldb;Database=MvcMovieContext;Trusted_Connection=True;MultipleActiveResultSets=true”
}
}
  • Create an initial migration

  • Gõ lệnh CMD từ cửa sổ File Explorer

  • Gõ 2 dòng sau từ cửa sổ Console

dotnet ef migrations add InitialCreate

/* sau từ khóa add là tên của migration file, bạn có thể đặt bất kỳ tên gì. Khuyến nghị nên đặt tên gợi nhớ, gợi nghĩa*/

dotnet ef database update

/*Apply the migration to the database */

  • Kiểm tra sự cập nhật thay đổi bằng cách mở SQL Server Object Explorer, mở xem cấu trúc các bảng thay đổi

Bài 8 – Validation

Bài 7 – Bổ sung chức năng tìm kiếm
Bài 6 – Add a new field and update database
Bài 5 – SQL Server LocalDB
Bài 4 – Add a model
Bài 3 – Add a view
Bài 2 – Add Controllers
Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1

Keeping things DRY

ASP.NET MVC khuyến khích lập trình viên viết(cài đặt) chức năng chỉ một lần và áp dụng cho toàn ứng dụng. Điều này tối ưu được việc viết mã, giảm lỗi phát sinh, dễ dàng để test và cả việc bảo trì cũng dễ dàng thuận lợi.

Validation hỗ trợ bởi MVC và Entity Framework Core Code First là một tiêu biểu của nguyên tắc lập trình (không lặp lại mã) DRY. Lập trình viên chỉ cần chỉ ra các thiết lập VALIDATION ở một nơi ở MODEL Classes và sau đó các thiết lập này thiết lập ràng buộc cho toàn ứng dụng.

Adding validation rules to the movie model

Mở file Movie.cs và thiết lập các DataAnnotation sau để thiết lập các ràng buộc dữ liệu. Lưu ý: sử dụng namesapce System.ComponentModel.DataAnnotations;

8

Giải thích một số Annotations đã sử dụng cho thiết lập DATA VALIDATION

[StringLength(60, MinimumLength = 3)]
-> Thiết lập ràng buộc cho trường dữ liệu: tối thiểu nhập 3 và tối đa là 60 ký tự

[Required]
-> Yêu cầu phải nhập cho trường dữ liệu (không được để rỗng)

[Display(Name = “Release Date”)]
-> Đổi lại tên cột hiển thị của trường dữ liệu

[DataType(DataType.Date)]
-> Thiết lập kiểu dữ liệu của trường dữ liệu

[Range(1, 100)]
-> Giá trị của trường dữ liệu nằm trong khoảng (phạm vi) chỉ ra bởi Range

[RegularExpression(@”^[A-Z]+[a-zA-Z”-‘\s]*$”)]
-> Dùng RegularExpression để thiết lập ràng buộc dữ liệu theo mẫu (Pattern)

[DisplayFormat(DataFormatString = “{0:yyyy-MM-dd}”, ApplyFormatInEditMode = true)] public DateTime ReleaseDate { get; set; }
-> Định dạng dữ liệu hiển thị

9

Validation Error UI in MVC

  • Chạy ứng dụng và truy cập Movies Controller.
  • Click Create New để add thêm movie mới. Điền dữ liệu vào form với các giá trị không hợp lệ, ngay lập tức jQuery client phát hiện lỗi và hiển thị thông báo lỗi như hình sau:

Bài 7 – Bổ sung chức năng tìm kiếm

Bài 6 – Add a new field and update database

Bài 5 – SQL Server LocalDB

Bài 4 – Add a model

Bài 3 – Add a view

Bài 2 – Add Controllers

Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1

Bài này hướng dẫn bổ sung chức năng tìm kiếm cho form Index.cshtml

  • Thay đổi trong trang Index.cshtml, bổ sung form tìm kiếm

<p>
<a asp-action=”Create”>Create New</a>
</p>

5

  • Mở MoviesController.cs và thay đổi đoạn mã sau trong Index method

6

  • Nhấn Ctrl+F5 để chạy và kiểm tra kết quả như  màn hình sau

7