Hướng dẫn làm quen với dự án Web ASP.NET MVC - Quoc Hieu Blog

Post Top Ad

Hướng dẫn làm quen với dự án Web ASP.NET MVC

Share This
ASP.NET là một Framework sử dụng .NET Framework cho việc phát triển ứng dụng web động, trước khi ASP.NET ra đời, dev sử dụng công nghệ ASP.NET Web Form trên nền tảng .NET Framework để phát triển Web động.

ASP.NET phát triển trên mẫu thiết kế chuẩn MVC, cho phép người sử dụng phát triển các ứng dụng phần mềm.

Mục Lục

Khi tiến hành thì soạn ra rất nhiều bước nhưng chung quy ra thì nó bao gồm những bước lớn sau đây:
  1. Tạo ứng dụng MVC ASP.NET
  2. Thêm vào một References
  3. Thêm vào một Controller

Cài Đặt

Để tạo dự án Web với ASP.NET MVC, trong bài viết này mình có sự dụng các phần mềm sau:
  1. Visual Studio 2017
  2. SQL Server Management Studio

Tiến Hành

Bước 1. Đầu tiên vào File > New > Project





Bước 2: Một hộp thoại hiển thị ra, chon Visual C# > APS.NET Web Application (.Net Framework) 

- Sau đó ta đặt tên cho project, ở đây tên mình đặt là ERP 

- Tiếp theo là chọn vị trí lưu, trong mục Location > Browse... 


- Khi bạn chọn Browse, sẽ xuất hiện hộp thoại, sau đó chon New folder >> Đặt tên cho folder (ở đây đặt folder tên là ASP.NET) >> Select Folder


Bước 3. Chọn MVC > OK


Bước 4. Nhấp chuột phải vào Solution 'ERP' (1 project) >> Add >> New Project...


Bước 5. Trong Visual C# >> Class Library (.NET Framwork) >> Đặt tên là ERP.Entity >> OK


Bước 6. Nhấn chuột phải vào ERP.Entity >> Add >> New Folder 


- Đặt tên Folder vừa tạo là Models


Bước 7. Nhấn chuột phải vào Models >> Add >> New Item... 

Bước 8. Trong Visual C# Items >> ADO.NET Etity Data Model >> Đặt tên là ERPDbContext >> Add


Bước 9. Chọn Code First from database >> Next 


Bước 10. Nhấp vào New Connection...


- Sau đó một hộp thoại xuất hiện, các bạn để ý ở ô Server name còn để trống, nên việc cần làm tiếp theo là thêm Server name vào:


Bước 11. Để thêm Server name, trước tiên ta bật SQL Server lên >> Connect để xuất hiện hộp thoại:


Bước 12. Sau đó ta thực hiện tuần tự như hình bên dưới:

- Copy Server name từ SQL Server sang hộp thoại.

- Ở Authentication chọn SQL Server Authentication 

- Nhập User name Password giống bên SQL Server mà bạn đã đặt.

- Sau đó chọn 1 database trong mục Select of enter a database name.

- Cuối cùng là nhấp vào Test Connection


Bước 13. Sau khi nhấp vaò Test Connection nếu connect thành công, ta nhấn OK.

Bước 14. Sau đó chọn Yes, include the ... >> và chọn Next



Bước 15. Nhấp chọn Tables >> Finish



Bước 16. Sau đó các bạn tìm và nhấp đúp chuột vào App.config (thường thì nó nằm dưới Models)



Bước 17. Copy đoạn code giống hình bên dưới trong App.config



Bước 18. Tiếp tục tìm nhập đúp chuột vào Web.config (thường thì nó nằm trên ERP.Entity)



Bước 19. Dán đoạn code vừa copy ở App.config vào Web.config

- Lưu ý: Dán code nằm trên thẻ đóng </configuration>



Bước 20. Nhấp chuột phải vào Solution 'ERP' >> Build Solution



- Sau đó đợi kết quả, nếu nó hiển thị như dòng bên dưới tức là đã thành công. Các bạn để ý dòng sau:
========== Build: 2 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========



Bước 21.  Nhấp chuột phải vào References >> Add References



Bước 22. Chọn Projects >> ERP.Entity >> OK



Bước 23. Nhấp chuột phải vào Solution 'ERP' >> Rebuild Solution và xem kết quả giống Bước 20.



Bước 24. Tìm và nhấp chuột phải vào Controllers >> Add >> Controller..



Bước 25. Chọn MVC 5 Controller with view, using Entity Framwork >> Add



Bước 26. Bạn chọn Datacontext class trước >> Rồi chọn Model class (tức là bảng muốn hiển thị) >> Add



Bước 27. Các bạn tìm file Index rồi mở nó bằng trình duyệt:



- Đây là sau khi bạn mở bằng trình duyệt:


Bước 28. Các bạn có thể nhấn vào Create New để thêm mới.





- Đây là kết quả sau khi tạo mới:


Bước 29. Các bạn có thể vào SQL Server để kiểm tra




Lời Kết

Lưu ý: Khi tạo dự án Web với ASP.NET MVC thì bạn phải có ít nhất 1 table từ database trước.

Bài viết này cũng bắt đầu và tổng quan đầu tiên, nên các bài viết sau này mình sẽ cùng các tìm hiểu chuyên sau hơn. 

Chúc các bạn thành công.
ShareBy Hiếu Quốc

No comments:

Post a Comment

Cảm ơn bạn đã bình luận.

Pages