ASP.NET - MVC - Bắt đầu tạo ứng dụng

Tạo một ứng dụng đầu tiên trong ASP.NET MVC

Trong phần này, chúng tôi sẽ tạo một ứng dụng web MVC mới bằng Visual Studio và hiểu các khối  cơ bản của Ứng dụng ASP.NET MVC.

Đầu tiên, thiết lập môi trường phát triển để phát triển ứng dụng ASP.NET MVC 5.

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.

Create first simple MVC application

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

Create MVC Application

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.

Select template

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

Create MVC App

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

Create simple MVC Application

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.

MVC Application

 

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.

Run MVC Application

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.

Responsive MVC Application 1

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

Responsive MVC Application 2

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";  
}  
<div class="jumbotron">  
    <h1>ASP.NET</h1>  
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications   
    using HTML, CSS and JavaScript.</p>  
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more</a></p>  
</div>  
<div class="row">  
    <div class="col-md-4">  
        <h2>Getting started</h2>  
        <p>  
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that  
            enables a clean separation of concerns and gives you full control over markup  
            for enjoyable, agile development.  
        </p>  
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">  
        Learn more</a></p>  
    </div>  
    <div class="col-md-4">  
        <h2>Get more libraries</h2>  
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries  
        and tools in Visual Studio projects.</p>  
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">  
        Learn more</a></p>  
    </div>  
    <div class="col-md-4">  
        <h2>Web Hosting</h2>  
        <p>You can easily find a web hosting company that offers the right mix of features and price  
        for your applications.</p>  
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">  
        Learn more</a></p>  
    </div>  
</div>