Bài 4 – Add a model

Bài dưới đây hướng dẫn các bước để add Model và sử dụng Model trong MVC Core 1.1

  • Click chuột phải và tạo thư mục mới trong thư mục gốc của dự án với tên Models
  • Add class Movie.cs trong thư mục Models với thuộc tính chi tiết như sau
namespace WebApp1.Models
{
 public class Movie
 {
 public int ID { get; set; }
 public string Title { get; set; }
 [DataType(DataType.Date)]
 public DateTime ReleaseDate { get; set; }
 public string Genre { get; set; }
 public decimal Price { get; set; }
 }
}
  • Add Scaffolding a controller. Right-click the Controllers folder > Add > Controller

add_controller[1]

Chọn Minimal Dependencies

  • Biên dịch lại Project và Click chuột phải trên thư mục Controllers > Add > Controller

  • Sau đó gõ các thiết lập như sau

  • Click Add để tạo Controller
    • Movies controller (Controllers/MoviesController.cs) được tạo ra
    • Razor view để thực hiện các chức năng Create, Delete, Details, Edit và Index (Views/Movies/\.cshtml*) cũng được tạo ra trong thư mục Views/Movies
  • Một số bước thiết lập cuối trước khi test thử chương trình
    • Add EF tooling for Migrations: MvcMovie project > Edit MvcMovie.csproj.

  • Bổ sung “Microsoft.EntityFrameworkCore.Tools.DotNet” NuGet package:
<ItemGroup> 
     <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0" />  
     <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="1.0.0" /> 
</ItemGroup>
  • Từ Run > cmd để mở cửa sổ Console
  • Chuyển đến thư mực gốc của ứng dụng web
  • Gõ các lệnh sau để tạo csdl
dotnet restore 
dotnet ef migrations add Initial 
dotnet ef database update
  • Nhấn F5 để chạy và kiểm tra kết quả

Bài 3 – Add a view

Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1
Bài 2 – Add Controllers

Trong phiên bản ASP.NET Core 1.1, cấu trúc thư mục và thao tác thực hiện có khác hơn so với VS 2015/2013 trước đây.

Để thức hiện tạo View mới, trước hết tạo thư mục trong thư mục Views, ví dụ tạo thư mục HelloWorld để sử dụng tiếp các Action method của HelloWorlcController.cs

public IActionResult Index()
{
      return View();
}

  • Kích phải chuột trên Views folder,  Add > New Folder và đặt tên HelloWorld.
  • Right click trên thư mục Views/HelloWorld,  sau đó Add > New Item.
  • In the Add New Item – dialogadd_view[1]
  • Đặt tên Index.cshtml và click nút Add
  • Viết lại View như sau và nhấn F5 để kiểm tra
@{ ViewData["Title"] = "Index"; } 
<h2>Indexh2> 
<p>Hello from our View Template!p>
  • Kết quả khi chạy như sau

hell_template[1]

Bài 2 – Add Controllers

Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1

Kiến trúc (mẫu) Model-View-Controller (MVC) cho phép thiết kế ứng dụng thành 3 thành phần chính: Model, View, Controller. Kiến trúc MVC cho phép chúng ta dễ dàng kiểm thử và cập nhật ứng dụng hơn so với lập trình truyền thống (vì tách ứng dụng ra thành các modules: Model, View, Controller riêng).

  • Models: đảm trách phần dữ liệu của ứng dụng, các thiết lập ràng buộc, truy cập dữ liệu của ứng dụng thực hiện qua thành phần này
  • Views: thành phần đảm trách giao diện của ứng dụng, thông thường hiển thị dữ liệu từ model hoặc cho phép người dùng tương tác với hệ thống.
  • Controllers: điều khiển các yêu cầu từ người dùng (trình duyệt) . Controllers đọc dữ liệu từ model và gọi view để hiển thị dữ liệu cho người dùng.

Bài này hướng dẫn tạo Controllers trong ASP.NET Core MVC 1.1, các bước chi tiết như dưới đây:

  • Right-click Controllers > Add > New Item
  • Chọn MVC Controller Class

ac[1]

  • Controller được tạo ra như sau

2

  • Mỗi phương thức public(ActionMethod) trong controller là một Http Endpoint
  • Ví dụ, chúng ta gọi phương thức Index và phương thức Welcome theo đường dẫn như sau
  • MVC gọi các controller classes và các phương thức trong controller dựa trên URL của request. Cấu trúc logic của URL được sử dụng bởi MVC theo định dạng dưới đây để xác định phương thức nào được gọi:

    /[Controller]/[ActionName]/[Parameters]

    Thiết lập này được chỉ ra trong file Startup.cs

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

Bài 1 – Tạo dự án mới ASP.NET Core MVC 1.1

Tạo dự án mới với ASP.NET Core MVC 1.1

Bài hướng dẫn này sử dụng Visual Studio 2017 – bạn download và cài đặt VS 2017 từ địa chỉ của Microsoft Visual Studio 2017

  • Từ Visual Studio, chọn File > New > Project
  • Chọn Net Core > Chọn ASP.NET Core Web Application

new_project2[1]

  •  Chọn ASP.NET Core 1.1 > Web Application

p3[1]

  • Nhân F5 hoặc Ctrl + F5 để chạy, kết quả như màn hình sau

1[1]

  • Như vậy là đã thành công với việc tạo và chạy thử dự án đầu tiên của ASP.NET Core MVC 1.1

Ở phiên bản này, cấu trúc thư mục và các file khác nhiều so với phiên bản trước đây của ASP.NET MVC 4.6/4.5. Hình dưới đây là cấu trúc file và thư mục của dự án ASP.NET Core MVC 1.1

1

Cài Node.js tích hợp Visual Studio 2013

Các bước dưới đây hướng dẫn cài Node.js tích hợp Visual Studio 2013

  • Download Node.js tools for Visual Studio 2013 ở địa chỉ sau

Node.js tools for Visual Studio 2013

  • Sau khi tải xong, chạy file để cài Node.js tools for VS 2013
  • Màn hình cài đặt thành công như sau

nodejs

  • Node.js template trong VS 2013

nodejs_temp

Giao diện dự án được tạo trong VS

nodejs_temp2

Nhấn F5 để chạy thử và xem kết quả.

File manager with CKFinder

File manager with CKFinder – Quản lý file với CKFinder

Các bước dưới đây hướng dẫn sử dụng CKFinder để quản lý và upload file với ASP.NET MVC

  • Download CKFinder và chép vào thư mục gốc của website
  • Trước thẻ </body> của trang _Layout.cshtml chèn thêm đoạn mã sau
ckfinder3
  •  Trong view cần dùng CKFinder để chèn ảnh, upload ảnh bổ sung đoạn mã sau
<input id="xFilePath" name="FilePath" type="text" class="input-block-level" />
<input type="button" value="Browse Server" onclick="BrowseServer();" class="controls" />

Lưu ý ID của điều khiển tương ứng với tên sử dụng trong phương thứ SetFileField(..)

Sau khi chạy kết quả hiển thị như hình sau

ckfinder1

Khi người dùng click nút Browse Server, màn hình như ảnh sau

ckfinder2