Skip to content
Home » Mvc 5 Visual Studio 2015 | Create Your First App

Mvc 5 Visual Studio 2015 | Create Your First App

Getting Started with ASP NET MVC 5 |  Visual Studio 2015

Hướng dẫn tạo 1 project ASP.Net MVC, giải thích cấu trúc và vai trò của View, Controller

Đầu tiên các bạn mở Visual Studio lên, sau đó ngay tại thanh menu bạn chọn FILE >New >Project hoặc là cách đơn giản hơn là bạn nhấn tổ hợp phím tắt Ctrl + Shift + N

Sau khi bạn làm xong bước trên, chúng ta tiếp tục làm theo như hình nhé.

  • Sau khi bảng hội thoại hiện lên, bạn chọn Visual C# > Web > ASP.NET Web Application.
  • Tại ô (4) bên cạnh vị trí Name bạn đặt tên cho project.
  • Chọn Browse… để chọn nơi lưu project.
  • Cuối cùng bạn chọn OK.

Sau khi bạn nhấn OK ở bước trên thì sẽ có 1 bảng hội thoại xuất hiện các bạn làm theo hình nhé

  • Các bạn lưu ý trong phần Select a template có rất nhiều lựa chọn, tuy nhiên để học khóa học này các bạn chọn MVC nhé, sau đó chọn OK để kết thúc việc tạo project.

Sau khi hoàn thành việc tạo project, bây giờ chúng ta cùng đi phân tích cấu trúc của nó nhé.

  • Như hình mình show ra cho các bạn ở phía trên, vùng màu đỏ chính là Controller, vùng màu xanh là Models và vùng màu tím chính là Views trong mô hình MVC
  • Tương ứng với 1 controller thì sẽ có 1 view đi kèm theo, mặc định project khi tạo gồm có 2 controller đó là Account và Home vì vậy các bạn sẽ thấy có 2 folder đó là Account và Home trong phần View. Do ban đầu chúng ta chưa truy xuất cơ sở dữ liệu nên models mình sẽ chưa đề cập đến trong bài học ngày hôm nay.

Khi project được tạo ra thì chúng ta có thể chạy project lên brower, vậy để chạy được các bạn làm như sau:

  • Trên thanh menu bạn sẽ nhìn thấy nút mũi tên màu xanh, đây là nút giúp bạn Run project lên, tuy nhiên ban đầu nếu bạn nào thấy tại nút này không có hiển thị trình duyệt mặc định trong máy mình như cốc cốc, chrome, firefox … thì các bạn chọn Browse With..
  • Sau khi chọn, 1 hộp thoại hiện lên, đầu tiên các bạn chọn trình duyệt mà mình muốn sử dụng mặc định khi chạy project lên, sau đó các bạn chọn Set as Default, vậy là các bạn đã hoàn thành.
  • Để chạy project bạn click vào nút Run Project

Giao diện hiển thị khi chạy thành công như hình

Vậy có bạn nào tự hỏi là tại sao lại có màn hình này chạy lên khi chúng ta chạy project lên ban đầu không? Rất dễ hiểu các bạn ạ, các bạn cùng theo dõi giải thích phía dưới nhé

Để giải thích cho lý do mà mình nêu ra ở phần trên thì trước tiên các bạn vào mục Controller.

Sau đó các bạn chọn và mở HomeController lên thì sẽ thấy kết quả như hình dưới

Khi vào HomeController thì bạn sẽ thấy màn hình như phía trên. Các bạn để ý nhé, trong Controller có cung cấp 1 phương thức có tên gọi là ActionResult. Phương thức này trả về rất nhiều kiểu dữ liệu khác nhau, và trong trường hợp này các bạn thấy kiểu trả về là View().

  • View() là 1 trong các kiểu dữ liệu được trả về từ hàm ActionResult , trong khuôn khổ bài này mình sẽ không phân tích rõ về phương thức ActionResult mà sẽ có bài hướng dẫn rất rõ về nội dung này.
  • Kiểu trả về View() dùng để hiển thị giao diện mà mình muốn xuất ra cho người dùng khi ActionResult được gọi lên.

Ở phần trên mình có đề cập, 1 Controller sẽ có 1 View kèm theo, các bạn hãy xuống phần View mở folder đó ra.

Như các bạn thấy, trong HomeController bao gồm 3 ActionResult đó là About, Contact, Index. Mà cả 3 ActionResult này đều trả về kiểu dữ liệu là View() vì vậy trong folder home sẽ cũng có 3 View tương ứng cho 3 ActionResult đó.

Cụ thể khi ActionResult Index được gọi lên thì Index.cshtml sẽ được hiển thị, và 2 cái còn lại tượng tự như vậy. Bây giờ, bạn click vào Index.cshtml để xem nội dung của file này thì các bạn sẽ thấy nội dung của nó giống y chang nội dung được hiển thị khi chúng ta chạy project lên.

Nhìn vào hình vẽ thì các bạn cũng thấy giao diện đó chính là do file Index.cshtml hiển thị, có nghĩa là ActionResult Index được gọi lên ban đầu, vậy lại có 1 câu hỏi đặt ra là tại sao trong HomeController gồm có 3 ActionResult mà cái Index lại được mặc định chạy đầu tiên mà không phài là About hay Contact? Các bạn chú ý nhé!

  • Các bạn mở folder App_Start > mở file RouteConfig.
  • Như các bạn thấy, trong RouteConfig tại 2 vị trí mà mình trỏ mũi tên vào thì đó là nguyên nhân khi các bạn chạy project lên là ActionResult Index được hiển thị mà không phải là About hay Contact.
  • Controller được gọi lên là HomeController, trong đó ActionResult Index được thực thi. Các bạn có thể thay đổi Controller và Action nào mà các bạn muốn mặc định chạy lên ban đầu.
  • Qua những giải thích đó thì các bạn đã hiểu về View, Controller cũng như cách hoạt động của chúng rồi, vậy để xuất câu “Hello Howkteam” chúng ta sẽ đi qua phần thứ 2 nhé

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tạo 1 project ASP.Net MVC đơn giản và giải thích cấu trúc, vai trò của View, Controller trong mô hình MVC. dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Getting Started with ASP NET MVC 5 |  Visual Studio 2015
Getting Started with ASP NET MVC 5 | Visual Studio 2015

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Khóa học

Lập trình website với ASP.Net MVC cơ bản

Lập trình website với ASP.Net MVC cơ bản

Đánh giá

Bình luận

Dạ cho em hỏi ạ. Luyện tập thử thách không ngại khó là làm gì ạ?

Thanks Hkteam đã chia sẽ kiến thức mong hkteam ra thêm nhiều clip hay và thực tế

1. Giới thiệu ContrllerController là một trong các thành phần chính của chương trình được viết trên nền tảng công nghệ Asp.Net MVC. Controller trong kiến trúc MVC xử lý bất kỳ các yêu cầu nào từ URL. Hình vẽ dưới đây mô tả vai trò của Controller trong kiến trúc MVC.

Controller là một class, nó thừa kế từ lớp cơ sở System.Web.Mvc.Controller, Lớp Controller chứachứa một hay nhiều phương thức có phạm vi truy cập là public, các phương này này được gọi là các Action. Controller và các phương thức Action tiếp nhận các yêu cầu từ phía trình duyệt, truy vấn các thông tin cần thiết từ Model sau đó trả lại kết quả cho trình duyệt. Dữ liệu hiển thị sẽ được trình duyệt hiển thị, thông tin hiển thị sẽ được trình bày bởi View trong kiến trúc MVC.Trong Asp.Net MVC tất cả các class controller đều có hậu tố là từ “Controller”, ví dụ controller cho trang chủ có tên là “HomeController”, controller cho sản phẩm (Product) có tên là ProductController, ngoài ra tất cả các controller bắt buộc phải nằm trong thư mục Controller trong ứng dụng Asp.Net MVC.2. Thêm mới Controller.Bước 1 : Tạo ứng dụng asp.net mvc, sau đó chọn template ứng dụng Asp.Net MVC là Empty.Bước 2 : Trong thư mục Project của ứng dụng, Click phải vào thư mục Controller, -> Chọn Add-> Click vào Controller.Bước 3 : Khi của số Add Scaffold hiện ra chọn các mẫu Template phù hợp, ở đây chúng ta chọn MVC 5 Controller – Empty.

Bước 4 : Cập nhật tên Controller trong cửa sổ hiển thị sau .

Bước 5 : Kết thúc quá trình tạo, khi đó lớp HomeController sẽ tạo thành công trong thưc mục Controller của ứng dụng, hình ảnh mô tả lớp HomeController.

Trong hình trên, lớp HomeController được thừa kế từ lớp Controller, tất cả các lớp Controller trong Asp.net MVC đều được thừa kế từ lớp trừu tượng Controller, đây chính là lớp cơ sở của Controller.Để không phải tạo View, chúng ta chỉnh sửa phương thức Index, thay vì trả về ActionResult thì thì phương thức này trả về string.

Thực hiện chạy chương trình. Kết quả sẽ hiển thị như sau:

3. Phương thức Action3.1 Tổng quát về phương thức ActionTất cả các phương thức public trong class Control đều gọi là phương thức Action. Các phương thức Action giống như các phương thức khác trong class tuy nhiên nó có các rằng buộc sau :

  • Các phương thức Action bắt buộc phải thiết lập phạm vi truy cập public. Không được thiết lập phạm vi truy cập là private và protected.
  • Các phương thức Action không được overloaded.
  • Các phương thức Action không được thiết lập static.

Ví dụ minh họa phương thức Index trong HomeController.

Trong hình số 7, Phương thức Action Index() có :

  • Phạm vi truy cập là public
  • Giá trị trả về là ActionResult sử dụng phương thức View().
  • Phương thức View được định nghĩa trong lớp cơ sở Controller.

Cú pháp thông dụng của phương thức trong lớp Controller :Cú pháp:

public ActionResult

()

/*Code to execute logic and return the result as

ActionResult*/

Mô tả:


  • : Tên của phương thức

3.2. Phương thức mặc địnhTất cả các controller đều có phương thức action mặc định đó là phương thức Index. Khi tạo ứng dụng bộ điều hướng sẽ mặc định được tạo cùng với HomeController và phương thức Action Index().

3.3. ActionResultTrong ứng dụng Asp.Net MVC, các phương thức Action thường trả lại kết quả, kết quả này được gọi là kết quả của action. ActionResult là một lớp cơ sở cho tất cả các lớp lưu trữ kiểu dữ liệu trả về của các phương thức action thực thi. Ví dụ như ViewResult là lớp được thừa kế từ lớp ActionResult, khi phương thức Action trả về dữ liệu có kiểu ViewResult, có nghĩa dữ liệu trả về của phương thức Action này sẽ được Render ra HTML tại tầng View.Bảng dưới dây mô tả các kết quả trả về của phương thức Action có thể thực thi.

3.4. Gọi phương thức ActionTrong Asp.Net MVC, một controller có thể có nhiều phương thức Action. Chúng ta có thể gọi phương thức Action thông qua địa chỉ URL trên trình duyệt thông qua tên controller và tên phương thức.Cú pháp :

  • http://

    /

Mô tả :


  • , Tên domain của ứng dụng

  • , Tên controller của ứng dụng, chú ý tên controller không chứa hậu tố Controller.

  • , Tên phương thức Action của ứng dụng

Ví dụ : Khi gọi phương thức ProductList trong HomeController của ứng dụng với tên domain mvclab2.com thì chúng ta sẽ nhập địa chỉ URL sau vào trình duyệt web.http:// mvclab2.com/Home/ ProductList

Khi URL này được yêu cầu, MVC Framework sẽ thực thi theo thứ tự như sau :

  1. Tìm kiếm lớp HomeController .
  2. Tìm kiếm phương thức ProductList trong lớp Home controller.
  3. Thực thi phương thức ProductList
  4. Trả về kết quả cho trình duyệt.

4. Ví dụ minh họa Viết ứng dụng Asp.Net MVC, hiển thị danh sách sản phẩm, thông tin bản phẩm bao gồm:

  • Mã sản phẩm – ProductID, kiểu nguyên
  • Tên sản phẩm – ProductName, kiểu chuỗi.
  • Giá sản phẩm – Price, kiểu số thực
  • Mô tả sản phẩm – Description, kiểu chuỗi

Trong quá trình tạo ví dụ minh họa, tôi sử dụng một phần của Parttern Repository để thực hiện. Cụ thể thế nào là thiết kế mẫu phát triển Repository thì tôi sẽ đề cập chi tiết ở một bài viết riêng biệt về thiết kế mẫu phát triển này.Chúng ta thực hiện ví dụ qua các bước sau :Bước 1 : Tạo ứng dụng Asp.Net, sau đó chọn Template ứng dụng là Empty Project.Bước 2 : Tạo lớp Product trong thư mục Model, lớp Product chứa cac thông tin thuộc tính của lớp sản phẩm, thông tin này bao gồm : Mã sản phẩm, tên sản phẩm, giá sản phẩm và mô tả sản phẩm.

Bước 3 : Tạo thư mục Abstract trong ứng dụng, sau đó bổ sung Interface (IproductRepository) có chứa phương thức GetAllProduct(), phương thức này trả về danh sách thông tin sản phẩm.

Bước 4 : Tạo lớp ProductRepository, mục tiêu của lớp này nhằm thực thi Interface IproductRepository. Để tạo lớp này, đầu tiên chúng ta tạo thư mục Concrete trong ứng dụng, sau đó tạo lớp ProductRepository với nội dung như sau :

Bước 5: Tạo controller Product, bao gồm các Data member và phương thức Action như sau :

  • Khai báo biến ProductList thể hiện của Interface IProductRepository
  • Phương thức Action là AllProductList có kiểu trả về là ViewResult, chứa nội dung danh sách sản phẩm.

Nội dung cụ thể của Controller Product như sau :

Bước 6 : Tạo View tương ứng với phương thức AllProductList bằng cách sau :

  • Click phải vào phương thức AllProductList trong ProductController, sau đó chọn Add View
  • Chọn Template của View là List, Model class là Product và Layout page.

Khi đó View sẽ được tạo trong thư mục View, chú ý tên View là AllProductList mặc định sẽ trùng với tên của phương thức.Nội dung View như sau :

Bước 7 : Bổ sung Route trong lớp RouteConfig trong thư mục App_Start của ứng dụng

Bước 8 : Kết quả chạy chương trình như sau :

Create your first app

On the Start page, select New Project. In the New project dialog box, select the Visual C# category on the left, then Web, and then select the ASP.NET Web Application (.NET Framework) project template. Name your project “MvcMovie” and then choose OK.

In the New ASP.NET Web Application dialog, choose MVC and then choose OK.

Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! This is a simple “Hello World!” project, and it’s a good place to start your application.

Press F5 to start debugging. When you press F5, Visual Studio starts IIS Express and runs your web app. Visual Studio then launches a browser and opens the application’s home page. Notice that the address bar of the browser says

localhost:port#

and not something like

example.com

. That’s because

localhost

always points to your own local computer, which in this case is running the application you just built. When Visual Studio runs a web project, a random port is used for the web server. In the image below, the port number is 1234. When you run the application, you’ll see a different port number.

Right out of the box this default template gives you

Home

,

Contact

, and

About

pages. The image below doesn’t show the Home, About, and Contact links. Depending on the size of your browser window, you might need to click the navigation icon to see these links.

The application also provides support to register and log in. The next step is to change how this application works and learn a little bit about ASP.NET MVC. Close the ASP.NET MVC application and let’s change some code.

For a list of current tutorials, see MVC recommended articles.

Introduction to ASP NET MVC 5 with C# and Visual Studio 2015
Introduction to ASP NET MVC 5 with C# and Visual Studio 2015

1. Tổng quan về ứng dụng webCác ứng dụng web là các chương trình thực thi trên máy chủ web (Web server) và truy cập và tương tác với người sử dụng thông qua trình duyệt web. Khái niệm này được người sử dụng thừa nhận rộng rãi, tuy nhiên ngày nay CNTT phát triển mạnh mẽ, một loạt các nền tảng công nghệ ra đời, ứng dụng web hoàn toàn có thể không cần phải tương tác hoặc thực thi trên máy chủ web, có nghĩa là ứng dụng web này chạy thuần túy trên trình duyệt duyệt web. Điều đó có nghĩa ứng dụng web không cần kết nối Internet vẫn có thể chạy được.Ứng dụng web cho phép người sử dụng có thể chia sẻ và truy cập thông tin thông qua Internet. Lập trình viên có thể tạo các ứng dụng web để phục vụ mục tiêu thương mại ví dụ như các website bán hàng trực tuyến …Ứng dụng web có thể được nhìn theo nhiều hướng khác nhau: Hướng nhìn của các nhà phát triển ứng dụng, thường chia ứng dụng web thành nhiều các phân tầng khác nhau, mỗi phân tầng đảm nhiệm một số các nhiệm vụ mang tính logic của ứng dụng. Hướng nhìn triển khai ứng dụng, thường phân chia ứng dụng thành các thành phần vật lý khác nhau, các thành phần vật lý này được cài đặt tại các máy tính (các nút mạng) khác nhau trong hệ thống.1.1. Phân tầng trong ứng dụng Web.Hướng tiếp cận này phân tách ứng dụng thành các thành phần mang tính logic. Đây là hướng nhìn của các nhà phát triển ứng dụng, thông thường ứng dụng web được phân chia thành các phân tầng sau :

  • Tầng trình diễn (Presentation Layer): Thành phần giao diện, là các form của chương trình tương tác với người sử dụng.
  • Tầng xử lý nghiệp vụ (Business Logic Layer): Xử lý các nghiệp vụ của chương trình như tính toán, xử lý hợp lệ và toàn vẹn về mặt dữ liệu.
  • Tầng dữ liệu (Data Layer): Lưu trữ, xử lý thông tin liên quan tới dữ liệu của chương trình. Thông thường tầng này bao gồm tầng giao tiếp với các hệ Quản trị CSDL và hệ Quản trị CSDL.

1.2. Kiến trúc ứng dụng webTheo hướng tiếp cận này, phân chia ứng dụng thành các thành phần vật lý. Đây là hướng nhìn triển khai ứng dụng, ứng dụng web thường được phân chia như sau :

  • Single-Tier : Tất cả các phân tầng (layer) của ứng dụng đều được tích hợp và cài đặt trên 1 máy tính.
  • Two-Tier : Theo kiến trúc này cả 3 tầng (layer) được phần bố cài đặt trên 2 tier đó là client và server, tầng trình diễn cài đặt trên client, 2 tầng (Tầng nghiệp vụ và tầng dữ liệu) cài đặt trên server.
  • Three-Tier : Theo kiến trúc này 3 tầng (layer) sẽ được cài đặt tại các máy tính khác nhau, mỗi layer sẽ giao tiếp với các layer khác nhằm đáp ứng các yêu cầu trao đổi thông tin giữa chúng thông qua cơ chế (Request/Response).
  • N-Tier : Đây là kiến trúc mở rộng của kiến trúc Tree-Tier, thay vì phân chia thành 3-tier thì chúng ta chia thành N-Tier; Tuy nhiên thông thường với các kiến trúc phức tại chỉ dừng lại ở mức độ 5-tier.

Chú ý : Layer khác hoàn toàn với Tier. Mọi người thường hay nhầm lẫn giữa chúng. Tier thường gắn liền với phần cứng (phân chia ứng dụng thành các thành phần vật lý khác nhau, khái niệm này gắn liền với mô hình Client/Server). Còn layer là các lớp cấu tạo nên một ứng dụng (Phân chia ứng dụng thành các thành phần Logic khác nhau). Layer gắn với mô hình phát triển còn Tier gắn với mô hình triển khai.2. Giới thiệu ASP.Net MVC2.1. Tổng quát Asp.Net MVCAsp.Net MVC là một Framework sử dụng .Net Framework cho việc phát triển ứng dụng web động, trước khi Asp.Net MVC ra đời, lập trình viên sử dụng công nghệ Asp.Net Web Form trên nền tảng .Net Framework để phát triển ứng dụng Web động.Asp.Net MVC phát triển trên mẫu thiết kế chuẩn MVC, cho phép người sử dụng phát triển các ứng dụng phần mềm. MVC là tên một mẫu phát triển ứng dụng, phương pháp này chia nhỏ một ứng dụng thành ba thành phần để cài đặt, mỗi thành phần đóng một vai trò khác nhau và ảnh hưởng lẫn nhau, đó là models, views, và controllers.Hình vẽ sau đây mô tả mô hình thiết kế MVC.

Các đặc trưng chính của Model, View và Controller trong mẫu thiết kế chuẩn MVC.

  • Models: Các đối tượng Models là một phần của ứng dụng, các đối tượng này thiết lập logic của phần dữ liệu của ứng dụng. Thông thường, các đối tượng model lấy và lưu trạng thái của model trong CSDL. Ví dụ như, một đối tượng Employee (nhân viên) sẽ lấy dữ liệu từ CSDL, thao tác trên dữ liệu và sẽ cập nhật dữ liệu trở lại vào bảng Eployees ở SQL Server. Trong các ứng dụng nhỏ, model thường là chỉ là một khái niệm nhằm phân biệt hơn là được cài đặt thực thụ, ví dụ, nếu ứng dụng chỉ đọc dữ liệu từ CSDL và gởi chúng đến view, ứng dụng khong cần phải có tầng model và các lớp lien quan. Trong trường hợp này, dữ liệu được lấy như là một đối tượng model (hơn là tầng model).

    Views: Views là các thành phần dùng để hiển thị giao diện người dùng (UI). Thông thường, view được tạo dựa vào thông tin dữ liệu model. Ví dụ như, view dùng để cập nhật bảng Employees sẽ hiển thị các hộp văn bản, drop-down list, và các check box dựa trên trạng thái hiện tại của một đối tượng Employee.

    Controllers: Controller là các thành phần dùng để quản lý tương tác người dùng, làm việc với model và chọn view để hiển thị giao diện người dùng. Trong một ứng dụng MVC, view chỉ được dùng để hiển thị thông tin, controller chịu trách nhiệm quản lý và đáp trả nội dung người dùng nhập và tương tác với người dùng. Ví dụ, controller sẽ quản lý các dữ liệu người dùng gởi lên (query-string values) và gởi các giá trị đó đến model, model sẽ lấy dữ liệu từ CSDL nhờ vào các giá trị này.

Ví dụ: sử dụng biểu đồ tuần tự để mô tả mô hình MVC.

2.2. Lợi ích khi xây dựng ứng dụng web dựa trên mô hình MVCNền tảng ASP.NET MVC mang lại những lợi ích sau:

  • Dễ dàng quản lý sự phức tạp của ứng dụng bằng cách chia ứng dụng thành ba thành phần model, view, controller
  • Hỗ trợ tốt hơn cho mô hình phát triển ứng dụng hướng kiểm thử (TDD)
  • Hỗ trợ tốt cho các ứng dụng được xây dựng bởi những đội có nhiều lập trình viên và thiết kế mà vẫn quản lý được tính năng của ứng dụng

2.3 Tính năng của ASP.Net MVC

  • Tách bạch các tác vụ của ứng dụng (logic nhập liệu, business logic, và logic giao diện), dễ dàng kiểm thử và mặc định áp dụng hướng phát triển TDD. Tất cả các tính năng chính của mô hình MVC được cài đặt dựa trên interface và được kiểm thử bằng cách sử dụng các đối tượng mocks, mock object là các đối tượng mô phỏng các tính năng của những đối tượng thực sự trong ứng dụng. Bạn có thể kiểm thử unit-test cho ứng dụng mà không cần chạy controller trong tiến trình ASP.NET, và điều đó giúp unit test được áp dụng nhanh chóng và tiện dụng. Bạn có thể sử dụng bất kỳ nền tảng unit-testing nào tương thích với nền tảng .NET.
  • MVC là một nền tảng khả mở rộng (extensible) & khả nhúng (pluggable). Các thành phần của ASP.NET MVC được thiết kể để chúng có thể được thay thế một cách dễ dàng hoặc dễ dàng tùy chỉnh. Bạn có thể nhúng thêm view engine, cơ chế định tuyến cho URL, cách kết xuất tham số của action-method và các thành phần khác. ASP.NET MVC cũng hỗ trợ việc sử dụng Dependency Injection (DI) và Inversion of Control (IoC). DI cho phép bạn gắn các đối tượng vào một lớp cho lớp đó sử dụng thay vì buộc lớp đó phải tự mình khởi tạo các đối tượng. IoC quy định rằng, nếu một đối tượng yêu cầu một đối tượng khác, đối tượng đầu sẽ lấy đối tượng thứ hai từ một nguồn bên ngoài, ví dụ như từ tập tin cấu hình. Và nhờ vậy, việc sử dụng DI và IoC sẽ giúp kiểm thử dễ dàng hơn.
  • ASP.NET MVC có thành phần ánh xạ URL mạnh mẽ cho phép bạn xây dựng những ứng dụng có các địa chỉ URL xúc tích và dễ tìm kiếm. Các địa chỉ URL không cần phải có phần mở rộng của tên tập tin và được thiết kế để hỗ trợ các mẫu định dạng tên phù hợp với việc tối ưu hóa tìm kiếm (URL) và phù hợp với lập địa chỉ theo kiểu REST..
  • Hỗ trợ các tính năng có sẵn của ASP.NET như cơ chế xác thực người dùng, quản lý thành viên, quyền, output caching và data caching, seession và profile, quản lý tình trạng ứng dụng, hệ thống cấu hình…
  • ASP.NET MVC sử dụng view engine Razor View Engine cho phép thiết lập các view nhanh chóng, dễ dàng và tốn ít công sức hơn so với việc sử dụng Web Forms view engine.

2.4. Lịch sử phát triển của Asp.Net MVCAsp.Net 1.0 : Phiên bản đầu tiên được phát hành vào tháng 3 năm 2009 trên nền tảng bộ .Net Framework 3.5 bộ Visual Studio 2008.Asp.Net 2.0 : Phiên bản này được phát hành vào tháng 3 năm 2010 trên bộ .Net Framework 3.5 và .Net Framework 4.0 bộ Visual Studio 2010.Asp.Net MVC 3 : Phiên bản này được phát hành vào tháng 1 năm 2011 trên nền tảng bộ .Net Framework 4.0, các đặc điểm chính của phiển bản này :

  • So với phiên bản ASP.NET MVC2 thì tính năng mới được hỗ trợ thêm HTML5 và CSS3; tính năng này chỉ hỗ trợ cho những trình duyệt mới;
  • Cải thiện về Model validation;
  • Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi ASP.NET MVC2 chỉ có ASPX;
  • Controller được cải tiến hơn như thuộc tính ViewBag và kiểu ActionResult;
  • Cải thiện Dependency Injection với IDpendencyResolver (có 2 phần: DependencyResolver và interface IDpendencyResolver)trong ASP.NET MVC3; đây là lớp thực thi mô hình Service Locator, cho phép framework gọi DIContainer khi cần làm việc với 1 lớp thực thi từ 1 kiểu cụ thể
  • Cách tiếp cận với JavaScript được hạn chế;
  • Hỗ trợ caching trong Partial page;

Asp.Net 4.0 : Phiên bản này được phát hành vào tháng 8 năm 2012 trên nền tảng bộ .Net Framework 4.0 và .Net Framework 4.5 trên phiên bản Visual Studio 2010 SP1 and Visual Studio 2012. Phiên bản này có các đặc điểm chính như sau :

  • ASP.NET Web API ra đời, nhằm đơn giản hoá việc lập trình với HTML hiện đại và đây là một cải tiến mới thay cho WCF Web API;
  • Mặc định của dự án được cải thiện hơn về hình thức bố trí, giúp dễ nhìn hơn;
  • Mẫu Empty Project là project trống, phù hợp cho những tín đồ developer muốn nâng cao khả năng lập trình với ASP.NET MVC4;
  • Giới thiệu jQuery Mobile, và mẫu Mobile Project cho dự án;
  • Hỗ trợ Asynchrnous Controller;
  • Kiểm soát Bundling và Minification thông qua web.config
  • Hỗ trợ cho việc đăng nhập OAuth và OpenID bằng cách sử dụng thư viện DotNetOpenAuth;
  • Phiên bản mới Windows Azure SDK 1.6 được phát hành;

Asp.Net MVC 5 : Phiên bản này được phát hành vào tháng 10 năm 2013 trên nền tảng bộ .Net Framework 4.5 và .Net Framework 4.5.1 trên phiên bản Visual Studio 2013. Các đặc điểm chính của phiên bản này như sau :

  • Với MVC5 thì cải tiến hơn so với ASP.NET MVC4, Bootstrap được thay thế mẫu MVC mặc định;
  • Chứng thực người dùng Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp;
  • Với Filter overrides, chúng ta có thể Filter override trên Method hoặc Controller;
  • Thuộc tính Routing được tích hợp vào MVC5;

3. Kiến trúc ứng dụng Asp.Net MVC3.1 Giao tiếp trong kiến trúc Asp.Net MVCCác thành phần cơ bản của ứng dụng Asp.Net MVC bao gồm :

  • MVC Framework
  • Route engine
  • Route configuration
  • Control
  • Model
  • View engine
  • View

Các thành phần này giao tiếp với nhau nhằm xử lý các yêu cầu của ứng dụng Asp.Net MVC. Quá trình xử lý yêu cầu thường liên quan tới một chuỗi các xử lý, mỗi xử lý sẽ được một component trong Asp.net đảm nhiệm.

  1. Trình duyệt gửi yêu cầu của ứng dụng Asp.Net MVC
  2. MVC Engine chuyển yêu cầu tới cho Routing engine (Bộ điều hướng)
  3. Routing engine kiểm tra cấu hình điều hướng (route configuration) của ứng dụng nhằm chuyển đến các controller phù hợp với yêu cầu.
  4. Khi Controller được tìm thấy, control này sẽ được thực thi
  5. Nếu Controller không được tìm thấy, bộ điều hướng sẽ chỉ ra rằng controller không được tìm thấy và MVC Engine sẽ thông báo lỗi cho trình duyệt.
  6. Controller giao tiếp với model, tầng Model đại diện cho các Entity bên trong hệ thống, Controller làm việc với tầng model để lấy thông tin cần cho người dùng.
  7. Controller yêu cầu View engine hiển thị thông tin dựa trên dữ liệu của tầng model
  8. View engine trả kết quả cho controller
  9. Controller gửi kết quả cho trình duyệt thông qua giao thức Http.

3.2. Các vấn đề cơ bản về Url và RoutingHầu hết các Web Framework như Asp.net Web Form, jsp … đều ánh xạ url vào 1 file được lưu trữ trên ổ đĩa.4.Tạo ứng dụng Asp.Net MVC trong Visual Studio 2015Bước 1 : Tạo Project và lựa chọn kiểu ứng dụng Asp.net MVC cần phát triển. Chọn New Project, Sau đó lựa chọn Visual C# phía bên trái, Sau đó chọn Web và lựa chọn ASP.NET Web Application. Đưa tên Ứng dúng Asp.Net MVC vào “MvcFirstApp”, chọn thư mục lưu trữ và click OK để chuyển sang màn hình khác.

Bước 2 : Lựa chọn cấu hình ứng dụng Asp.Net MVC, chúng ta chọn Empty cho ứng dụng đầu tiên này.

Sau đó chúng ta click OK để tạo Project

Bước 3 : Chạy chương trình sử dụng (F5 hoặc chọn Menu Debug/Start Debugging). Chúng ta sẽ nhìn thấy thông báo lỗi ở hình số 9, do đây là project rỗng, khi chạy chương trình:

  • Routing engine kiểm tra cấu hình điều hướng trong file RouteConfig nằm trong thưc mục App_Start của ứng dụng, chuyển đến các controller “Home” và action “Index” để thực thi
  • Do Home Controller và phương thức Index không được tìm thấy, bộ điều hướng sẽ chỉ ra rằng controller không được tìm thấy và MVC Engine sẽ thông báo lỗi cho trình duyệt.

Bước 4 : Thêm mới control Home và phương thức Index để thực hiện chương trình, thông qua các bước sau :

  • Click phải vào thưc mục Controllers trong thư mục ứng dụng, chọn Add sau đó lựa chọn Controller từ pop-up menus.
  • Chọn MVC 5 Control-Empty để tạo Control
  • Nhập tên Controller vào trong cửa sổ, Chú ý tên controller này phải chính xác với tên control nằm trong RouteConfig

Bước 5 : Chạy lạy chương trình chương trình. Chúng ta sẽ nhìn thấy thông báo lỗi ở hình số 12, do đây ASP.Net MVC chưa tìm thấy view tương ứng với Control Home và phương thức Index.

Bước 6 : Tạo mới View, thông qua các bước sau :

  • Click phải vào phương thức Index trong Controller Home, sau đó chọn Add View.
  • Bổ sung một số các thuộc tính khi Add View, ví dụ như sử dụng Layout Page

Bước 7 : Xem và chỉnh sửa nội dung của View. Bổ xung thêm nội dung vào View

Hello World !

,

Bước 8 : Tiến hành chạy chương trình

Getting started with ASP.NET MVC 5

Note

An updated version of this tutorial is available here using the latest version of Visual Studio. The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

This tutorial teaches ASP.NET Core MVC with controllers and views. Razor Pages is a new alternative in ASP.NET Core, a page-based programming model that makes building web UI easier and more productive. We recommend you try the Razor Pages tutorial before the MVC version. The Razor Pages tutorial:

  • Is easier to follow.
  • Covers more features.
  • Is the preferred approach for new app development.

This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017. The final source code for the tutorial is located on GitHub.

This tutorial was written by Scott Guthrie (twitter@scottgu ), Scott Hanselman (twitter: @shanselman ), and Rick Anderson ( @RickAndMSFT )

You need an Azure account to deploy this app to Azure:

  • You can open an Azure account for free – You get credits you can use to try out paid Azure services, and even after they’re used up you can keep the account and use free Azure services.
  • You can activate MSDN subscriber benefits – Your MSDN subscription gives you credits every month that you can use for paid Azure services.

Kết luận

Qua bài học ngày hôm nay, các bạn đã hiểu về View, Controller cũng như cách tạo 1 project ASP.Net MVC và tạo 1 ví dụ đơn giản là xuất câu “Hello Howkteam” ra màn hình rồi nhé.

Bài sau chúng ta sẽ đi vào Tìm hiểu về Layout Page trong View và tạo ví dụ minh họa

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Creating Basic MVC Application in Asp.net MVC using Visual Studio 2015
Creating Basic MVC Application in Asp.net MVC using Visual Studio 2015

Lập trình website với ASP.Net MVC cơ bản

Danh sách bài học

Dẫn nhập

Qua bài giới thiệu tổng quát về ASP.Net MVC đầu tiên, các bạn đã phần nào hiểu được cấu trúc cũng như cách thức hoạt động của nó.

Tuy nhiên, đã là lập trình thì không thể không thực hành, vì vậy trong bài học ngày hôm nay, mình sẽ hướng dẫn do các bạn cách tạo 1 project ASP.Net MVC và chúng ta sẽ làm 1 ví dụ đơn giản nhưng khá kinh điển đó là xuất câu “Hello Howktem”, qua ví dụ này các bạn sẽ nắm rõ về cách hoạt động của ASP.Net MVC bây giờ chúng ta cùng đi vào bài học nhé.

Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

  • Biết cách cài đặt Visual Studio bản 2012 trở lên, nếu chưa biết hay chưa cài đặt được thì các bạn tham khảo qua bài này nhé: Cài đặt môi trường phát triển (IDE) Visual studio 2015
  • Đã đọc qua bài: Giới thiệu tổng quan về công nghệ web ASP.Net MVC
  • Biết C# căn bản là 1 lợi thế, tuy nhiên nếu chưa có thì cũng không sao, các bạn sẽ được hướng dẫn cụ thể.

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Hướng dẫn tạo 1 project ASP.Net MVC, giải thích cấu trúc và vai trò của View, Controller
  • Xuất câu “Hello Howktem” sử dụng ASP.Net MVC

Get started

Start by installing Visual Studio 2017. Then, open Visual Studio.

Visual Studio is an IDE, or integrated development environment. Just like you use Microsoft Word to write documents, you’ll use an IDE to create applications. In Visual Studio, there’s a list along the bottom showing various options available to you. There’s also a menu that provides another way to perform tasks in the IDE. For example, instead of selecting New Project on the Start page, you can use the menu bar and select File > New Project.

Visual Studio 2015 - Create Simple MVC CRUD project in few minutes
Visual Studio 2015 – Create Simple MVC CRUD project in few minutes

Xuất câu “Hello Howkteam” trong ASP.Net MVC

Ở phần thứ nhất các bạn đã nắm được cách hoạt động của View, Controller rồi, bây giờ chúng ta cùng tạo 1 ví dụ đơn giản đó là xuất ra câu “Hello Howkteam” nhé.

  • Đầu tiên các bạn Controllers > Add > Controller
  • Tại giao diện này, các bạn chon MVC 5 Controller – Empty, sau đó chọn Add
  • Tại giao diện này, các bạn nhập tên Controller, mình để là Example rồi nhấn Add
  • Tiếp theo, để hiển thị câu “Hello Howkteam” chúng ta cần có View hiển thị, cách tạo View như sau
  • Bạn click phải chuột vào Index > chọn Add View. Sau đó các bạn làm theo các bước sau
  • Tại Template các bạn chọn Empty (without model), các bước còn lại làm theo hình nhé.
  • Sau khi tạo View Index xong thì để xuất câu “Hello Howkteam” thì bạn thay đổi 1 chút:
  • Tại thẻ bạn thay đổi nội dung bên trong: “Index” > “Hello Howkteam”. Sau đó các bạn vào RouteConfig trong App_Start để thay đổi Controller và Action > để chúng ta mặc định hiển thị trang chứa dòng chữ “Hello Howkteam” hiện lên đầu tiên
  • Tại controller bạn thay đổi nội dung bên trong Home > Example, còn action thì các bạn giữ nguyên giá trị là Index sau đó các bạn Run project lên kiểm tra, nếu màn hình chạy đúng như hình phía dưới thì các bạn đã tạo ví dụ thành công

Feedback

Submit and view feedback for

When I select ASP.NET Web Application template my template chooser screen looks like this:

There’s no MVC template for ASP.NET 4.6. Same for 4.5 Framework versions.

When I select ASP.NET Web Application template my template chooser screen looks like this:

There’s no MVC template for ASP.NET 4.6. Same for 4.5 Framework versions.

If you choose the Web Application under the ASP.NET 5 Preview Templates you will have a project that uses ASP.NET MVC and can be used to build Web Applications or Web API RESTFul services.

I do have the Visual Studio 2015 Enterprise, this is what I see:

after you click this OK button, you will create a MVC 6 project in this VS2015

Did you have the “Microsoft Web Developer Tool” checked when you started the installation?

to see the MVC template, download ans install the Microsoft Web Developer Tools.

Then, below the aspnet 4.6 templates will be your template MVC 5

To use MVC 6 (Now it is called MVC Core 1.0) choose Web Application under the Asp.Net 5 Template, and then MVC.

Att,

As you had asked about MVC 5, and you don’t have it in your template[as in screen shot] and not asking about asp.net 5,

You can download asp.net and web tool Here [VS Extension].

or you can directly add Microsoft ASP.NET MVC 5.2.3 Here [NuGet Package].

Here’s prerelease version of MVC 6.0.0 rc1 [NuGet Package].

Alternate LinkMicrosoft ASP.NET and Web Tools 2015 (RC) – Visual Studio 2015 : Microsoft Website

There is a web application.. curretnly it is still in beta,but it provides good backend architecture and very fast download of functional MVC template

Tạo 1 project ASP.Net MVC đơn giản và giải thích cấu trúc, vai trò của View, Controller trong mô hình MVC.

Cổ phiếu phải có trong nhịp chỉnh
Cổ phiếu phải có trong nhịp chỉnh

Keywords searched by users: mvc 5 visual studio 2015

Asp.Net Mvc 5 - Building A Website With Visual Studio 2015 And C Sharp: The  Tactical Guidebook: Fagerberg, Jonas: 9781535167864: Amazon.Com: Books
Asp.Net Mvc 5 – Building A Website With Visual Studio 2015 And C Sharp: The Tactical Guidebook: Fagerberg, Jonas: 9781535167864: Amazon.Com: Books
Introduction To Asp Net Mvc 5 With C# And Visual Studio 2015 - Youtube
Introduction To Asp Net Mvc 5 With C# And Visual Studio 2015 – Youtube
Getting Started With Asp Net Mvc 5 | Visual Studio 2015 - Youtube
Getting Started With Asp Net Mvc 5 | Visual Studio 2015 – Youtube
Building Asp.Net Mvc 5 Project From Scratch Using Vs 2015 - Csharpcode.Org
Building Asp.Net Mvc 5 Project From Scratch Using Vs 2015 – Csharpcode.Org
Introducing The Visual Studio 2015 Extension For Asp.Net Project Templates  - .Net Blog
Introducing The Visual Studio 2015 Extension For Asp.Net Project Templates – .Net Blog
Basic Asp.Net 5 With Visual Studio 2015 – Eric L. Anderson
Basic Asp.Net 5 With Visual Studio 2015 – Eric L. Anderson
Create A Secure Asp.Net Mvc 5 Web App With Log In, Email Confirmation And  Password Reset (C#) | Microsoft Learn
Create A Secure Asp.Net Mvc 5 Web App With Log In, Email Confirmation And Password Reset (C#) | Microsoft Learn
Create An Asp.Net Mvc Application To Display Data Collection - Dot Net For  All
Create An Asp.Net Mvc Application To Display Data Collection – Dot Net For All
Upload Images On Server Folder Using Asp.Net Mvc
Upload Images On Server Folder Using Asp.Net Mvc
Making It Better: Updates For Asp.Net 5 In Visual Studio 2015 Ctp 5 - .Net  Blog
Making It Better: Updates For Asp.Net 5 In Visual Studio 2015 Ctp 5 – .Net Blog
Lab 03 - View In Asp.Net Mvc 5 - Bài 3.2 | Devmaster
Lab 03 – View In Asp.Net Mvc 5 – Bài 3.2 | Devmaster
Upgrading Visual Studio 2015 Preview To Asp.Net 5/Mvc 6 Rc | Stephen Walther
Upgrading Visual Studio 2015 Preview To Asp.Net 5/Mvc 6 Rc | Stephen Walther
Professional Asp.Net Mvc 3 Wrox Pdf - Colaboratory
Professional Asp.Net Mvc 3 Wrox Pdf – Colaboratory
Basic Asp.Net 5 With Visual Studio 2015 – Eric L. Anderson
Basic Asp.Net 5 With Visual Studio 2015 – Eric L. Anderson
Kỹ Thuật Phân Trang Trong Asp.Net Mvc Sử Dụng Thư Viện Pagedlist Kết Hợp  Ajax
Kỹ Thuật Phân Trang Trong Asp.Net Mvc Sử Dụng Thư Viện Pagedlist Kết Hợp Ajax
Getting Started With Asp.Net Mvc 5 | Microsoft Learn
Getting Started With Asp.Net Mvc 5 | Microsoft Learn
Learn Asp.Net Mvc: Be Ready For Coding Away Next Week Using Asp.Net Mvc 5  And Visual Studio 2015 Book - Everyone - Skillsoft
Learn Asp.Net Mvc: Be Ready For Coding Away Next Week Using Asp.Net Mvc 5 And Visual Studio 2015 Book – Everyone – Skillsoft
Introducing The Visual Studio 2015 Extension For Asp.Net Project Templates  - .Net Blog
Introducing The Visual Studio 2015 Extension For Asp.Net Project Templates – .Net Blog
Lab02-Controller In Asp.Net Mvc-Bài 2.1 | Devmaster
Lab02-Controller In Asp.Net Mvc-Bài 2.1 | Devmaster
Bài 10: Tạo Project Asp.Net Mvc Với Visual Studio 2015
Bài 10: Tạo Project Asp.Net Mvc Với Visual Studio 2015

See more here: kientrucannam.vn

Leave a Reply

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