Mvc 5 Visual Studio 2017 | Create Your First App

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é

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

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

Initialize DB with test data

Entity Framework can automatically create (or drop and re-create) a database for you when the application runs. You can specify that this should be done every time your application runs or only when the model is out of sync with the existing database. You can also write a

Seed

method that Entity Framework automatically calls after creating the database in order to populate it with test data.

The default behavior is to create a database only if it doesn’t exist (and throw an exception if the model has changed and the database already exists). In this section, you’ll specify that the database should be dropped and re-created whenever the model changes. Dropping the database causes the loss of all your data. This is generally okay during development, because the

Seed

method will run when the database is re-created and will re-create your test data. But in production you generally don’t want to lose all your data every time you need to change the database schema. Later you’ll see how to handle model changes by using Code First Migrations to change the database schema instead of dropping and re-creating the database.

1. In the DAL folder, create a new class file named SchoolInitializer.cs and replace the template code with the following code, which causes a database to be created when needed and loads test data into the new database.

   
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; using ContosoUniversity.Models; namespace ContosoUniversity.DAL { public class SchoolInitializer : System.Data.Entity. DropCreateDatabaseIfModelChanges

{ protected override void Seed(SchoolContext context) { var students = new List

{ new Student{FirstMidName="Carson",LastName="Alexander",EnrollmentDate=DateTime.Parse("2005-09-01")}, new Student{FirstMidName="Meredith",LastName="Alonso",EnrollmentDate=DateTime.Parse("2002-09-01")}, new Student{FirstMidName="Arturo",LastName="Anand",EnrollmentDate=DateTime.Parse("2003-09-01")}, new Student{FirstMidName="Gytis",LastName="Barzdukas",EnrollmentDate=DateTime.Parse("2002-09-01")}, new Student{FirstMidName="Yan",LastName="Li",EnrollmentDate=DateTime.Parse("2002-09-01")}, new Student{FirstMidName="Peggy",LastName="Justice",EnrollmentDate=DateTime.Parse("2001-09-01")}, new Student{FirstMidName="Laura",LastName="Norman",EnrollmentDate=DateTime.Parse("2003-09-01")}, new Student{FirstMidName="Nino",LastName="Olivetto",EnrollmentDate=DateTime.Parse("2005-09-01")} }; students.ForEach(s => context.Students.Add(s)); context.SaveChanges(); var courses = new List

{ new Course{CourseID=1050,Title="Chemistry",Credits=3,}, new Course{CourseID=4022,Title="Microeconomics",Credits=3,}, new Course{CourseID=4041,Title="Macroeconomics",Credits=3,}, new Course{CourseID=1045,Title="Calculus",Credits=4,}, new Course{CourseID=3141,Title="Trigonometry",Credits=4,}, new Course{CourseID=2021,Title="Composition",Credits=3,}, new Course{CourseID=2042,Title="Literature",Credits=4,} }; courses.ForEach(s => context.Courses.Add(s)); context.SaveChanges(); var enrollments = new List

{ new Enrollment{StudentID=1,CourseID=1050,Grade=Grade.A}, new Enrollment{StudentID=1,CourseID=4022,Grade=Grade.C}, new Enrollment{StudentID=1,CourseID=4041,Grade=Grade.B}, new Enrollment{StudentID=2,CourseID=1045,Grade=Grade.B}, new Enrollment{StudentID=2,CourseID=3141,Grade=Grade.F}, new Enrollment{StudentID=2,CourseID=2021,Grade=Grade.F}, new Enrollment{StudentID=3,CourseID=1050}, new Enrollment{StudentID=4,CourseID=1050,}, new Enrollment{StudentID=4,CourseID=4022,Grade=Grade.F}, new Enrollment{StudentID=5,CourseID=4041,Grade=Grade.C}, new Enrollment{StudentID=6,CourseID=1045}, new Enrollment{StudentID=7,CourseID=3141,Grade=Grade.A}, }; enrollments.ForEach(s => context.Enrollments.Add(s)); context.SaveChanges(); } } }






   The

   
Seed

   method takes the database context object as an input parameter, and the code in the method uses that object to add new entities to the database. For each entity type, the code creates a collection of new entities, adds them to the appropriate
   
DbSet

   property, and then saves the changes to the database. It isn’t necessary to call the
   
SaveChanges

   method after each group of entities, as is done here, but doing that helps you locate the source of a problem if an exception occurs while the code is writing to the database.

2. To tell Entity Framework to use your initializer class, add an element to the

   
entityFramework

   element in the application Web.config file (the one in the root project folder), as shown in the following example:

   The

   
context type

   specifies the fully qualified context class name and the assembly it’s in, and the
   
databaseinitializer type

   specifies the fully qualified name of the initializer class and the assembly it’s in. (When you don’t want EF to use the initializer, you can set an attribute on the
   
context

   element:
   
disableDatabaseInitialization="true"

   .) For more information, see Configuration File Settings.

   An alternative to setting the initializer in the Web.config file is to do it in code by adding a

   
Database.SetInitializer

   statement to the
   
Application_Start

   method in the Global.asax.cs file. For more information, see Understanding Database Initializers in Entity Framework Code First.

The application is now set up so that when you access the database for the first time in a given run of the application, Entity Framework compares the database to the model (your

SchoolContext

and entity classes). If there’s a difference, the application drops and re-creates the database.

Note

When you deploy an application to a production web server, you must remove or disable code that drops and re-creates the database. You’ll do that in a later tutorial in this series.

Next steps

In this tutorial, you:

• Created an MVC web app
• Set up the site style
• Installed Entity Framework 6
• Created the data model
• Created the database context
• Initialized DB with test data
• Set up EF 6 to use LocalDB
• Created controller and views
• Viewed the database

Advance to the next article to learn how to review and customize the create, read, update, delete (CRUD) code in your controllers and views.

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.

Create first simple MVC application

Mở Visual Studio 2017 và chon File menu -> New -> Project :

Tạo một project mới trong VS

Từ hộp thoại New Project, mở rộng Visual C# và chọn Web, sau đó chọn ASP.NET Web Application (.NET Framework) . Nhập tên project

MyMVCApplication

. Chúng ta cũng có thể thay đổi vị trí lưu project bằng cách vào Browse… Cuối cùng, click OK.

Từ hộp thoại New ASP.NET Web Application, chọn MVC:

Chúng ta cũng có thể thay đổi quyền bằng cách click Change Authenticationbutton.

Chọn Loại xác thực

Ở đây, chúng ta đang giữ xác thực mặc định cho ứng dụng. Ứng dụng của tôi là Không xác thực. Nhấn OK để tiếp tục.

Đợi một lúc cho đến khi Visual Studio tạo một project MVC đơn giản bằng cách sử dụng mẫu mặc định như dưới đây.

Bây giờ , nhấn F5 to run một project in debug mode hoặc Ctrl + F5 to run một project không cần deug. Khi chạy nó sẽ mở trang chủ trong trình duyệt.

Proejct MVC 5 đã chứa các tệp JavaScript và CSS bootstrap 3.0 mặc định. Vì vậy, bạn có thể tạo các trang web nhanh. Giao diện người dùng sẽ thay đổi giao diện dựa trên kích thước màn hình của các thiết bị khác nhau. Ví dụ, thanh menu trên cùng sẽ được thay đổi trong các thiết bị di động.

Kết quả trả về trong ứng dụng MVC

Kết quả trả về trong ứng dụng MVC

// HomeController.cs


using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplicationDemo.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } } }


// index.cshtml


@{ ViewBag.Title = "Home Page"; }

ASP.NET

ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.

Learn more

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

Thiết lập môi trường phát triển

Bạn có thể phát triển ứng dụng ASP.NET MVC với phiên bản Visual Studio và .NET framework thích hợp, như bạn đã thấy trong phần trước của lịch sử phiên bản.

Tại đây, chúng ta sẽ sử dụng MVC v5.2, phiên bản Cộng đồng Visual Studio 2017 và .NET framework 4.6 để tạo ứng dụng MVC đầu tiên của chúng tôi.

Download phiên bản mới nhất Visual Studio https://visualstudio.microsoft.com/downloads.

Set up EF 6 to use LocalDB

LocalDB is a lightweight version of the SQL Server Express database engine. It's easy to install and configure, starts on demand, and runs in user mode. LocalDB runs in a special execution mode of SQL Server Express that enables you to work with databases as .mdf files. You can put LocalDB database files in the App_Data folder of a web project if you want to be able to copy the database with the project. The user instance feature in SQL Server Express also enables you to work with .mdf files, but the user instance feature is deprecated; therefore, LocalDB is recommended for working with .mdf files. LocalDB is installed by default with Visual Studio.

Typically, SQL Server Express is not used for production web applications. LocalDB in particular is not recommended for production use with a web application because it's not designed to work with IIS.

• In this tutorial, you'll work with LocalDB. Open the application Web.config file and add a

  
connectionStrings

  element preceding the
  
appSettings

  element, as shown in the following example. (Make sure you update the Web.config file in the root project folder. There's also a Web.config file in the Views subfolder that you don't need to update.)

The connection string you've added specifies that Entity Framework will use a LocalDB database named ContosoUniversity1.mdf. (The database doesn't exist yet but EF will create it.) If you want to create the database in your App_Data folder, you could add

AttachDBFilename=|DataDirectory|\ContosoUniversity1.mdf

to the connection string. For more information about connection strings, see SQL Server Connection Strings for ASP.NET Web Applications.

You don't actually need a connection string in the Web.config file. If you don't supply a connection string, Entity Framework uses a default connection string based on your context class. For more information, see Code First to a New Database.

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.

Web Hosting

You can easily find a web hosting company that offers the right mix of features and price for your applications.

Learn more

Create ASP.NET MVC Application

In this section, we will create a new MVC web application using Visual Studio and understand the basic building blocks of the ASP.NET MVC Application.

We are going to use ASP.NET MVC v5.2, and Visual Studio 2017 community edition, and .NET Framework 4.6 to create our first MVC application.

Download the latest version of Visual Studio from visualstudio.microsoft.com/downloads.

Open Visual Studio 2017 and select File menu -> New -> Project, as shown below.

From the New Project dialog as shown below, expand Visual C# node and select Web in the left pane, and then select ASP.NET Web Application (.NET Framework) in the middle pane.
Enter the name of your project

MyMVCApplication

. (You can give an appropriate name for your application). Also, you can change the location of the MVC application by clicking on Browse.. button. Finally, click OK.

From the New ASP.NET Web Application dialog, select MVC (if not selected already) as shown below.

You can also change the authentication by clicking on Change Authentication button. You can select appropriate authentication mode for your application, as shown below.

Here, we are keeping the default authentication for our application which is No Authentication. Click OK to continue.

Wait for some time till Visual Studio creates a simple MVC project using the default template, as shown below.

Now, press F5 to run the project in debug mode or Ctrl + F5 to run the project without debugging. It will open the home page in the browser, as shown below.

MVC 5 project includes JavaScript and CSS files of bootstrap 3.0 by default. So you can create responsive web pages. This responsive UI will change its look and feel based on the screen size of the different devices. For example, the top menu bar will be changed in the mobile devices, as shown below.

In this way, you can create your ASP.NET MVC 5 application using Visual Studio 2017.

Learn about ASP.NET MVC project’s folder structure in the next section.