Xử Lý Form Upload Với ASP.NET MVC 5

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo 1 project sử dụng ASP.NET MVC 5 để thao tác với form.

Như các bạn đã biết, việc thao tác với Cơ sở dữ liệu thông qua Form được sử dụng rất thường xuyên trong lập trình Web nói chung. Ví dụ: Chúng ta có một table Product bao gồm các thuộc tính: ID, Name, Image,… Để thêm mới 1 sản phẩm, ta cần tạo 1 form bao gồm các thuộc tính trên, và điền giá trị vào các thuộc tính trong form, lưu vào CSDL. Nào, chúng ta cùng bắt đầu bước vào thực hiện thôi nào.

1. Bước đầu tiên, chúng ta khởi tạo Project

Chúng ta tạo project để thực hành, ở đây mình dùng VS 2017. Các bạn mở VS 2017, Chọn File > New > Project. Sau đó sẽ xuất hiện cửa sổ lên, các bạn chọn vào Web > ASP.NET Web Application(.NET Framework), điền thông tin như tên Project, thư mục lưu trữ như sau:

Tiếp tục, các bạn chọn OK. Ở cửa sổ tiếp theo, các bạn chọn MVC, click vào Change Authentication chọn No Authentication (Mình sẽ hướng dẫn Authentication trong ASP.NET MVC ở các bài sau). Sau đó chọn OK để tạo Project.

2. Tạo Model và sử dụng Entity Framework Code First Ở đây mình sẽ sử dụng Entity Framework để tạo Table trong Database. Để đơn gian mình chỉ tạo bảng Product bao gồm các thuộc tính như ProductId, ProductName, Description, Status, Image, UrlImage… (các bạn có thể thêm các thuộc tính khác nữa). Mình sẽ hướng dẫn các bạn tạo DB theo EF Code First, các bạn có thể tham khảo document trên trang chủ: https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application

Ban đầu, mình cần tạo 1 Model của Product. Các bạn Click chuột phải vào Model > Add > Class Sau đó thay đổi Name thành Product, tiếp tục chọn Add. Sau đó các bạn thêm các thuộc tính trong class Product vừa tạo như sau: Ở đây mình dùng 2 thuộc tính là Image và UrlImage để lưu trữ hình ảnh. Thuộc tính Image sẽ lưu dạng mã hóa của hình ảnh trong Database, còn UrlImage lưu đường dẫn của hình ảnh trong Folder, đây là 2 cách phổ biến nhất để lưu trữ hình ảnh trong Form. Mính sẽ hướng dẫn các bạn cả 2 cách trên.

Như vậy, các bạn đã tạo xong Model cho Product. Tiếp theo cần tạo Database Context. Các bạn cần thêm Entity Framwork vào Project, thực hiện như sau: * Chọn Tools > NuGet Package Manager > Package Manager Console * Cửa sổ hiện lên PM > * Tiếp theo chạy trong command Install-Package EntityFramework Như vậy bạn đã Install thành công Entity Framwork rồi nhe!

Tiếp theo, ta cần tạo 1 class DB Context để tạo Table trong CSDL, ở đây mình sẽ dùng MSSQL Server.

Chúng ta tạo 1 folder là DAL(Data Access Layer) để chứa DB Context nhé, các bạn click chuộc phải vào Project > Add > Folder, điền tên thư mục vào. Đây là kết quả:

Tiếp theo, các bạn tạo class trong folder DAL này, đặt tên là ProductDbContext

Một class DB Context cần phải được kế thừa từ class Cha đó là DbContext của EF.

Như vậy, ta đã tạo xong ProductDbContext, tiếp theo bạn sẽ tạo connectString để kết nối với MSSQL, các bạn thêm vào Web.config ngoài cùng(Không phải trong folder View nhé). Giá trị name chính là giá trị trong hàm Base() lúc nãy mình nhắc tới, Data Source=.\ tức là sẽ kết nối đến Server MSSQL cài trong máy bạn, Catalog= “chính là tên database bạn muốn tạo, ở đây mình là FormTest”.

Như vậy là chính ta đã tạo được DB từ Model Product và Connect được chúng với nhau rồi, tiếp theo đến tạo Controller để thao tác với Form thôi. Let’s go!

3. Tạo Controller: Các bạn click chuột phải vào Controller > Add > Controller, VS sẽ hiện thị lên 1 cửa sổ: Ở đây mình sẽ chọn MVC 5 Controller with views, using Entity Framwork để VS tạo luôn các Action thêm,sửa,xóa cho mình dự trên Entity Product luôn. Tiếp theo chọn Add, ở cửa sổ tiếp theo, các bạn chọn như sau: * Model class: Product * Data context class: ProductDbContext * ControllerName: ProductController Tiếp theo chọn Add. Các bạn thấy tuyệt vời chưa ạ, VS sẽ tạo ra cho chúng ta hết tất cả các Action cần thiết luôn, chạy thử để kiểm tra kết quả nào. Bấm F5 để kiểm tra nhé Trong SQL Server: Như vậy là việc kết nối DB, tạo ra DB từ Model đã xong đúng không nào. Tiếp theo ta chỉ việc xử lý việc Thêm/Sửa/Xóa thôi.

4. Custom View Form và Xử lý Form Đầu tiên, chúng ta sửa giao diện Tạo mới Sản phẩm một chút. Mở Views > Product > Create.cshtml lên nào. Ở đây mỗi khi bạn tạo 1 Controller thì ASP.NET sẽ tạo 1 folder trong Views, mỗi Folder này sẽ chứa các file *.cshtml tương ứng với các Action trong Controller. Các bạn sửa file như sau: Ở đây, tham số đầu tiên sẽ là Action khi submit form, tham số thứ 2 là Controller xử lý, tham số thứ 3 là phương thức của form, cuối cùng là dạng để có thể truyền nhiều kiểu dữ liệu lên, ở đây mình truyền file ảnh và text nên cần dùng đến mutipart/form-data.

Tiếp theo bạn thay đổi Image thành kiểu type = “file” và xóa phần UrlImage đi nhé(Ta sẽ xử lý UrlImage trong Controller).

Như vậy bạn đã tạo xong view của phần thêm Product rồi, đây là kết quả đạt được:

Tiếp theo chúng ta sẽ xử lý trong Controller như sau, tìm đến hàm Create() Bạn thấy nó hơi khó hiểu đúng không, mình sẽ giải thích code ở đây nhé.

1. Đầu tiên là các tham số truyền vào trong Action, tham số product chính là các giá trị trong form được binding vào đối tượng product này đấy, bao gồm ProductId, ProductName, Description, Status, còn tham số thứ 2 chính là phần ảnh mình upload lên cùng trong form, ASP.NET hỗ trợ kiểu HttpPostedFileBase để nhận dạng file upload.
2. Chúng ta cần kiểm tra ảnh upload có null hay rỗng không
3. Tiếp theo mình sẽ đọc ảnh thành mảng byte và lưu vào thuộc tính Image của Product
4. Các bạn cần tạo folder Image trong Project để chứa ảnh
5. Đồng thời mình lưu file vào trong thư mực /Image của project luôn

Lưu đường dẫn của ảnh vào thuộc tính UrlImage

6. Sau khi thực hiện xong, mình sẽ dùng ProductDbContext để lưu dữ liệu vào trong CSDL. (Mình sẽ hướng dẫn về DbContext trong EF ở 1 bài khác nhé). Bạn có thể hiểu nó là lớp trung gian để thao tác với CSDL được Entity Framework xây dựng nên thôi.
7. Sau khi SaveChange() lại, mình chuyển trang về Index và hiển thị kết quả như sau
8. Các bạn vào Database để kiểm tra dữ liệu đã được lưu thành công hay chưa, và đây là kết quả của mình: Như vậy là mình đã lưu được Image và UrlImage rồi nhé.

Và tương tự làm như trên, phần Edit Product cũng tương tự: Phần view: Như vậy là phần thêm và sửa dữ liệu đã xong. Tiếp theo mình cần hiển thị được ảnh thông qua mảng Array đã mã hóa ở trên đúng không?

Để hiển thị được hình ảnh từ đoạn mã trên, mình cần xây dựng 1 lớp Helper như sau, mục đích để có thể hiển thị ảnh từ đoạn encode kia.

Cuối cùng mình sử dụng nó trong View Detail như sau Lưu ý rằng @Html.Image chính là hàm mình đã xây dựng trong Helper kia để hiển thị hình ảnh, nó sẽ render ra 1 thẻ img có src chính là ảnh được decode từ đoạn mã lưu trong database.

Và đây là kết quả mình đạt được

Như vậy mình đã hiển thị được hình ảnh lưu trong DB dưới dạng bytes[] rồi đúng không nào. Còn cách thứ 2 hiển thị hình ảnh đó chính là lưu đường dẫn trong DB, lưu trực tiếp hình ảnh ở 1 folder trên Project luôn. Rất đơn giản, các bạn chỉ cần thay đổi như sau là được:

Trên đây là bài hướng dẫn của mình sẽ các xử lý Form trong ASP.NET. Các phần Validate dữ liệu, xử lý mutiple file hay sử dụng các thẻ selection, checkbox mình sẽ làm 1 bài riêng hương dẫn các bạn. Link tải project: http://www.mediafire.com/file/3zsx4t49h9wpfbx/FormASPNet.zip

Các bạn có phản hồi có thể liên hệ, góp ý với mình qua FB: fb.com/phamtiennam23 Chúc các bạn một ngày mới vui vẻ.

Chia sẻ:

• Twitter
• Facebook

Thích Đang tải...

Có liên quan