Thêm Xóa Sửa Nhanh Chóng Với ASP .NET MVC 3

Thêm xóa sửa nhanh chóng với ASP .NET MVC 3

 

I.                 Kết quả:

Xây dựng được ứng dụng web minh họa việc thêm xóa sửa dữ liệu đơn giản và nhanh chóng với sự trợ giúp của công nghệ ASP .NET MVC 3

 

II.              Công cụ sử dụng:

Visual Studio 2010

ASP .NET MVC  3

SQL Server Compact 4.0

Ngôn ngữ: Visual Basic .NET và Razor

 

III.          Thực hiện:

Đầu tiên, tôi xin phân tích sơ bộ về nội dung trang web. Trang web hiển thị 1 số thông tin của các nhân vật trong 1 trò chơi có tên là Dota 2. Đồng thời ta còn có thể thêm xóa sửa dữ liệu. Do đó, cơ sở dữ liệu đơn giản chỉ là: Hero(HeroId, Name, Strength, Agility, Intelligence, AvatarUrl)

Giải thích: Name là tên của nhân vật; 3 trường dữ liệu kế tiếp là chỉ số sức mạnh, nhanh nhẹn, thông minh của nhân vật, AvatarUrl là đường dẫn đến hình nhân vật.

Ứng dụng web của chúng ta chỉ đơn giản cho phép người dùng thêm xóa sửa các Hero khi mở lên.

Trước tiên, chúng ta tạo mới 1 project ứng dụng web ASP.NET MVC 3 bằng cách vào Visual Studio, chọn File / New / Project…

Chọn ngôn ngữ lập trình Visual Basc, chọn Web/ ASP .NET MVC 3 Web Application. Đặt tên project là HeroManagement. Chọn đường dẫn hợp lý. Rồi chọn OK.

Chúng ta sẽ bắt đầu từ Empty template và có sử dụng HTML5 semantic markup, View engine là Razor. Sau khi chọn xong bấm tiếp OK.

Thông thường, chúng ta sẽ bắt đầu tạo cơ sở dữ liệu vật lí. Nhưng ở đây, tôi sẽ sử dụng tính năng Code-First của Entity Framework  4 . Tức là chúng ta từ code model sẽ sinh ngược cơ sở dữ liệu.

Chúng ta tạo lớp Hero như sau. Bằng cách nhấp phải vào folder Model trong cửa sổ Solution Explorer, chọn Add / Class… . Đặt tên class là Hero.

Trong class Hero, chúng ta khai báo 1 số thuộc tính mà ban đầu đã phân tích:

Public Class Hero

    Public Property HeroId As Integer

    Public Property Name As String

    Public Property Strength As Decimal

    Public Property Agility As Decimal

    Public Property Intelligence As Decimal

    Public Property AvatarUrl As String

End Class

 

Sau đó chúng ta tạo tiếp một lớp data context làm nhiệm vụ ánh xạ lên cơ sở dữ liệu. Chúng ta cũng nhấp phải folder Model rồi Add/ Class… . Đặt tên class là HeroManagementEntities.

 

Lớp HeroManagementEntities kế thừa DbContext, chỉ bao gồm một tập các Hero.  Code như sau:

 

Imports System.Data.Entity

 

Public Class HeroManagementEntities

    Inherits DbContext

    Public Property Heros() As DbSet(Of Hero)

End Class

 

Tiếp theo chúng ta quan tâm đến dữ liệu mẫu. Ở đây chúng ta sử dụng tính năng Code-First nên  chúng ta sẽ tạo một lớp dữ liệu mẫu và quy định ứng dụng sẽ nạp các dữ liệu mẫu này một khi có sự thay đổi trên model. Đặt tên lớp là SampleData như sau:

 

Imports System.Data.Entity

 

Public Class SampleData

    Inherits DropCreateDatabaseIfModelChanges(Of HeroManagementEntities)

    Protected Overrides Sub Seed(ByVal context As HeroManagementEntities)

        Dim heros = New List(Of Hero) From {

            New Hero With {.Name = "Ancient Apparition", .Strength = 18, .Agility = 20, .Intelligence = 25, .AvatarUrl = "/Images/ancient_apparition.jpg"},

            New Hero With {.Name = "Anti-Mage", .Strength = 20, .Agility = 22, .Intelligence = 15, .AvatarUrl = "/Images/antimage.jpg"},

            New Hero With {.Name = "Axe", .Strength = 25, .Agility = 20, .Intelligence = 14, .AvatarUrl = "/Images/axe.jpg"},

            New Hero With {.Name = "Beastmaster", .Strength = 23, .Agility = 18, .Intelligence = 16, .AvatarUrl = "/Images/beastmaster.jpg"},

            New Hero With {.Name = "Chen", .Strength = 20, .Agility = 15, .Intelligence = 21, .AvatarUrl = "/Images/chen.jpg"},

            New Hero With {.Name = "Clockwrk", .Strength = 24, .Agility = 13, .Intelligence = 17, .AvatarUrl = "/Images/clockwerk.jpg"},

            New Hero With {.Name = "Crystal Maiden", .Strength = 16, .Agility = 16, .Intelligence = 21, .AvatarUrl = "/Images/crystal_maiden.jpg"},

            New Hero With {.Name = "Dark Seer", .Strength = 22, .Agility = 12, .Intelligence = 29, .AvatarUrl = "/Images/dark_seer.jpg"},

            New Hero With {.Name = "Dazzle", .Strength = 16, .Agility = 21, .Intelligence = 27, .AvatarUrl = "/Images/dazzle.jpg"},

            New Hero With {.Name = "Doom Bringer", .Strength = 26, .Agility = 11, .Intelligence = 13, .AvatarUrl = "/Images/doom_bringer.jpg"}

        }

        heros.ForEach(Function(d) context.Heros.Add(d))

    End Sub

End Class

 

Sau đó tạo thư mục Images chứa các hình có trong dữ liệu mẫu:

 

Dữ liệu mẫu được up kèm theo bài viết này.

Để có thể sinh ngược ra cơ sở dữ liệu, chúng ta cần cung cấp ConnectionString. Mở Web.config kéo xuống cuối file, trước thẻ đóng </configuration>, thêm vào đoạn cấu hình connectString như sau:

 

  <connectionStrings>

    <addname="HeroManagementEntities"

       connectionString="Data Source=|DataDirectory|Hero.sdf"

       providerName="System.Data.SqlServerCe.4.0"/>

  </connectionStrings>

 

Ở đây tôi đang dùng Sql Server Compact 4.0.

Vậy là hoàn tất quá trình chuẩn bị về model và cơ sở dữ liệu, chúng ta build lại ứng dụng.

Tiếp theo chúng ta sẽ tạo Controller và View. Nếu như mỗi lần chúng ta viết những trang quản lý như thế lại phải tạo những Controller thêm xóa sửa rồi ứng với mỗi Action lại phải viết ra những cái View, dù chỉ là copy paste chỉnh sửa nhưng như vậy thật là khổ. MVC sẽ trợ giúp rất lớn cho chúng ta trong vấn đề đó như sau…

Chúng ta nhấp phải vào folder Controllers/ Add Controller. Hộp thoại hiện ra và chúng ta đặt lại các tham số như sau:

Đặt tên và chọn template Controller with read/write actions and views, using Entity Framework. Model class là Hero và Data context class là HeroManagementEntities. Nếu nhấn vào dropdown mà không thấy các class đó thì hãy Cancel và build lại ứng dụng.

Sau khi thiết lập hoàn chỉnh chúng ta nhấn vào Add…

Đợi 1 tí…

Thì HomeController sẽ được tạo ra. Nhưng đây không phải là controller trống rỗng mà đã có sẵn đầy đủ các Action hiển thị, thêm, xóa, sửa. Thật tuyệt vời!

Nhìn qua bên thư mục Views xem:

Các view trên đã được sinh ra tự động và dĩ nhiên cũng không phải là những view trống.

Vậy chúng ta làm tiếp những gì nào? Các bạn chạy thử lên sẽ thấy!

Điều đầu tiên chúng ta phải thấy đó là MVC đã tự tạo ra được table và add vào các chức năng Create, Edit, Details, Delete. Sử dụng thử xem có hoạt động tới đâu nào!

  

Nội dung tương tối đã đầy đủ. Nhưng vẫn còn 1 số hạn chế như:

·         Chưa có kiểm tra dữ liệu khi nhập

·         Chưa có hiển thị hình ảnh

·         Chưa có upload được hình ảnh

·         Chưa có chức năng tìm kiếm

…

Ở bài viết này tôi chỉ sẽ giải quyết mẫu 2 vấn đề thứ 1 và thứ 2, còn lại các bạn có thể tự tìm hiểu nhé

 

1.       Chưa có kiểm tra dữ liệu khi nhập.

Chúng ta sẽ giải quyết vấn đề khi thêm vào 1 Hero thì yêu cầu tên không được bỏ trống. Chỉ số Strength, Agility, Intelligence thì không được bỏ trống và có miền trị [0,100].

Tất cả chỉ gói gọn trong viết chỉnh sửa 1 file duy nhất. Đó là lớp model, cụ thể ở đây là lớp Hero.

Mở lớp Hero lên và thêm các Attributes như sau:

 Imports System.ComponentModel.DataAnnotations

 

Public Class Hero

 

    Public Property HeroId As Integer

 

    <Required(ErrorMessage:="A Hero Name is required")>

    Public Property Name As String

 

    <Required(ErrorMessage:="A Hero Strength is required")>

    <Range(0, 100, ErrorMessage:="Must be between 0.00 and 100.00")>

    Public Property Strength As Decimal

 

    <Required(ErrorMessage:="A Hero Agility is required")>

    <Range(0, 100, ErrorMessage:="Must be between 0.00 and 100.00")>

    Public Property Agility As Decimal

 

    <Required(ErrorMessage:="A Hero Intelligence is required")>

    <Range(0, 100, ErrorMessage:="Must be between 0.00 and 100.00")>

    Public Property Intelligence As Decimal

 

    Public Property AvatarUrl As String

 

End Class

 

Như vậy là đã có thể kiểm tra những trường dữ liệu đó khi người dùng nhập vào. Việc kiểm tra này sẽ thực hiện client hoặc server nên đã đáp ứng đủ yêu cầu của chúng ta. Sở dĩ ứng dụng hiểu được vì trong khi chúng ta cho tự động sinh ra controller và view, các đoạn code xử lý kiểm tra dữ liệu cũng được sinh kèm.

2.       Hiển thị hình ảnh thay vì Url

Ở đây, tôi cũng sẽ chỉ làm mẫu ở view Index, mở file Index.vbhtml lên và tìm đoạn:

        <td>

            @Html.DisplayFor(Function(modelItem) currentItem.AvatarUrl)

        </td>

Thay nội dung bên trong thẻ <td> bằng thẻ html sau:

        <img src="@currentItem.AvatarUrl" />

 

Vậy là xong, chạy lại chương trình sẽ thấy hình ảnh đã được hiển thị:

Chỉnh lại hiển thị 1 chút:

Đó là về nội dung. Vì bản chất là html nên chúng ta có thể vận dụng CSS để có được những giao diện thật đẹp mắt

 

 

 

 

Resource: Images và SampleData: Tải về

Khang

Chia sẻ:

• Facebook
• LinkedIn
• Email
• X
• Thêm

• Reddit
• Tumblr

Thích Đang tải...

Có liên quan