Bài 2.2

Tạo ứng dụng ASP.NET MVC 5 tạo các Url thân thiện với google sử dụng MapRoute và các Url Pattern.

• Trang chủ hiển thị link “Sản phẩm” với mẫu: http://domain//San-Pham/Danh-Sach-San-Pham
• Trang sản phẩm hiển thị danh sách sản phẩm với các link “Xem chi tiết” với mẫu: http://domain/ San-Pham/Ten-san-pham/ma-so. Link “Sửa sản phẩm” với mẫu: http://domain/San-Pham/Sua/ma-so

Bước 1: Kích chuột phải vào Solution “Lab02” -> Chọn Add -> Chọn New Project  Nhập tên project -> Chọn đường dẫn lưu trữ -> Nhấn OK (xem hình dưới).

Nhấn OK -> màn hình tiếp theo xuất hiện bạn chọn template là MVC sau đó chọn Change Authentication -> No Authentication -> OK -> OK

Bước 2: kích chuột phải vào thưc mục Controller -> chọn Add  -> chọn Controller  ->Nhập tên Controller -> Add

Bước 3:  Mở ProductController nhập code theo gợi ý sau:

public class ProductController : Controller

{

// GET: Product

public ActionResult ShowProduct()

{

return View();

}

// GET: Action sửa sản phẩm

public ActionResult EditProduct( int? productId)

{

ViewBag.id = productId;

return View();

}

//GET: Action chi tiết sản phẩm

public ActionResult DetailsProduct(string productName, int? productId)

{

ViewBag.name = productName;

ViewBag.id = productId;

return View();

}

}

Bước 4: Tạo các View cho các Action trong ProductController.

• ShowProduct.cshtml

@{

    ViewBag.Title = "ShowProduct";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Danh Sách Sản Phẩm</h2>

<table class="table table-bordered">

    <thead>

        <tr>

            <th>Mã Sản Phẩm</th>

            <th>Têm Sản Phẩm</th>

            <th>Lựa Chọn</th>

        </tr>

    </thead>

    <tbody>

        @for(int i=1;i<10;i++){

        <tr>

            <td>@i</td>

            <td>Sản Phẩm Thứ @i</td>

            <td>

                @Html.ActionLink("Chi Tiết", "DetailsProduct", new { productName = "Sản Phẩm Thứ " + @i ,productId = @i}) |

                @Html.ActionLink("Sửa", "EditProduct", new { productId=@i})

            </td>

        </tr>

        }

    </tbody>

• EditProduct.cshtml

@{

ViewBag.Title = "EditProduct";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Sửa thông tin chi tiết sản phẩm </h2><br/>

• DetailsProduct.cshtml

@{

 ViewBag.Title = "DetailsProduct";

 Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Thông Tin Sản Phẩm</h2>

<h3> Mã Sản Phẩm : @ViewBag.id</h3>

Bước 5:  Mở Views/Shared/_Layout.cshtml tìm và chỉnh lại như sau:

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li>@Html.ActionLink("Sản Phẩm", "ShowProduct","Product")</li>

</ul>

Bước 6:  Mở tệp tin App_Start/RouteConfig.cs và chèn đoạn MapRoute sau vào trước MapRoute default

//http://domain-name/San-Pham/Danh-Sach-San-Pham

routes.MapRoute(

name: "Show Product",

url: "San-Pham/Danh-Sach-San-Pham",

defaults: new { controller = "Product", action = "ShowProduct" }

);

//http://domain-name/San-Pham

routes.MapRoute(

name: "Product",

url: "San-Pham",

defaults: new { controller = "Product", action = "ShowProduct" }

);

//http://domain-name/San-Pham/Sua/productId

routes.MapRoute(

name: "Edit Product",

url: "San-Pham/Sua/{productId}",

defaults: new { controller = "Product", action = "EditProduct", productId = @"\d{1,4}" }

);

//http://domain-name/San-Pham/productName/productId

routes.MapRoute(

name: "Details Product",

url: "San-Pham/{productName}/{productId}",

defaults: new { controller = "Product", action = "DetailsProduct", productName = (string)null, productId = @"\d{1,4}" }

);

Bước 7: Chạy và quan sát kết quả

• Kích vào link sản phẩm

• Kích vào link Chi tiết

• Kích vào link sửa

Bài 2.1 : Tạo ứng dụng MVC thực hiện các yêu cầu

• Xây dựng trang hiển thị một danh sách các bài hát tương ứng với mỗi bài hát là một nút tải về

• Trang chi tiết hiển thị thông tin bài hát như tên bài hát và cho chạy phát bài hát đó

• Khi kích chuột vào nút tải về thì cho phép trình duyệt mở hộp thoại save là tải bài hát về
• Tạo MapRoute cho Url thân thiện với Google

Nguồn: Devmaster Academy