Đang load dữ liệu
Bước 1: Mở Visual Studio 2019 chọn ASP.NET Web Application (.NET Framework) sau đó ấn Next.
- Nhập tên project -> Chọn đường dẫn lưu trữ ->Create
- Màn hình tiếp theo xuất hiện chọn MVC sau đó ấn Create (Xem hình bên dưới)
Bước 2: Kích vào chuột phải vào Models chọn Add sau đó chọn Class -> nhập tên “SinhVien.cs” -> Add và code như sau:
namespace Lab04.Models
{
public class SinhVien
{
public int ID { get; set; }
public string HoTen { get; set; }
public string GioiTinh { get; set; }
public string NgaySinh { get; set; }
public string Lop { get; set; }
public string DiaChi { get; set; }
public string Sdt { get; set; }
}
}
Bước 3: Mở trang _Layout.cshtml trong đường dẫn View/Shared/_Layout.cshtml và tìm đoạn code sau và thêm vào đúng vị trí:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Sinh viên", "Detail", "SinhVien")</li>
<li>@Html.ActionLink("Danh sách sinh viên", "List", "SinhVien")</li>
</ul>
</div>
Bước 4: Nhấn chuột phải vào Controller chọn Add ->Controller ->nhập tên Controller (ở đây mình nhập SinhVienController) ->Add
Bước 5: Code cho SinhVienController như sau:
using Lab04.Models;// kết nối với class trong Models (nhớ thêm vào)
namespace Lab04.Controllers
{
public class SinhVienController : Controller
{
// GET: SinhVien
public ActionResult Detail()
// Action này trả về thông tin chi tiết sinh viên
{
SinhVien sv = new SinhVien()
{
ID = 201750032,
HoTen = "Nguyễn Phương Thảo",
GioiTinh = "Nữ",
NgaySinh = "26-01-1999",
Lop = "CNTT1",
DiaChi = "Hải Dương",
Sdt = "036 7895432"
};
// cách 1 gán dữ liệu vào ViewBag để chuyển tới View
// ViewBag.sinhvien= sv; return View();
//hoặc có thể truyền dữ liệu qua đối tượng model để chuyển tới View như dưới
return View(sv);
}
public ActionResult List()
//Action này trả về danh sách sinh viên
{
//taọ một danh sách
List<SinhVien> listsv = new List<SinhVien>()
{
new SinhVien()
{
ID = 2017500352,
HoTen = "Nguyễn Phương Thảo",
GioiTinh = "Nữ",
NgaySinh = "26-01-1999",
Lop = "CNTT1",
DiaChi = "Hải Dương",
Sdt = "036 7895432"
},
new SinhVien()
{
ID = 2017501463,
HoTen = "Đỗ Đức Duy",
GioiTinh = "Nam",
NgaySinh = "24-09-1998",
Lop = "Nhiệt 2",
DiaChi = "Hải Dương",
Sdt = "036 1236789"
},
new SinhVien()
{
ID = 2017601898,
HoTen = "Vũ Hồng Quân",
GioiTinh = "Nam",
NgaySinh = "26-05-1998",
Lop = "Điện Tử 2",
DiaChi = "Hà Nội",
Sdt = "035 7895431"
},
new SinhVien()
{
ID = 2017501324,
HoTen = "Nguyễn Thị Hồng Loan",
GioiTinh = "Nữ",
NgaySinh = "15-08-1999",
Lop = "CNTT1",
DiaChi = "Bắc Giang",
Sdt = "034 4889432"
},
new SinhVien()
{
ID = 2017501672,
HoTen = "Tô Cát Anh",
GioiTinh = "Nữ",
NgaySinh = "26-01-1997",
Lop = "KHMT3",
DiaChi = "Nghệ An",
Sdt = "038 7805412"
}
};
//gán dữ liệu vào ViewBag để chuyển qua View
ViewBag.listsv = listsv;
return View();
}
}
}
Bước 6: Nhấn chuột phải vào Detail trong SinhVienController chọn Add View nhấn Add
Bước 7: Code cho View Detail.cshtml như sau:
@*cách 1: lấy dữ liệu truyền qua đối tượng model*@
@model Lab04.Models.SinhVien
@{
ViewBag.Title = "Chi tiết sinh viên";
Layout = "~/Views/Shared/_Layout.cshtml";
//lấy dữ liệu truyền qua đối tượng theo cách 2
// var sinhvien = Model as Lab04.Models.SinhVien
}
<h2>Chi tiết sinh viên</h2>
<p>Mã SV: @Model.ID</p>
<p>Họ tên SV: @Model.HoTen</p>
<p>Giới tính: @Model.GioiTinh</p>
<p>Ngày sinh: @Model.NgaySinh </p>
<p>Lớp: @Model.Lop</p>
<p>Địa chỉ: @Model.DiaChi</p>
<p>Số điện thoại: @Model.Sdt</p>
@*Hiển thị chi tiết theo cách 2
<h2>Chi tiết sinh viên</h2>
<p>Mã SV: @sinhvien.ID</p>
<p>Họ tên SV: @sinhvien.HoTen</p>
<p>Giới tính: @sinhvien.GioiTinh</p>
<p>Ngày sinh: @sinhvien.NgaySinh </p>
<p>Lớp: @sinhvien.Lop</p>
<p>Địa chỉ: @sinhvien.DiaChi</p>
<p>Số điện thoại: @sinhvien.Sdt</p>*@
Bước 8: Nhấn chuột phải vào List trong SinhVienController chọn Add View nhấn Add
Bước 9: Code cho View List.cshtml như sau:
@{
ViewBag.Title = "Danh sách khách hàng";
Layout = "~/Views/Shared/_Layout.cshtml";
// lấy danh sách và chuyển đổi dữ liệu
var listsv = ViewBag.listsv as List<Lab04.Models.SinhVien>;
}
<style>
th {
background-color: cadetblue;
color: white;
text-align: center;
}
</style>
<h2>Danh sách sinh viên</h2>
<table class="table-bordered">
<thead>
<tr>
<th>Mã SV</th>
<th>Họ tên SV</th>
<th>Giới tính</th>
<th>Ngày sinh</th>
<th>Lớp</th>
<th>Địa chỉ</th>
<th>Số điện thoại</th>
</tr>
</thead>
<tbody>
@foreach (var item in listsv)
{
<tr>
<td>@item.ID</td>
<td>@item.HoTen</td>
<td>@item.NgaySinh</td>
<td>@item.Lop</td>
<td>@item.DiaChi</td>
<td>@item.Sdt</td>
</tr>
}
</tbody>
</table>
Bước 10: F5 để chay và kích vào mục Sinh viên, Danh sách sinh viên để kiểm tra kết quả:
Nguồn: Devmaster Academy
.png "Lập trình frontend với reacjs (Full)")