Sử dụng HTML Encoding trong ASP.NET MVC3

Mục tiêu của bài viết này là tôi sẽ nói về phương thức Raw của ASP.NET MVC3 nhằm định dạng các kiểu cho một ứng dụng website cụ thể nào đó.

Để biết cách tạo một ứng dụng ASP.NET MVC3, xin các bạn xem bài viết để hiểu rõ hơn, ở đây tôi sẽ không quay lại cách tạo ứng dụng ASP.NET MVC3

Bước 1: Tạo một Models có tên Product để định nghĩa các Properties như sau:

public class Products

    {       

            public int ProductId { get; set; }

            public string ProductName { get; set; }

            public string Description { get; set; }

     }

Bước 2: Vào trong HomeController, tôi khởi tạo dữ liệu cho Models Product. Đây là nơi chứa nguồn dữ liệu cho Product

public ActionResult Index()

        {

            IEnumerable<Products> product = new List<Products>() {

                new Products(){ProductId=1,ProductName="Laptop",Description="Chi tiet ve may tinh <b>Laptop</b>"},

                new Products(){ProductId=2,ProductName="PC",Description="Chi tiet ve may tinh PC"},

                new Products(){ProductId=3,ProductName="IPad",Description="Chi tiet ve may tinh <b>Tablet</b>"}               

            }.ToList(); 

            ViewBag.Message = "Welcome to ASP.NET MVC!"; 

            return View(product);

        }

Ở đây, các bạn nhìn thấy trường Description có các định dạng <b></b> ở 3 Record của Product.

Chúng ta ngầm hiểu, khi hiển thị dữ liệu thì những định dạng <b></b> này sẽ in đậm.

Bước 3: Vào View/Home/Index.cshtml để viết mã lệnh nhằm hiển thị lên Browser như sau

@model IEnumerable<HTMLEncoding.Models.Products>

@{

    ViewBag.Title = "Home Page";

}

<h2>@ViewBag.Message</h2>

<p>

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>

<ul id="nav">

@foreach (var item in Model )

       {

        <li style="float:left;width:10%;list-style:none;">@item.ProductId</li>

        <li style="float:left;width:30%;list-style:none;">@item.ProductName</li>

        <li style="float:left;width:60%;list-style:none;">@item.Description</li>

        <li style="clear:both;list-style:none;"></li>

    }

</ul>

Bước 4: Nhấn F5 để kiểm tra ứng dụng website, thì các bạn sẽ thấy phần Description không định dạng được, xem hình bên dưới

Bước 5: Vào View/Home/Index.cshtml sửa phần @item.Description thành @Html.Raw(item.Description)

Bước 6: Nhấn F5 một lần nữa để kiểm tra, xem hình bên dưới