Blog

Trong các bài viết trước về ASP.NET MVC thiết kế website chuyên nghiệp OTVINA đã cùng các bạn tìm hiểu về ASP.NET Framework và cách tạo controller, trong bài viết này thiết kế website tin tức OTVINA sẽ cùng các bạn chuyển sang phần Tạo và tùy chỉnh một view.

Nếu bạn lần đầu tiên tìm hiểu về ASP.NET MVC bạn có thể đọc các bài viết sau:

Sau khi tạo ra một controller trong ví dụ ở bài trước thì nội dung của controller như sau

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace NewProject.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/
 public String Index()
 {
 return "WelcomeOTVINA";
 }
 }
}

Sửa đổi Controller để tùy chỉnh một View trong file HomeController.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace NewProject.Controllers
{
 public class HomeController : Controller
 {

 public ViewResult Index()
 {
 return View();
 }
 }
}

Chạy lại chương trình ta có kết quả sau:

Tạo view trong ASP.NET MVC - Công ty thiết kế website chuyên nghiệp otvina

Các bạn có thể thấy chạy ứng dụng vào thời điểm này sẽ có lỗi như trên.Thông báo lỗi  này được đánh giá là hữu ích cho chúng ta. Đây không chỉ là lời giải thích rằng hệ thống của MVC không tìm thấy view cho các action method mà còn hiển thị cả các đường dẫn mà MVC tìm kiếm, view được liên kết với các method action thông qua quy ước đặt tên.

Method action ở đây là Index và Controller là Home, MVC đã cố gắng tìm file khác nhau trong thư mục View có cùng tên đó.  Vậy để khắc phục chúng ta phải tao ra một View.

Cách tạo: Right click vào phương thức Index trong giao diện code của file HomeController.cs và chọn Add  View từ menu pop-up.

Cách add view trong asp.net MCV - Thiết kế website chuyên ghiệp giá rẻ OTVINA.

Visual Studio sẽ hiển thị hộp thoại Add View, cho phép bạn thiết lập các nội dung ban đầu của file được tạo ra. Đặt View Name là Index ( Tên của action method mà View sẽ được liên kết – đây là quy ước của ASP.NET MVC), thiết lập dạng Template là Empty(without model), không check vào Create as partial view và Use a layout page. Cuối cùng bạn nhấp vào Add để tạo một file view hoàn toàn mới.

Tạo View trong ASP.NET MVC - Thiết kế website chuyên nghiệp OTVINA

IDE sẽ tạo ra một file có tên là Index.cshtml trong thư mục View/Home.  View này là mặc định của ASP.NET MVC, đây là một quy ước khác của MVC Framework, view sẽ được đặt trong thư mục Views, quản lý các thư mục tương ứng với tên của controller có liên quan.

Chú ý: Đuôi cshtml thể hiện view dạng C# được xử lý bởi Razor. Các phiên bản trước của MVC thì phụ thuộc vào nền tảng View ASPX, có đuôi dạng .aspx.

Code view mặc định khi chúng ta tạo ra là:

View trong ASP.NET MCV

Code view mặc định trong asp.net mvc- thiết kế website chuyên nghiệp OTVINA.

Visual Studio mở file Index.cshtml để chỉnh sửa. Bạn sẽ thấy rằng tập tin này chứa chủ yếu các thẻ HTML, các trường hợp ngoại lệ là phần trông thế này:

@{
Layout = null;
}

Đây là một biểu thức có trong Razor, xử lý nội dung của view và tạo ra HTML để gửi tới trình duyệt. Đây là môt biểu thức Razor đơn giản và nó thông báo với Razor rằng tôi đã không sử dụng Layout ( null). Razor được bỏ qua lúc này.

Bây giờ chúng ta sẽ cùng các bạn thử chỉnh sửa một chút trong file Index.cshtml.

Chỉnh sửa view trong ASP.NET MVC - Thiết kế website chuyên nghiệp OTVINA

Trong thẻ div chúng ta chèn vào đoạn text là thiet ke website chuyen nghiep OTVINA. Chạy lại chương trình sẽ có kết quả như sau:

Hiển thị nội dung - thiết kế website chuyên nghiệp OTVINA

Khi lần đầu tiên tôi sửa các phương thức Index, nó trả về một giá trị chuỗi, điều này có nghĩa rằng MVC đã không làm gì ngoại trừ gán giá trị chuỗi vào trình duyệt. Bây giờ là phương thức Index trả về một ViewResult, MVC Framework trả lại các mã HTML do view đó tạo ra. Chúng ta sẽ tìm hiểu kỹ hơn về vấn đề này ở loạt bài về các bộ điều khiển và hành động.

Dịch vụ thiet ke website gia re hi vọng bài viết này bổ ích cho các bạn đang tìm hiểu về ASP.NET MVC Framework.

Cảm ơn và trân trọng.