Đây là một mô hình lập trình web mà được ông lớn microsoft tích hợp vào ASP để viết Web mô hình MVC và nó có tên là ASP.NET MVC.
Bài viết này là phần tổng hợp cũng như là những kinh nghiệm đúc kết mà mình học từ series ASP.NET MVC của trang dammio.com.
ASP.NET MVC là 1 phần mềm mã mở, tách rời với thành phần độc quyền ASP.NET Web Forms.
3 vai trò: Model, View và Controller:
Một số phiên bản đáng chú ý như MVC4, MVC5, MVC6 và phiên bản mới nhất là ASP.NET Core MVC 2.0.0, phát hành ngày 14 tháng 8 năm 2017.
=> Chúng ta sẽ tiếp cận MVC5
Link bài viết: [ASP.NET MVC] Phần 1: Giới thiệu ASP.NET MVC
Tạo ứng dụng đầu tiên
Bạn mở VS 2013, chọn File -> New -> Project, một cửa sổ New Project sẽ hiện lên. Trong cửa sổ này, phần bên trái, bạn chọn Visual C#, phần bên phải chọn ASP.NET Web Application, đặt tên dự án.
Tiếp theo chọn dự án là kiểu MVC và nhấn OK.
Bạn được kết quả giao diện ban đầu khi khởi chạy ứng dụng.
Trong ứng dụng mặc định, bạn có 3 trang chính Home, About và Contact. Ứng dụng mặc định cũng dùng giao diện Bootstrap.
Bạn mở Solution Explorer (View -> Solution Explorer hoặc phím tắt Ctrl + Alt + L) để xem cấu trúc thư mục web.
Trong hình trên, một số giải thích cơ bản về cấu trúc thư mục, tập tin là:
Link bài viết: [ASP.NET MVC] Phần 2: Tạo website ASP.NET MVC đầu tiên
Tạo một controller mới:
Ở cửa sổ Solution Explorer, chuột phải lên thư mục Controllers => Add => Controller.
Ở hộp thoại Add Scaffold, chọn MVC 5 Controller – Empty => Add.
Sau đó, đặt tên Controller.
Lưu ý: bạn nên để tiền tố “Controller” cuối cùng khi đặt tên để dễ phân biệt lớp code nào là Controller.
ASP.NET MVC sẽ gọi các lớp controller khác nhau (kèm theo các phương thức) tùy theo URL đầu vào. Mặc định URL có định dạng:
…/[Controller]/[ActionName]/[Parameters] // ...: địa chỉ website // Controller: là tên phần đầu của Controller // ActionName: là tên phương thức // Parameters: là các tham số đầu vào của các phương thức
Lấy một ví dụ: Bạn có phương thức chào mừng trong DammioController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DammioMVC.Controllers
{
public class DammioController : Controller
{
//
// GET: /Dammio/ChaoMung/
public string ChaoMung(string ten, int tuoi = 1)
{
return HttpUtility.HtmlEncode("Xin chào " + ten + ". Tuổi của bạn là: " + tuoi);
}
}
}
// -----------------Routing cho phương thức ChaoMung-----------------//
// http://localhost:3456/Dammio/ChaoMung?ten=Dammio&tuoi=20
Bạn có thể vào tập tin App_Start/RouteConfig.cs và chỉnh cấu trúc đường dẫn. Ví dụ chỉnh cấu trúc đường dẫn thành {action}/{controller}/{id}. Bạn hãy thay đổi mục url
namespace test
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
//routes.MapRoute(
// name: "Default",
// url: "{controller}/{action}/{id}",
// defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
//);
routes.MapRoute(
name: "Default",
url: "{action}/{controller}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}
Bạn sẽ thêm cấu hình cho Controller như sau vào App_Start/RouteConfig.cs (chèn sau định nghĩa route mặc định)
routes.MapRoute(
name: "Dammio",
url: "{controller}/{action}/{ten}/{tuoi}"
);
Code đầy đủ của App_Start/RouteConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace DammioMVC
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Dammio",
url: "{controller}/{action}/{ten}/{tuoi}"
);
}
}
}
Lúc này đường dẫn Route sẽ thay đổi như sau:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DammioMVC.Controllers
{
public class DammioController : Controller
{
//
// GET: /Dammio/ChaoMung/
public string ChaoMung(string ten, int tuoi = 1)
{
return HttpUtility.HtmlEncode("Xin chào " + ten + ". Tuổi của bạn là: " + tuoi);
}
}
}
// -----------------Routing cho phương thức ChaoMung-----------------//
// http://localhost:3456/Dammio/ChaoMung/Dammio/0
Link bài viết: [ASP.NET MVC] Phần 3: Thêm mới Controller (điều khiển)
Bạn xem mục số 7 nhé!
Để tạo một View mới, bạn chọn thư mục Views/xxx trong Solution Explorers (xxx là tên thư mục controller tương ứng cần tạo view), sau đó chuột phải chọn Add -> MVC5 View Page with Layout (Razor).
Lưu ý, bạn phải thêm View tương ứng với Controller. Ví dụ, bạn có Controller tên là ABCController, thì lúc thêm View bạn phải thêm vào thư mục Views/ABC.
Sau đó, bạn phải đặt tên View vào hộp thoại, ví dụ Index và nhấn OK.
Tiếp theo, bạn chọn Layout (bố cục) cho View. Khi tạo dự án MVC thì Visual Studio để tạo cho bạn View mặc định là _Layout.cshtml, bạn có thể tạo bất cứ layout nào nếu muốn.
Sau khi bạn tạo xong, một tập tin Index.cshtml sẽ được tạo trong thư mục Views/Dammio vói nội dung mã nguồn như sau.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Đầu tiên, một người dùng sẽ chạy đường dẫn http://localhost:xxxx/Dammio/Index, server sẽ dò tìm và biết được đường dẫn này thuộc về tập tin DammioController.cs với phương thức Index(). Tiếp tục, server sẽ thực thi nội dung trong phương thức Index() và trả về dòng lệnh return View(). Vì đây là phương thức Index trả về View, server sẽ dò tìm đúng tập tin có tên Index.cshtml nằm trong thư mục Views/Dammio. Tiếp theo, server đọc nội dung Index.cshtml và hiển thị mã HTML trên màn hình.
Bạn mở tập tin bố cục _Layout.cshtml ở thư mục /Views/Shared trong cửa sổ Solution Explorer:
ActionLink(string linkText, string actionName, string controllerName)
//linkText: là văn bản hiển thị trên đường dẫn
//actionName: là tên phương thức
//controllerName: là tên controller
//------------Cách dùng------------//
@Html.ActionLink("Liên kết", "Hello","Dammio")
//nó sẽ chuyển mã HTML như sau:
<a href="/Dammio/Hello">Liên kết</a>
Sử dụng biến ViewBag – là 1 thuộc tính động (dynamic), nó lưu trữ tất cả biến cần đẩy về. Ngoài ra, bạn còn có thể dùng ViewData (kiểu từ điện đối tượng) và TempData.
Ở Controller
public ActionResult Hello(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
Ở View
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Hello";
}
<h3>Đây là nội dung của tập tin Hello.cshtml được xử lý từ phương thức Hello ở controller Dammio (DammioController).</h3>
<ul>
@for (int i = 0; i < ViewBag.NumTimes; i++)
{
<li>@ViewBag.Message</li>
}
</ul>
Link bài viết: [ASP.NET MVC] Phần 4: Thêm mới View
Khi lập trình ASP.NET, có lẽ bạn bắt buộc làm quen với công nghệ truy cập dữ liệu .NET Framework, hay còn gọi là Entity Framework (EF). Theo đó, EF sẽ tự động gieo Model cho ứng dụng ASP.NET MVC theo nhiều cách khác nhau như Code First, Database First và Model First.
Mình sẽ tạo theo DatabaseFirst.
Bạn lưu ý rằng bạn phải có cơ sở dữ liệu trước nhé.
Trong cửa sổ Solution Explorer, chuột phải lên thư mục Model, chọn Add -> New Item.
Tiếp đến, bên cột trái chọn Data và khung chính bên phải chọn ADO.NET Entity Data Model, và đặt tên mô hình Model.edmx (thay đổi cho phù hợp).
Tiếp theo, bạn chọn Generate from database.
Tiếp theo, trong cửa sổ kết nối tới Database, chọn nút New Connection… và đợi một chút cửa sổ Choose Data Source hiện ra, bạn chọn Microsoft SQL Server (Client). Sau đó, chọn server và cơ sở dữ liệu bạn muốn gieo mã nguồn.
Tiếp theo, bạn chọn tên chuỗi kết nối (ConnectionString) trong Web.Config tên là DammioMVCEntities(thay đổi cho phù hợp) và nhấn Next.
Tiếp theo, bạn chọn bảng để gieo mã nguồn như hình. Cuối cùng, nhấn Finish để Entity Framework gieo mô hình mã nguồn vậy là xong.
Sau khi EF gieo xong mã nguồn mô hình, bạn mở Model ra xem thấy cấu trúc thư mục đã hiện các lớp mã nguồn mới như sau.
Chọn tập tin Models/Model.edmx, sau đó mở tập tin này ra bạn thấy sơ đồ cấu trúc các bảng như sau.
Chọn chuột lên vùng trống ở giao diện mô hình khi mở tập tin Model.edmx, chọn chuột phải, chọn Update model from Database…
Sau đó, bạn chọn chế độ Refresh dành cho các bảng đã thêm vào mô hình hoặc Add dành cho các bảng mới. Sau khi thao tác xong thì chọn Finish.
Trong trường hợp có lỗi phát sinh mà bạn không thể sửa được, cách tốt nhất là xóa toàn bộ nội dung trong thư mục Models và gieo lại mô hình.
Link bài viết: [ASP.NET MVC] Phần 5: Thêm Model (mô hình)
Mở tập tin Web.config:
<add name="DammioMVCEntities"
connectionString="metadata=res://*/Models.Model.csdl|res://*/Models.Model.ssdl|res://*/Models.Model.msl;
provider=System.Data.SqlClient;
provider connection string="
data source=(local);
initial catalog=DammioMVC;
integrated security=True;
MultipleActiveResultSets=True;
App=EntityFramework""
providerName="System.Data.EntityClient"
/>
Khi đưa lên server có IP database là 192.168.1.1 và có tài khoản đăng nhập User là “user” và Pass là “pass” thì bạn thay đổi chuỗi kết nối như sau:
<add name="DammioMVCEntities"
connectionString="metadata=res://*/Models.Model.csdl|res://*/Models.Model.ssdl|res://*/Models.Model.msl;
provider=System.Data.SqlClient;
provider connection string="
data source=192.168.1.1, 1433;
initial catalog=DammioMVC;
User ID=user;
Password=pass;
Integrated Security=False;
MultipleActiveResultSets=True;
App=EntityFramework""
providerName="System.Data.EntityClient"
/>
Link bài viết: [ASP.NET MVC] Phần 6: Tìm hiểu về các chuỗi kết nối cơ sở dữ liệu (connection strings)
Tạo Controler (Tạo xong nó sẽ tự tạo view cho mình luôn)
Ở Solution Explorer, chuột phải chọn thư mục Controllers, và nhấn Add, sau đó chọn Controller.
Ở hộp thoại Add Scaffold, chọn mục MVC 5 Controller with views, using EntityFramework và nhấn Add.
Sau đó, đối với tên Controller, bạn đặt tên của Controller (nhớ là tên + Controller nhé). Chọn Link (DammioMVC.Models) (Chọn tên bảng của bạn) tại Model class và chọn DammioMVCEntities (DammioMVC.Models) (tên lúc tạo model) cho Data context class. Bạn có thể dùng Layout mặc định nếu muốn (~/Views/Shared/_Layout.cshtml). Tiếp theo, nhấn Add, Visual Studio sẽ tạo các tập tin và thư mục.
Sau đó, hãy đợi một chút, Visual Studio sẽ tự động tạo mã nguồn tập tin LinkController.cs trong thư mục Controllers và tạo thư mục Views/Link chứa các tập tin Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, và Index.cshtml. Bạn có thể bật cửa sổ Solution Explorer (Ctrl + Alt + L) để xem tổng quan các tập tin mới tạo.
Visual Studio sẽ tự động tạo các phương thức CRUD (create, read, update, và delete) và kèm theo giao diện (views) vì vậy với ASP.NET MVC, bạn có thể thực hiện làm giao diện trang Admin rất nhanh.
Mình thật sự bất ngờ khi làm tới đây. Mọi thứ được tạo sẵn từ create, update, delete, hiển thị danh sách, hiển thị một record. Trời ơi, mọi lần làm php, laravel đồ cực khổ lắm mới làm được mấy này, còn bây giờ Visual Studio làm tất. Nhưng nhược điểm làm phải quay lại tìm hiểu nó viết thế nào ^_^.
Link bài viết: [ASP.NET MVC] Phần 7: Truy cập mô hình dữ liệu từ Controller
namespace DammioMVC.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations; // thêm bằng tay
public partial class Link
{
public int LinkID { get; set; }
[Display(Name = "Tên liên kết")] // thêm bằng tay
public string LinkName { get; set; }
public string LinkURL { get; set; }
public string LinkDescription { get; set; }
public Nullable<int> CategoryID { get; set; }
}
}
Tập tin View/Link/Edit.cshtml
Quy trình xử lý edit: Thuộc tính ValidateAntiForgeryToken kiểm chứng token => lấy các giá trị cần post ở form => một đối tượng Link => đẩy các giá trị này vào và kiểm chứng dữ liệu bằng phương thức ModelState.IsValid => gửi đi đến server để cập nhật hay chỉnh sửa. Nếu dữ liệu đầu vào hợp lệ, dữ liệu sẽ lưu vào tập hợp Link của db (thể hiện DbContext). Dữ liệu Link được lưu vào database thông qua phương thức SaveChanges. Sau đó, đoạn mã sẽ quay về giao diện trang Index của lớp LinkController, nơi hiển thị tất cả các Link, bao gồm những thay đổi vừa xảy ra.
Globalize (Định dạng ngày tháng, tiền tệ): bạn xem trong bài viết dưới nhé.
Link bài viết: [ASP.NET MVC] Phần 8: Tìm hiểu về các phương thức Edit và View Edit
Unable to update the EntitySet ‘Link’ because it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionMapping> element to support the current operation.
Bạn gặp lỗi này khi chưa set khóa chính cho bảng trong cơ sở dữ liệu.
Cách khắc phục: đặt khóa chính cho bảng và update lại model và nhớ build project lại nhé.
