Hướng dẫn lập trình asp.net core cho người mới từng bước trên dự án web đơn giản

Bạn đang muốn học lập trình web bằng asp.net core ? Khám phá ngay bài viết này để Stanford giúp bạn tạo một dự án web đơn giản bằng asp.net core với hướng dẫn chi tiết dưới đây.

Để lập trình web bằng asp.net core yêu cầu các bạn cần có kiến thức lập trình c# cơ bản, trong đó cần nắm chắc kiến thức lập trình hướng đối tượng. Nếu bạn chưa rõ học asp.net core cần gì ? Hãy xem ngay lộ trình học asp.net core cho người mới tại đây.

Dưới đây là hướng dẫn từng bước để giúp bạn học lập trình asp.net core xây dựng một dự án đơn giản bằng ASP.NET Core cụ thể như sau:

Bước 1: Tạo dự án mới

- Bước đầu tiên bạn cần Mở Visual Studio. Sau đó chọn menu File => New => Project => Chọn "ASP.NET Core Web App" và nhấn "Next".

- Đặt tên cho dự án là một chuỗi kí tự không tiếng việt không dấu hoặc tiếng anh và chọn vị trí lưu trữ, sau đó nhấn "Next" như hình dưới.

- Chọn Net Framework phù hợp trong mục Framework nếu có. Sau đó nhấn nút "Create" để chính thức tạo dự án lập trình asp.net core.

Bước 2: Tạo mô hình (Model)

- Tạo lớp Product: Nhấp chuột phải vào thư mục Models, chọn "Add" => "Class" và đặt tên là "Product.cs". Thực hiện lập trình lớp Product với các thuộc tính như sau:

namespace Stanford_WorkingAspcoreBasic.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Bước 3: Tạo bộ điều khiển (Controller)

- Tạo lớp ProductController: Nhấp chuột phải vào thư mục Controllers, chọn "Add" => "Controller" và chọn "MVC Controller - Empty".

- Đặt tên là "ProductController.cs" và nhấn nút "Add" để chính thức tạo lớp với tên ProductController như hình dưới:


Sau đó thực hiện lập trình trong lớp ProductController với nội dung như sau:

using Microsoft.AspNetCore.Mvc;
using Stanford_WorkingAspcoreBasic.Models;
namespace Stanford_WorkingAspcoreBasic.Controllers
{
    public class ProductController : Controller
    {
        /// <summary>
        /// Hàm hiển thị danh sách sản phẩm
        /// </summary>
        /// <returns></returns>
        public IActionResult Index()
        {
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "iPhone 14 Pro Max", Price = 12.0m },
                new Product { Id = 2, Name = "iPhone 15 Pro Max", Price = 18.0m },
                new Product { Id = 3, Name = "iPhone 16 Pro Max", Price = 30.0m }
            };
 
            return View(products);
        }
    }
}

Bước 4: Tạo giao diện (View)

- Thêm thư mục Views/Product: Nhấp chuột phải vào thư mục Views, chọn "Add" => "New Folder" và đặt tên là "Product".

- Tạo View cho Index: Nhấp chuột phải vào thư mục Product, chọn "Add" => "Razor View" và chọn các thông tin như giao diện dưới để có Visual Studio hỗ trợ sinh giao diện danh sách cho nhanh:

Nhấn nút "Add" và đặt tên là "Index.cshtml". Sau đó thực hiện chỉnh sửa và lập trình trang giao diện như sau:

@model IEnumerable<Stanford_WorkingAspcoreBasic.Models.Product>
@{
    ViewData["Title"] = "Danh sách sản phẩm";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<p style="width:100%; text-align:center">
    <h1>Danh sách sản phẩm</h1>
</p>
 
<p style="width:100%; text-align:right">
    <a asp-action="Create">Thêm mới</a>
</p>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
            <th>
                Price
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.ActionLink("Sửa", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Xóa", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>
</table>

Bước 5: Chạy ứng dụng

- Chạy ứng dụng: Sau khi đã hoàn thành các bước ở trên. Bạn nhấn F5 hoặc chọn "Debug" > "Start Debugging" để chạy ứng dụng và xem thành quả của mình nhé.
- Truy cập trang sản phẩm: Mở trình duyệt và truy cập https://localhost:7060/Product sẽ có giao diện như hình dưới đây:


Như vậy Stanford đã hướng dẫn bạn tạo xong một dự án bằng lập trình ASP.NET Core đơn giản hiển thị danh sách sản phẩm. Bạn có thể thực hiện từng bước theo hướng dẫn trong bài viết này. Nếu có thắc mắc gì hãy liên hệ với chúng tôi để được hỗ trợ bạn nhé. Chúc bạn thành công !

Bên cạnh đó bạn muốn được đào tạo bài bản về lập trình asp.net core cùng chuyên gia giàu kinh nghiệm để tiết kiệm thời gian ? Hãy đăng ký tham gia khoá lập trình asp.net core tại đây: http://bit.ly/2SLPYFF. Hoặc gọi ngay cho Stanford theo hotline: 0963.723.236 - 0866.586.366 để được gọi lại tư vấn trực tiếp nhé.

==========🎬 🎬 🎬==========
☎️STANFORD – ĐÀO TẠO VÀ PHÁT TRIỂN CÔNG NGHỆ
Hotline: 0963 723 236 - 0866 586 366
Website: https://stanford.com.vn
Facebook: https://www.facebook.com/Stanford.com.vn
Youtube: http://bit.ly/2TkKT7I

Tags: hướng dẫn học asp.net core, học asp.net core