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

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

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

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

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

Bây giờ, click chuột phải ở tên Project và click vào “Manage NuGet Packages”
CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap 3
Tìm kiếm từ khóa “Bootstrap” và sau đó nhấp vào button Install.
CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap 4
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.
CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap 5
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:
CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap 6
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.

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

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)
CRUD trong ASP.NET MVC sử dụng AJAX và Bootstrap 8Editing a Record (Preview)

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

Delete a Record(Preview)

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

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

avatar
3 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Phan Trung KienĐôngNguyễn Văn HiếuNguyễn Văn Hiếu Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Nguyễn Văn Hiếu
Guest
Nguyễn Văn Hiếu

Đây là 1 bình luận test hệ thống

Đông
Guest
Đông

bài viết khá hay

Phan Trung Kien
Guest
Phan Trung Kien

Cam on Anh!!!!