Creating a simple CRUD Web Application using ASP.NET MVC 2 (Part 1)

Đầu tiên các bạn tạo 1 project ASP.NET MVC 2 dạng empty project. Sau khi tạo, project sẽ có các thành phần như sau:

Có 2 cách để tạo và kết nối CSDL.

- Cách 1: dùng SQL Server tạo bên ngoài và kết nối với Visual Studio thông qua Server Explorer.
- Cách 2: tạo CSDL và thực hiện kết nối ngay trong Visual Studio.
Ở đây mình sẽ hướng dẫn các bạn tạo CSDL và kết nối ngay trong Visual Studio.
Các bạn thêm thư mục App_Data vào project để lưu trữ tập tin CSDL của mình.

Thư mục App_Data đã được tạo trong project.

Click phải vào App_Data –> Add –> New Item.

Ở cột bên trái chọn Data –> SQL Server Database –> đặt tên cho tập tin –> Add.

Tập tin CSDL dữ liệu vừa tạo đã được xuất hiện trong project.

Để thêm một bảng, click phải vào Table –> Add New Table.

Các bạn thiết lập các thuộc tính cho bảng của mình, chẳng hạn dưới đây là các thuộc tính có trong bảng của mình, trong đó PhoneId là khóa chính.

Đặt tên cho bảng và lưu lại.

Bảng mà chúng ta vừa tạo sẽ được xuất hiện ngay trong cửa số Server Explorer bên trái.

Để đưa dữ liệu vào bảng, click phải vào bảng vừa tạo –> Show Table Data.

Sau đó các bạn tiến hành nhập dữ liệu cần thiết cho bảng của mình.
Bây giờ chúng ta sẽ thực hiện tạo controller, view và model để hoàn thành ứng dụng crud hoàn chỉnh.
Bây giờ chúng ta sẽ thực hiện tạo Model. Click phải vào thư mục Models trong project –> Add –> Add New Item.

Ở đây mình dùng Entity Framework để tạo data model. Cột bên trái bạn chọn Data –> ADO.NET Entity Data Model và đặt tên cho model –> nút Add.

Chọn Generate from database để tạo model từ CSDL mà mình đã tạo trong phần I –> Next.

Chọn CSDL tương ứng –> Next. Visual Studio sẽ tự động sinh cho chúng ta entity connection và lưu vào trong tập tin Web.Config. Bạn hoàn toàn có thể thay đổi chuỗi này, theo mình thì nên để mặc định như vậy.

Chọn table cần thiết –> Finish.

Sau đó, trên màn hình Visual Studio sẽ xuất hiện Model của CSDL.

Bây giờ, chúng ta sẽ tạo controller để xử lý các tác vụ thêm, xóa, sửa và xem thông tin chi tiết. Click phải vào thư mục Controllers trong project –> Add –> Controller.

Đặt tên cho controller và check vào ô bên dưới để Visual Studio tạo giúp chúng ta các phương thức cần thiết –> nút Add.

Bây giờ chúng ta build ứng dụng và xem trên trình duyệt hiển thị những gì. Kết quả là báo lỗi tùm lum

Lý do là chúng ta chưa tạo ra cái View nào cho ứng dụng của chúng ta cả. Mặc định của ứng dụng ASP.NET thông thường nói chung là nó sẽ tìm nhưng tập tin Index.* để hiển thị trước (ưu tiên, dạng như trang chủ). Và để khắc phục vấn đề này, đơn giản chúng ta tạo View cho trang Index.aspx (view engine mặc định trong ASP.NET MVC).
Để thực hiện việc này, các bạn vào trong tập tin HomeController mà chúng ta đã tạo ở trên, click phải vào Index –> Add View.

Ở đây mình bỏ chọn ô Select master page vì không cần đặt trang Index là trang master, chọn ô Create a strongly-typed view –> chọn View data là model mà chúng ta đã tạo lúc trước –> chọn kiểu List vì ta muốn hiển thị danh sách tất cả record có trong table –> nút Add.

Đoạn mã được Visual Studio phát sinh cho trang Index.aspx vừa tạo như sau:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Simp lePhoneNotebook.Models.Phone>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<table>
<tr>
<th></th>
<th>
PhoneId
</th>
<th>
Name
</th>
<th>
PhoneNum
</th>
<th>
Desciption
</th>
<th>
GroupName
</th>
</tr>

<% foreach (var item in Model) { %>

<tr>
<td>
<%: Html.ActionLink("Edit", "Edit", new { id=item.PhoneId }) %> |
<%: Html.ActionLink("Details", "Details", new { id=item.PhoneId })%> |
<%: Html.ActionLink("Delete", "Delete", new { id=item.PhoneId })%>
</td>
<td>
<%: item.PhoneId %>
</td>
<td>
<%: item.Name %>
</td>
<td>
<%: item.PhoneNum %>
</td>
<td>
<%: item.Desciption %>
</td>
<td>
<%: item.GroupName %>
</td>
</tr>

<% } %>

</table>

<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>

</body>
</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Nó chính là cấu trúc của 1 trang Web Forms mà bạn đã từng làm trước đây, và bạn hoàn toàn có thể design nó, dùng ToolBox Control để kéo thả các control vào trang này như thực hiện trên Web Forms. Từ đây, các bạn có thể nhận thấy rằng, ASP.NET MVC là một nền tảng mới dựa trên ASP.NET nhưng nó không phải ra đời để thay thế cho Web Forms.