Aspx.net / MVC, Thiết kế website — August 2, 2016 at 3:27 am

Xây dựng web tin tức bằng MVC – Phần II Khởi tạo ứng dụng

by

Sau khi các bạn đã đọc qua phần giới thiệu chắc các bạn cũng có thiểu phần nào về MVC. Hôm nay chúng ta sẽ đi vào phần khởi tạo ứng dụng trên MVC trên Visual studio 2012, bài viết hôm nay sẽ hướng dẫn cho các bạn khởi tạo một cách nhanh nhất một trang web tin tức cho các bạn nhé.

1. Khởi tạo ứng dụng bằng Visual Studio 2012

– Tạo mới ứng dụng web tin tức bằng Visual Studio (VS) 2012 từng bước theo hình dưới đây :

– Mở VS 2012 lên, vào File chọn New Project , chọn template là MVC 4 như hình sau :

khoi-tao-mvc
Mở VS 2012 lên, vào File chọn New Project

Hoặc có thể chọn tắt từ trang Start Page khi khởi động VS như hình sau :

khoi-tao-mvc-1
Start Page khi khởi động VS

– Chọn mẫu template MVC 4 và đặt tên project là NewsMvc ( có thể chọn nơi lưu Project tùy thích) , chọn phiên bản .net … như hình sau :

khoi-tao-mvc-2
Chọn mẫu template MVC 4 và đặt tên project là NewsMvc

Chọn kiểu mẫu MVC như hình sau :

2 Tạo NewsController để test ứng dụng

– Do ta tạo mẫu MVC basic thì VS chưa tạo sẵn HomeController , mặc định trong routed khai báo HomeController được gọi , có thể điều chỉnh routed trong file

– Điều chỉnh mã routed để chạy Action Index của NewsControllerr khi khởi động ứng dụng như sau :

App_Start/RouteConfig.cs

public class RouteConfig

{

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

 

routes.MapRoute(

name: “Default”,

url: “{controller}/{action}/{id}”,

defaults: new { controller = “News”, action = “Index”, id = UrlParameter.Optional }

);

}

}

 

– Tạo NewsController bằng cách chuột phải vào thư mục Controller chọn các thông số như hình vẽ :

khoi-tao-mvc-3

khoi-tao-mvc-4

NewsController tạo ra có code như sau :

 

public class NewsController : Controller

{

public ActionResult Index()

{

return View();

}

}

– VS tự động tạo sẵn Action Index trong NewsController

Tạo View Index

Chuột phải lên Action Index của HomeController chọn như hình vẽ

khoi-tao-mvc-5
Chuột phải lên Action Index của HomeController
khoi-tao-mvc-6
Bạn hãy nhớ kỹ làm đầy đủ các bước trên vòng đỏ mà hướng cho bạn

View Index ( View/Home/Index.cshtml) như sau :

@{

ViewBag.Title = “Index”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<h2>Index</h2>

Chạy ứng dụng :

khoi-tao-mvc-7
Đây là nút dùng để chạy ứng dụng trên chome

Ta được kết quả như hình sau :

khoi-tao-mvc-8
Vậy là bạn có thể hoàn thiện kết quả như hình

 

Như vậy là bạn có thể xong phần khởi tạo, tuy không có gì quá khó khăn đối với bạn nhưng bạn cũng nên luyện tập hằng ngày. Điều này sẽ giúp bạn tạo một thói quen tốt hơn trước khi bắt đầu học vào MVC xuyên suốt cũng như học lên cao hơn một cách dễ dàng. Chúc các bạn thành công nhé!

Nguồn: laptrinhvien.vn

Leave a Comment

Your email address will not be published. Required fields are marked *