CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap

3
Bài viết này Lập trình không khó sẽ hướng dẫn bạn cách xây dựng các chức năng CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap kết nối tới SQL Server. CRUD là viết tắt của Create – Read – Update – Delete, đó là các chức năng không thể thiếu của mọi ứng dụng có thao tác với cơ sở dữ liệu.

AJAX và Bootstrap là gì?

AJAX (Asynchronous JavaScript and XML) trong các ứng dụng web được sử dụng để cập nhật một phần của trang web và lấy dữ liệu từ máy chủ bất đồng bộ. AJAX giúp cải thiện hiệu năng của ứng dụng web và làm cho ứng dụng thân thiện với người dùng hơn.

Bootstrap là một trong các Framework phổ biến của HTML, CSS và JS được xây dựng cho mục đích “reponsive”, tương thích trên nhiều kích thước màn hình khác nhau.

Xây dựng các chức năng CRUD

Đầu tiên, bạn hãy tạo mới một “ASP.NET Web Application”.

Chọn “Empty ASP.NET MVC template” và click OK.

Bây giờ, click chuột phải ở tên Project và click vào “Manage NuGet Packages”
Tìm kiếm từ khóa “Bootstrap” và sau đó nhấp vào button Install.
Sau khi cài đặt package, bạn sẽ thấy 2 thư mục mới là Content và Scripts được thêm vào Solution Explorer.
Bây giờ, hãy tạo mới một cơ sở dữ liệu và thêm 1 bảng(tên bảng là Employee). Đoạn script dưới đây sẽ tạo ra một bảng Employee:
Sau khi bảng được tạo, hãy tạo các “stored procedures” cho việc Select, Insert, Update và Delete.

Click chuột phải vào thư mục Models và thêm class Employee.cs.

Employee.cs Code

Tiếp tục tạo một một class trong thư mục Models có tên là EmployeeDB.cs. Class này đảm nhận việc giao tiếp với cơ sở dữ liệu. Ở đây, tôi sẽ sử dụng ADO.NET để lấy dữ liệu từ SQL.

EmployeeDB.cs code

Click chuột phải vào thư mục Controllers và thêm một “Empty Controller, đặt tên nó là HomeController.

Bây giờ, hãy mở HomeController và thêm vào các action sau:

Click chuột phải vào Index action của HomeController và click chọn “Add View”. Do chúng ta cần sử dụng AJAX và Bootstrap, nên cần thêm liên kết tới chúng ở head section của view này. Chúng ta cũng thêm kết nối tới employee.js – nơi mà ta sẽ code các chức năng CRUD.

Thêm đoạn code sau và Index.cshtml view:

Trong đoạn code trên, chúng ta đã thêm button để thêm mới một Employee. Khi click vào, nó sẽ mở một cửa sổ có các trường để chúng ta điền thông tin và lưu lại. Tôi cũng đã thêm vào 1 bảng để hiển thị danh sách Employee sử dụng AJAX để nạp dữ liệu.

employee.js code

Build và run chương trình, chúng ta sẽ có kết quả như sau:

Adding a Record (Preview)
Editing a Record (Preview)

Delete a Record(Preview)

Link download source code hướng dẫn: CRUDAjax.zip

3 BÌNH LUẬN

ĐỂ LẠI BÌNH LUẬN

Vui lòng nhập nội dung bình luận
Vui lòng nhập tên