Trong bài viết này Kiên sẽ giới thiệu đến các bạn một cách dễ dàng nhất để tạo ra một SEO URL thân thiện người dùng (user friendly) thông qua ASP.NET MVC qua một ví dụ demo đơn giản.
Đầu tiên chúng ta hãy tạo một project có tên SEOUrl
Chúng ta chọn Project Template là MVC và nhấn OK.
Và đây là toàn bộ project của chúng ta
Hãy chọn Start Debugging (F5) để chạy thử website của chúng ta
Kiên giả sử chúng ta sẽ route lại URL của toàn bộ các trang Account như Login, Register (Kiên sử dụng các trang Account để triển khai nhanh demo của chúng ta, các bạn hoàn toàn có thể tạo ra các trang khác tùy theo mục đích của mình).
Giả sử như Kiên có yêu cầu là muốn thay đổi các URL mặc định là:
localhost\Account\Register
localhost\Account\Login
thành những URL thân thiện hơn như:
localhost\tai-khoan\dang-ky
localhost\tai-khoan\dang-nhap.
Với yêu cầu này, điều chúng ta cần quan tâm trong ASP.NET MVC là chúng ta phải rewrite lại tên của Controller và Action cũng như là các Parameter.
Trong ASP.NET MVC có tính năng rất hay để route, SEO URL của website gọi là URL Routing. Các bạn vào class RouteConfig nằm trong App_Start và thêm mới một route mà chúng ta muốn SEO URL. Chú ý là route nằm trên sẽ được ưu tiên hơn route bên dưới.
Đây là route mới mà Kiên tạo ra theo như yêu cầu bên trên.
//create new route
routes.MapRoute(
name: "Account",
url: "tai-khoan/{action}/{id}",
defaults: new { controller = "Account", action = "Index", id = UrlParameter.Optional }
);
Route mới của chúng ta có các giá trị:
- name: là tên của route chúng ta, chú ý đây là giá trị định danh và không được trùng.
- url: là URL pattern của route. Giá trị mặc định là "{controller}/{action}/{id}" và chúng ta hoàn toàn có thể custom lại. Ở đây Kiên đang tạo ra một route có URL là "tai-khoan/{action}/{id}". Các bạn chú ý là "tai-khoan" ở đây Kiên không khai báo dấu "{...}", điều này có nghĩa là nó sẽ được fix cứng trên và không thay đổi được trong URL, mục đích là sử dụng riêng cho các trang Account. Còn {action}/{id} được khai báo có dấu "{...}" đồng nghĩa action và id sẽ được thay đổi tùy theo giá trị đưa vào.
- defaults: là các giá trị mặc định của route bao gồm Controller, Action, ID tương ứng mà chúng ta khai báo trong url. Route của chúng ta sẽ mặc định sử dụng cho controller Account và các Action tương ứng của nó.
Sau khi thêm route mới, hãy Start Debugging (F5) để xem lại URL của các trang trong Account.
Trang Register: localhost\tai-khoan\Register
Trang Login: localhost\tai-khoan\Login
Các bạn sẽ thấy nó đã được route lại controller Account. Chúng ta cũng kiểm tra lại các trang khác ngoài Account để đảm bảo không bị ảnh hưởng sau khi chúng ta route Account.
Rất dễ dàng phải không! Nhưng khoan, chúng ta còn phải làm gì nữa. Hãy xem lại yêu cầu nào.
localhost\tai-khoan\dang-ky
localhost\tai-khoan\dang-nhap.
Chúng ta mới chỉ route lại controller Account thành tai-khoan. Còn các action thì sao? Trong ASP.NET MVC chúng ta không thể tạo ra trực tiếp một action có tên là dang-ky hay dang-nhap. Thật may là ASP.NET MVC cho chúng ta giải pháp thay thế là thông qua việc sử dụng attribute [ActionName]. Attribute [ActionName] sẽ thay tên đổi họ cho action method của nó trong toàn hệ thống.
Hãy cập nhật lại action Register như sau:
- Thêm attribute [ActionName("dang-ky")] trước dòng khai báo public ActionResult Register().
- Thay đổi return View() thành return View("Register") để trả về view mà chúng ta mong muốn. Nếu bạn không làm bước xác định cụ thể view, mỗi khi bạn gọi đến action này thì nó sẽ tìm view mặc định tương ứng với ActionName hiện tại là "dang-ky" và khi đó thì chúng ta sẽ nhận được lỗi là không tìm thấy View.
//
// GET: /Account/Register
[AllowAnonymous]
[ActionName("dang-ky")]
public ActionResult Register()
{
return View("Register");
}
Chúng ta cũng cập nhật là action Login như đoạn code bên dưới.
//
// GET: /Account/Login
[AllowAnonymous]
[ActionName("dang-nhap")]
public ActionResult Login(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View("Login");
}
Tiếp theo là chúng ta cần phải thay đổi lại ActionName trong các link đang gọi đến các action này.
Cuối cùng hãy Start Debugging (F5) để kiểm tra kết quả cuối cùng
Trang Đăng ký:
Trang Đăng nhập:
Các bạn có thể DOWNLOAD SOURCE CODE Ở ĐÂY
Đây là một số bước đơn giản để chúng ta có thể tạo ra SEO URL thân thiện người dùng trong ASP.NET MVC. Nếu có trao đổi hay thắc mắc thì các bạn có thể để lại comment bên dưới bài viết này.
Share to be shared.
No comments:
Post a Comment