Aspx.net / MVC — August 14, 2016 at 5:14 pm

Chương 3: Tạo dự án MVC 3 bằng Visual Studio 2012 Và Routed trong MVC (P2)

by

1. Xây dựng Controller :

// Tạo mới 1 Controller ( Chuột phải vào thư mục Controller , chọn AddController , đặt tên Controller, mục template ta chọn Empty MVC Controller như hình sau :

Lựa chọn các thông số để VS tự động sinh mã cho Controller như hình sau :

// Ở đây ta đặt tên Controller là Sample1Controller :

// Mã Sample1Controller như sau :

 

public class Sample1Controller : Controller

{

public ActionResult Index()

{

return View(Person.GetData(10));

}

}

Phân tích :

Ở đây Sample1Controller kế thừa lại lớp Controller ( 1 lớp Microsoft cung cấp sẵn trong thư viện Asp.net MVC ) .

// Ta chú ý tới Action Index là 1 ActionResult , Action này trả về 1 View ( kiểu html )

// Trong Controller có thể có các phương thức trả về các kiểu dữ liệu thông thường như là string , int , class …

// Action Index trả về 1 View ( các thẻ html) .View này có tên là Index và phải đặt trong thư mục : View/Sample1/Index.cshtml.View này dùng hiển thị dữ liệu danh sách Person .Phương thức Person.GetData(10) trả về danh sách 10 Person , và sẽ được hiển thị lên View .

2. Xây dựng View :

– Ta tạo View Index như sau :

// Chuột phải lên Action Index chọn add View , hoặc tạo thư mục Sample1 trong thư mục View , Chuột phải chọn Add View  như hình sau :

Hoặc Chuột phải vào thư mục View có tên trùng với tên Controller tương ứng :

Đặt các thông số cơ bản sau để VS tự động sinh mã :

Chú ý :

// Ta phải build Project ( Chuột phải vào Project chọn Build , nếu là các lần sau chọn Rebuild) thì mới hiện lớp Person để ta lựa chọn .

// Layout là là 1 file để các View khác kể thừa ( tương tự như masterpage trong Asp web form ) .Hiện tại tam thời ta không quan tâm tới file _Layout.cshtml code như thể nào .Việc xây dựng layout dẽ được học trong các bài học tiếp .

Ở đây ta tạo các thông số để VS tự động sinh mã Razor để hiển thị ( Việc từ Razor sinh ra mã HTML là nhiệm vụ của Razor View Engine ) .

Khi đã có kiến thức , và kinh nghiệm các bạn có thể tùy biến tự tạo View , mà không cần để VS sinh sẵn mã máy .Tuy nhiên mã máy hoàn toàn đáp ứng được các yêu cầu cơ bản .

// Mã View do VS sinh ra sẽ như sau :

 

@model IEnumerable<Mvc3App.Models.Person>

 

@{

ViewBag.Title = “Index”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

 

<h2>Index</h2>

 

<p>

@Html.ActionLink(“Create New”, “Create”)

</p>

<table>

<tr>

<th>

Name

</th>

<th></th>

</tr>

 

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.Name)

</td>

<td>

@Html.ActionLink(“Edit”, “Edit”, new { id=item.ID }) |

@Html.ActionLink(“Details”, “Details”, new { id=item.ID }) |

@Html.ActionLink(“Delete”, “Delete”, new { id=item.ID })

</td>

</tr>

}

 

</table>

// Ta  thấy Razor dùng thẻ table của Html để hiển thị dữ liệu .

// Chạy ứng dụng và gõ đường dẫn : /Sample1

( đường dẫn đầy đủ là : http://localhost:12422/Sample1)

// Giá trị http://localhost:12422 tùy vào cổng đang trống của máy các bạn .

Kết quả hiển thị danh sách Person như hình sau :

.Các tính năng trên thẻ link Create , Delete , Edit , Details ta chưa xây dựng

Trong các ví dụ dưới đây , khi muốn chạy thử 1 ví dụ nào đó các bạn chỉ cần chạy ứng dụng và nhập vào Controller và Action tương ứng .Ví dụ muốn chạy xem Action1 của Controller1 ta chạy ứng dụng và nhập thêm địa chỉ như sau :

/Controller1/Action1/

3.  Mô hình MVC không đầy đủ

– Không phải mô hình MVC cần có đầy đủ các đối tượng Model , View hay Controller .

– Có những Action không trả về dư liệu từ CSDL ( tức là ta không cần dùng Model ) Hay có trường hợp Action không trả về View ( kiểu html ) mà chỉ trả về 1 kiểu dữ liệu thông thường như int , string hay kiểu json hoặc trả về 1 file … khi này không cần tới View .Việc gọi tới các Action này thường thông qua các lời gọi ajax từ các View khác

– Xét ví dụ không dùng đến Model

( Xem mã nguồn Vidu1Controller và View Index tương ứng )

ViDu1Controller :

 

public ActionResult Index()

{

return View();

}

Index View :

 

<h1>Hello world</h1>

<h2>Đây là View Index của Vidu1Controller</h2>

– Ta thấy View chỉ dùng các thẻ html để hiển thị thông tin .

Chạy ứng dụng và gọi Vidu1Controller ( /vidu1) ta được kết quả như hình sau :

Nguồn: laptrinhviet.net

Leave a Comment

Your email address will not be published. Required fields are marked *