Chuyển tới nội dung
Home » Mvc Visual Studio 2019 | Get Started

Mvc Visual Studio 2019 | Get Started

MVC web application-Part 1 Visual Studio 2019 | Step-by-step ASP.NET MVC Tutorial for Beginners

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é!

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ó”.

MVC web application-Part 1 Visual Studio 2019 | Step-by-step ASP.NET MVC Tutorial for Beginners
MVC web application-Part 1 Visual Studio 2019 | Step-by-step ASP.NET MVC Tutorial for Beginners

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

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 2019 Installation and Creation of MVC project
Visual Studio 2019 Installation and Creation of MVC project

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

2.MVC

Ở đây, chúng ta vừa tạo ra một ASP.NET MVC project nên sẽ có thêm 3 folder Controllers, Models và Views. Controllers: Chứa các controller. Models: Chứa các file tương tác với CSDL. Views: Thư mục chứa các file HTML với đuôi là .cshtml.

Các file HTML trong ASP.NET MVC

Các file này còn được gọi là Razor file. Controller trong MVC gọi View bằng cách gán dữ liệu để tạo giao diện. View phải có khả năng xử lý dữ liệu và tạo response. Điều này được xử lý bằng cách dùng Razor, nó cho chúng ta sử dụng C# code trong file HTML.Các file chứa Razor có đuôi .cshtml. Cú pháp Razor thường ngắn hơn và đơn giản hơn cũng dễ học như C#. Sau này, mình sẽ có 1 bài viết cũ thể hơn về Razor View Engine.

Như vậy, mình đã giới thiệu sơ qua về cách tạo một project ASP.NET bằng Visual Studio 2019. Ở bài viết tới, mình sẽ ứng dụng mô hình MVC để tạo một trang web đơn giản.

Từ năm 2016 ASP.NET đã trở thành một phần mềm mã nguồn mở và có thể xây dựng web app và hosting trên mọi nên tảng khác như Ubuntu, Max OS với VScode chứ không chỉ Windows. Các bạn có thể tham khảo cách cài đặt ASP.NET core trên các nền tảng khác như Ubuntu, MacOS tại đây.

All rights reserved

Tạo ứng dụng MVC đầu tiên trong visual studio 2019
Tạo ứng dụng MVC đầu tiên trong visual studio 2019

Feedback

Submit and view feedback for

Tạo website ASP.NET MVC đơn giản (P1)

Bài đăng này đã không được cập nhật trong 2 năm

Dựa trên nền tảng ASP.NET, ASP.NET MVC là một framework được phát triển bởi Microsoft, cho phép chúng ta xây dựng ứng dụng web theo mô hình MVC: (Model, View và Controller). Sau đây, mình sẽ hướng dẫn các bạn cách tạo một website ASP.NET MVC đơn giản bằng Visual Studio 2019 nhé.

Tạo một project ASP.NET bằng Visual Studio 2019

Đầu tiên, sau khi mở VS 2019, chọn File -> New -> Project, một cửa sổ New Project sẽ hiện lên. Trong cửa sổ này, bạn tìm kiếm và chọn ASP.NET core Web App (Model-View-Controller) với ngôn ngữ là C#.

Sau đó bạn chọn Next và đặt tên cho ứng dụng web của mình. Ở đây, mình đặt tên ứng dụng của mình là “My book”.

Tiếp tục chọn Next và chuyển tới cửa sổ lựa chọn phiên bản. Các bạn có thể lựa chọn các phiên bản .NET core 2.1,* .NET core 3.1* hay .NET core 5.0 và một số tùy chọn khác tùy theo phiên bản .NET mà bạn đã chọn.

Sau đó, bạn chọn Create để tạo web app. Visual Studio sẽ tự động tạo một template mặc định cho ứng dụng ASP.NET MVC bạn vừa tạo ra. Trong ứng dụng mặc định đa được tạo, có 2 trang chính Home và Privacy nằm thanh menu.

Để có thể xem được cấu trúc thư mục web bằng cách mở Solution Explorer (View -> Solution Explorer hoặc phím tắt Ctrl + Alt + L).

Cấu trúc Solution Explorer

Mọi Solution chứa 3 folder chính là Dependencies, Properties và* wwwroot*

2.Dependencies

Trong thư mục Dependencies, chúng ta có thư mục Nuget chứa các Nuget Packages đang sử dụng. Visual Studio sử dụng Nuget Packages để quản lý tất cả các dependencies phía server. Có 3 cách để tải Nuget Package vào project:

  • Chỉnh sửa thẳng file .csproj
  • Sử dụng Nuget Package Manager
  • Qua lệnh Package Manager Console
Cổ phiếu phải có trong nhịp chỉnh
Cổ phiếu phải có trong nhịp chỉnh

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.

This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you’re new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. See Choose an ASP.NET Core UI, which compares Razor Pages, MVC, and Blazor for UI development.

This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

At the end of the series, you’ll have an app that manages and displays movie data. You learn how to:

The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code.

Change to the directory (cd) that will contain the project.

Run the following commands:

dotnet new mvc -o MvcMovie
code -r MvcMovie

The dotnet new command creates a new ASP.NET Core MVC project in the MvcMovie folder.

The code command opens the MvcMovie project folder in the current instance of Visual Studio Code.

Visual Studio Code might display a dialog box that asks: Do you trust the authors of the files in this folder?

If you trust all files in the parent folder, select Trust the authors of all files in the parent folder.

Select Yes, I trust the authors since the project folder has files generated by .NET.

When Visual Studio Code requests that you add assets to build and debug the project, select Yes. If Visual Studio Code doesn’t offer to add build and debug assets, select View > Command Palette and type “.NET” into the search box. From the list of commands, select the .NET: Generate Assets for Build and Debug command.

Visual Studio Code adds a .vscode folder with generated launch.json and tasks.json files.

Select File > New Project….

Select Web and Console > App > Web Application (Model-View-Controller) > Continue.

In the Configure your new Web Application (Model-View-Controller) dialog:

Select .NET 8.0 for the Target Framework.

Verify that Do not use top-level statements is unchecked.

Select Continue.

Enter MvcMovie for Project name. It’s important to name the project MvcMovie. Capitalization needs to match each namespace when code is copied.

Visual Studio runs the app and opens the default browser.

The address bar shows localhost: and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

Launching the app without debugging by selecting Ctrl+F5 allows you to:

Make code changes.

Save the file.

Quickly refresh the browser and see the code changes.

You can launch the app in debug or non-debug mode from the Debug menu:

You can debug the app by selecting the https button in the toolbar:

The following image shows the app:

Select F5 to run the app.

Trust the HTTPS development certificate by running the following command:

dotnet dev-certs https –trust

The preceding command doesn’t work on Linux. See your Linux distribution’s documentation for trusting a certificate.

The preceding command displays the following dialog, provided the certificate was not previously trusted:

Select Yes if you agree to trust the development certificate.

This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you’re new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. See Choose an ASP.NET Core UI, which compares Razor Pages, MVC, and Blazor for UI development.

This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

At the end of the series, you’ll have an app that manages and displays movie data. You learn how to:

The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code.

Change to the directory (cd) that will contain the project.

Run the following commands:

dotnet new mvc -o MvcMovie
code -r MvcMovie

The dotnet new command creates a new ASP.NET Core MVC project in the MvcMovie folder.

The code command opens the MvcMovie project folder in the current instance of Visual Studio Code.

Visual Studio Code might display a dialog box that asks: Do you trust the authors of the files in this folder?

If you trust all files in the parent folder, select Trust the authors of all files in the parent folder.

Select Yes, I trust the authors since the project folder has files generated by .NET.

When Visual Studio Code requests that you add assets to build and debug the project, select Yes. If Visual Studio Code doesn’t offer to add build and debug assets, select View > Command Palette and type “.NET” into the search box. From the list of commands, select the .NET: Generate Assets for Build and Debug command.

Visual Studio Code adds a .vscode folder with generated launch.json and tasks.json files.

Start Visual Studio for Mac and select File > New Project….

In Visual Studio for Mac select Web and Console > App > Web Application (Model-View-Controller) > Continue.

In the Configure your new Web Application (Model-View-Controller) dialog:

Select .NET 7.0 for the Target Framework.

Verify that Do not use top-level statements is unchecked.

Select Continue.

Enter MvcMovie for Project name. It’s important to name the project MvcMovie. Capitalization needs to match each namespace when code is copied.

Visual Studio runs the app and opens the default browser.

The address bar shows localhost: and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

Launching the app without debugging by selecting Ctrl+F5 allows you to:

Make code changes.

Save the file.

Quickly refresh the browser and see the code changes.

You can launch the app in debug or non-debug mode from the Debug menu:

You can debug the app by selecting the https button in the toolbar:

The following image shows the app:

Select F5 to run the app.

Trust the HTTPS development certificate by running the following command:

dotnet dev-certs https –trust

The preceding command doesn’t work on Linux. See your Linux distribution’s documentation for trusting a certificate.

The preceding command displays the following dialog, provided the certificate was not previously trusted:

Select Yes if you agree to trust the development certificate.

This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you’re new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. See Choose an ASP.NET Core UI, which compares Razor Pages, MVC, and Blazor for UI development.

This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

At the end of the series, you’ll have an app that manages and displays movie data. You learn how to:

The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code.

For Visual Studio for Mac, see the .NET 7 version of this tutorial.

Change to the directory (cd) that will contain the project.

Run the following commands:

dotnet new mvc -o MvcMovie
code -r MvcMovie

The dotnet new command creates a new ASP.NET Core MVC project in the MvcMovie folder.

The code command opens the MvcMovie project folder in the current instance of Visual Studio Code.

Visual Studio Code might display a dialog box that asks: Do you trust the authors of the files in this folder?

If you trust all files in the parent folder, select Trust the authors of all files in the parent folder.

Select Yes, I trust the authors since the project folder has files generated by .NET.

When Visual Studio Code requests that you add assets to build and debug the project, select Yes. If Visual Studio Code doesn’t offer to add build and debug assets, select View > Command Palette and type “.NET” into the search box. From the list of commands, select the .NET: Generate Assets for Build and Debug command.

Visual Studio Code adds a .vscode folder with generated launch.json and tasks.json files.

For Visual Studio for Mac, see the .NET 7 version of this tutorial.

Visual Studio runs the app and opens the default browser.

The address bar shows localhost: and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

Launching the app without debugging by selecting Ctrl+F5 allows you to:

Make code changes.

Save the file.

Quickly refresh the browser and see the code changes.

You can launch the app in debug or non-debug mode from the Debug menu:

You can debug the app by selecting the MvcMovie button in the toolbar:

The following image shows the app:

Select Ctrl+F5 to run without the debugger.

Trust the HTTPS development certificate by running the following command:

dotnet dev-certs https –trust

The preceding command doesn’t work on Linux. See your Linux distribution’s documentation for trusting a certificate.

The preceding command displays the following dialog, provided the certificate was not previously trusted:

Select Yes if you agree to trust the development certificate.

This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you’re new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. See Choose an ASP.NET Core UI, which compares Razor Pages, MVC, and Blazor for UI development.

This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

At the end of the series, you’ll have an app that manages and displays movie data. You learn how to:

The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code.

Change to the directory (cd) that will contain the project.

Run the following commands:

dotnet new mvc -o MvcMovie
code -r MvcMovie

The dotnet new command creates a new ASP.NET Core MVC project in the MvcMovie folder.

The code command opens the MvcMovie project folder in the current instance of Visual Studio Code.

Visual Studio Code might display a dialog box that asks: Do you trust the authors of the files in this folder?

If you trust all files in the parent folder, select Trust the authors of all files in the parent folder.

Select Yes, I trust the authors since the project folder has files generated by .NET.

When Visual Studio Code requests that you add assets to build and debug the project, select Yes. If Visual Studio Code doesn’t offer to add build and debug assets, select View > Command Palette and type “.NET” into the search box. From the list of commands, select the .NET: Generate Assets for Build and Debug command.

Visual Studio Code adds a .vscode folder with generated launch.json and tasks.json files.

Select File > New Solution.

In Visual Studio for Mac earlier than version 8.6, select .NET Core > App > Web Application (Model-View-Controller) > Next. In version 8.6 or later, select Web and Console > App > Web Application (Model-View-Controller) > Next.

In the Configure your new Web Application dialog:

Confirm that Authentication is set to No Authentication.

If an option to select a Target Framework is presented, select the latest 5.x version.

Select Next.

Name the project MvcMovie, and then select Create.

The address bar shows localhost:port# and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

Launching the app without debugging by selecting Ctrl+F5 allows you to:

Make code changes.

Save the file.

Quickly refresh the browser and see the code changes.

You can launch the app in debug or non-debug mode from the Debug menu item:

You can debug the app by selecting the IIS Express button

The following image shows the app:

Select Ctrl+F5 to run without the debugger.

Trust the HTTPS development certificate by running the following command:

dotnet dev-certs https –trust

The preceding command doesn’t work on Linux. See your Linux distribution’s documentation for trusting a certificate.

The preceding command displays the following dialog, provided the certificate was not previously trusted:

Select Yes if you agree to trust the development certificate.

The address bar shows localhost:port# and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

You can launch the app in debug or non-debug mode from the Run menu.

This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you’re new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. See Choose an ASP.NET Core UI, which compares Razor Pages, MVC, and Blazor for UI development.

This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

At the end of the series, you’ll have an app that manages and displays movie data. You learn how to:

The Visual Studio Code instructions use the .NET Core CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on any platform (macOS, Linux, or Windows) and with any code editor. Minor changes may be required if you use something other than Visual Studio Code. For more information on installing Visual Studio Code on macOS, see Visual Studio Code on macOS.

Change directories (cd) to a folder that will contain the project.

Run the following command:

dotnet new mvc -o MvcMovie
code -r MvcMovie

A dialog box appears with Required assets to build and debug are missing from ‘MvcMovie’. Add them?, select Yes.

dotnet new mvc -o MvcMovie: Creates a new ASP.NET Core MVC project in the MvcMovie folder.

code -r MvcMovie: Loads the MvcMovie.csproj project file in Visual Studio Code.

Select File > New Solution.

In Visual Studio for Mac earlier than version 8.6, select .NET Core > App > Web Application (Model-View-Controller) > Next. In version 8.6 or later, select Web and Console > App > Web Application (Model-View-Controller) > Next.

In the Configure your new Web Application dialog:

Confirm that Authentication is set to No Authentication.

If an option to select a Target Framework is presented, select the latest 3.x version.

Select Next.

Name the project MvcMovie, and then select Create.

The address bar shows localhost:port# and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server.

Launching the app without debugging by selecting Ctrl+F5 allows you to:

Make code changes.

Save the file.

Quickly refresh the browser and see the code changes.

You can launch the app in debug or non-debug mode from the Debug menu item:

You can debug the app by selecting the IIS Express button

The following image shows the app:

Select Ctrl+F5 to run the app without debugging.

Trust the HTTPS development certificate by running the following command:

dotnet dev-certs https –trust

The preceding command doesn’t work on Linux. See your Linux distribution’s documentation for trusting a certificate.

The preceding command displays the following dialog, provided the certificate was not previously trusted:

Select Yes if you agree to trust the development certificate.

The address bar shows localhost:port# and not something like example.com. The standard hostname for your local computer is localhost. When Visual Studio creates a web project, a random port is used for the web server. When you run the app, you’ll see a different port number.

You can launch the app in debug or non-debug mode from the Run menu.

Xây dựng một ví dụ đơn giản với ASP.NET MVC 5. Ta cũng biết ASP.NET là một ngôn ngữ rất được nhiều lập trình viên dùng hiện này, bởi vì nó bảo mật rất tuyệt vờiNay mình chia sẻ cách xây dựng ASP.NET MVC 5 trên phần mềm Visual Studio 2019Đầu tiên các bạn cần tải Visual Studio 2019 về máy tính, bạn bấm vào đây https://docs.microsoft.com/en-gb/visualstudio/releases/2019/release-notesSau khi tải về bạn cứ cái đặt bình thường, chọn các plugin cần dùng và bạn chuyển qua Individual Components, sao đó nhớ chọn Class Designer và LINQ to SQL Tools nhé

2.Thư mục wwwroot

Các file tĩnh như HTML, CSS, Javascript hay hình ảnh hoặc các thư mục con của nó sẽ được lưu trư trong thư mục wwwroot

Thư mục wwwroot được coi như thư mục root của website. Url của các thành phần trong thư mục root sẽ được đặt ngay sau domain. Ví dụ, domain của mình là

http://cress1004.com/

và trong thư mục wwwroot của mình có file image.png thì đường dẫn của file sau khi publish sẽ là

http://cress1004.com/image.png

.

Toàn bộ code như C#, Razor file nên đặt ngoài thư mục này. Nếu muốn dùng tính năng này chúng ta cần sử dụng tính năng StaticFiles trong ASP.NET Core mà chúng ta sẽ tìm hiểu sau.

FULL MATCH: MÃ Minh Cẩm - Frederic CAUDRON | Bán Kết PBA - Silkroad & Ansan PBA Championship 23-24
FULL MATCH: MÃ Minh Cẩm – Frederic CAUDRON | Bán Kết PBA – Silkroad & Ansan PBA Championship 23-24

# Setup project ASP.NET MVC 5

Tạo một project để test thử nào mọi người, trong Visual Studio 2019 cũng khá tuyệt với đấy nhé, nói chung đẹp,…

Bạn chọn ASP.NET Web Application nhé, nhớ chọn C# , tiếp tục bước tiếp theo bạn chọn Version Framework mà mình dùng là được, sau khi tạo xong, bạn tạo cho mình file Controller trong Project vừa tạo như sau

Mình sẽ tạo file HomeController.cs trong thư mục Controllers, sau khi tạo xong ta tiến hành tạo Layout cho giao diện. Đầu tiên các bạn vào Views tạo thư mục Shared, sau đó add một layout như hình bên dưới đây. Layout này mình dùng để cấu hình cho từng file hiển thị ngoài website, các bạn có thể hiểu là một file Index.cshtml nó sẽ kế thừa giao diện từ một Layout, Nếu bạn có xem qua lập trình Laravel Framework thì nó cũng kế thừa từ một Layout, để chúng ta đở tốn code và dễ chỉnh sửa giao diện sao này.

Ok, sao khi tạo layout cho project xong, bạn mở file HomeController.cs tại function index() bạn thực hiện add một View như sau:click right index()->chọn Add View Chọn tới Layout mà mình vừa tạo bên trên

Bạn sẽ được một file Index.cshtml trong thư mục Views/Home/Index.cshtml.Home(HomeController), Index.cshtml (function Index() trong HomeController) nhé mọi người , Tiếp theo bạn mở file HomeController.cs lên và chỉnh sửa như sau

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC5_HelloWorld.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { ViewBag.title = “MVC5 – Hello World”; return View(); } } }

Chúng ta thiết lập ViewBag.title dùng để chèn một chuổi dữ liệu hay một mảng dữ liệu mà ta muốn nó được hiện thị ngoài View, bạn có thể kết hợp với LingQ nhé, bạn có thể xem ví dụ dưới đây

//HomeController.cs var data = (from s in _db.users select s).ToList(); View.Bag = data; return View() //Views/Home/Index.cshtml @foreach(var result in ViewBag.data){

@result.name


@result.created_at

}

Trên là ví dụ nếu bạn muốn lấy dữ liệu trong SQL SERVER , để hiện thị ra ngoài View

Tiếp tục bạn vào Views/Home/Index.cshtml mở lên và chỉnh sửa lại như sau:

@{ ViewBag.Title = “Index”; Layout = “~/Views/Shared/_LayoutPage1.cshtml”; }

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é
CỰC NÓNG: SON HEUNG MIN Đ.Á.N.H NHAU VỚI LEE KANG IN Ở ASIAN CUP KHIẾN ĐT HQ BỊ LOẠI
CỰC NÓNG: SON HEUNG MIN Đ.Á.N.H NHAU VỚI LEE KANG IN Ở ASIAN CUP KHIẾN ĐT HQ BỊ LOẠI

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ế

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.

Keywords searched by users: mvc visual studio 2019

Mvc Web Application-Part 1 Visual Studio 2019 | Step-By-Step Asp.Net Mvc  Tutorial For Beginners - Youtube
Mvc Web Application-Part 1 Visual Studio 2019 | Step-By-Step Asp.Net Mvc Tutorial For Beginners – Youtube
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Create First Mvc Web Application Using Visual Studio 2019 - Youtube
Create First Mvc Web Application Using Visual Studio 2019 – Youtube
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
How To Create First Asp.Net Mvc Project In Visual Studio 2019 - Youtube
How To Create First Asp.Net Mvc Project In Visual Studio 2019 – Youtube
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Visual Studio 2019 - Mvc Core - Part 01 - Hello World - Youtube
Visual Studio 2019 – Mvc Core – Part 01 – Hello World – Youtube
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. | How Kteam
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. | How Kteam
Adding A View To An Mvc App | Microsoft Learn
Adding A View To An Mvc App | Microsoft Learn
Asp.Net Mvc 5 Hello World
Asp.Net Mvc 5 Hello World
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Create First .Net Mvc Web Application Using Visual Studio 2019 (Slow  Version) - Youtube
Create First .Net Mvc Web Application Using Visual Studio 2019 (Slow Version) – Youtube
Asp.Net Mvc 5 Hello World
Asp.Net Mvc 5 Hello World
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Tutorial (Asp.Net Core) | Reactjs.Net
Tutorial (Asp.Net Core) | Reactjs.Net
#01 Cài Đặt Visual Studio 2019 | Học Asp.Net Core 5.0 Từ Đầu Để Làm -  Youtube
#01 Cài Đặt Visual Studio 2019 | Học Asp.Net Core 5.0 Từ Đầu Để Làm – Youtube
Adding A View To An Mvc App | Microsoft Learn
Adding A View To An Mvc App | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Get Started With Asp.Net Core Mvc | Microsoft Learn
Asp.Net Mvc 5 Hello World
Asp.Net Mvc 5 Hello World
Visual Studio 2019 - Mvc Core 3 - Part 03 - Viewbag - Youtube
Visual Studio 2019 – Mvc Core 3 – Part 03 – Viewbag – Youtube
Tutorial: Create The Web Application And Data Models For Ef Database First  With Asp.Net Mvc | Microsoft Learn
Tutorial: Create The Web Application And Data Models For Ef Database First With Asp.Net Mvc | Microsoft Learn

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *