Bài 7 – Bổ sung chức năng tìm kiếm

Bài 6 – Add a new field and update database

Bài 5 – SQL Server LocalDB

Bài 4 – Add a model

Bài 3 – Add a view

Bài 2 – Add Controllers

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

Bài này hướng dẫn bổ sung chức năng tìm kiếm cho form Index.cshtml

  • Thay đổi trong trang Index.cshtml, bổ sung form tìm kiếm

<p>
<a asp-action=”Create”>Create New</a>
</p>

5

  • Mở MoviesController.cs và thay đổi đoạn mã sau trong Index method

6

  • Nhấn Ctrl+F5 để chạy và kiểm tra kết quả như  màn hình sau

7

Advertisements

Bài 6 – Add a new field and update database

Bài 5 – SQL Server LocalDB

Bài 4 – Add a model

Bài 3 – Add a view

Bài 2 – Add Controllers

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

Hướng dẫn dưới đây để thực hiện add thêm một trường mới cho bảng dữ liệu và đồng bộ cơ sở dữ liệu.

Add thêm trường Rating vào Model class

public class Movie
{
public int ID { get; set; }
public string Title { get; set; }

[Display(Name = “Release Date”)]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
public string Rating { get; set; }
}

Nhấn tổ hợp phím Ctrl+Shift+B để biên dịch project

Sau khi bổ sung thêm trường, cần cập nhật Bind trong Edit và Create method của MovieController.cs

[Bind(“ID,Title,ReleaseDate,Genre,Price,Rating”)]

Bổ sung thêm mã html cho trường Rating trong Create.cshtml, Edit.cshtml, Index.cshtml

  1. Index.cshtml

<th> @Html.DisplayNameFor(model => model.movies[0].Rating) </th>

@foreach (var item in Model.movies)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.ReleaseDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Genre)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.Rating)
</td>
<td>

  1. Edit.cshtml + Create.cshtml

Update database

  • Mở cmd từ dòng lệnh Run
  • Chuyển đến thư mục gốc của ứng dụng web
  • Gõ đoạn migration sau đây để cập nhật csdl

4

 

Bài 5 – SQL Server LocalDB

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

Khi sử dụng LocalDB trong VS 2017, một cố thay đổi và lưu ý về cấu hình như sau

  • Web.config nay được thay bằng appsettings.json, nội dung tham khảo file appsettings.json như sau
{
"Logging": {
"IncludeScopes": false,
 "LogLevel": {
 "Default": "Warning"
 }
 },
"ConnectionStrings": {
 "MvcMovieContext": "Server=(localdb)\\mssqllocaldb;Database=MvcMovieContext;Trusted_Connection=True;MultipleActiveResultSets=true"
 }
}

  • MvcMovieContext được đăng ký trong file Startup.cs như sau

3

  • Mặc định, LocalDB database được tạo ra và lưu trong thư mục C:/Users/<user> với phần mở rộng .mdf
  • Route được đăng ký trong Startup.cs như sau
app.UseMvc(routes => 
{ 
    routes.MapRoute( 
        name: "default", 
        template: "{controller=Home}/{action=Index}/{id?}"); 
});

 

Bài 4 – Add a model

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

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