Tutorial: 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:

crud_aspmvc_1

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.

crud_aspmvc_3

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

crud_aspmvc_4

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

crud_aspmvc_5

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

crud_aspmvc_6

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

crud_aspmvc_7

crud_aspmvc_8

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

crud_aspmvc_9

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.

crud_aspmvc_10

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

crud_aspmvc_11

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.

crud_aspmvc_12

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

crud_aspmvc_13

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.

 

crud_aspmvc_14

Ở đâ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.

crud_aspmvc_15

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

crud_aspmvc_16

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.

crud_aspmvc_17

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

crud_aspmvc_19

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

crud_aspmvc_20

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.

crud_aspmvc_21

Đặ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.

crud_aspmvc_22

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 Nyah-Nyah.

crud_aspmvc_23

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.

crud_aspmvc_24

Ở đâ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.

crud_aspmvc_25

Đ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<SimplePhoneNotebook.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.

crud_aspmvc_26

Kết quả trên trình duyệt sau khi build ứng dụng.

crud_aspmvc_27

(Xem tiếp phần 2)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s