Đ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 chuột phải vào Model chọn Add ->Chọn Class->nhập tên Student và thêm code theo gợi ý sau:
Bước 3: Copy các tài nguyên vào thư mục Content ( East-West dance.mp4, DenVau.docx )
Bước 4: Mở HomeController vào tạo các Action ứng với từng loại ActionResult theo gợi ý sau:
namespace Lab2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ViewResult TestViewResult()
//trả về một View là một trang html và nó có thể truyền tham số hóa model
{
return View();
}
public PartialViewResult TestPartialViewResult()
//PartialViewResult trả về một phần nhỏ của View
{
return PartialView();
}
public EmptyResult TestEmptyResult()
//trả về một View trống(null)
{
return new EmptyResult();
}
public RedirectResult TestRedirectResult()
//Action đáp ứng việc chuyển trực tiếp tới một view khác
{
return Redirect("Index");
}
public JsonResult TestJsonResult()
//trả về một kết quả dạng Json
//lưu ý thêm using Lab2.Models; để truy xuất dữ liệu
{
List listStudent = new List();
listStudent.Add(new Student() { ID = 001, Name = "Nguyễn Ngọc Anh", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 002, Name = "Vũ Bảo Minh", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 003, Name = "Nguyễn Hồng Quân", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 004, Name = "Phạm Ngọc Phong", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 005, Name = "Đặng Thúy An", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 006, Name = "Ngô Hồng Hạnh", ClassName = "CNTT1" });
listStudent.Add(new Student() { ID = 007, Name = "Tô Hạnh Phúc", ClassName = "CNTT1" });
return Json(listStudent, JsonRequestBehavior.AllowGet);
}
public JavaScriptResult TestJavaScriptResult()
//trả về một view là Javascript
{
string js = "function checkMail(){var btloc=/^([w-] + (?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i" +
"if(btloc.test(mail)) {kq=true;} else {alert('Email address invalid'); kq=false; } return kq; }";
return JavaScript(js);
}
public ContentResult TestContentResult()
//trả về một ContentResult dữ liệu ở dạng văn bản
{
XElement contentXML = new XElement("Students",
new XElement("Student",
new XElement("ID", "001"),
new XElement("FullName", "Nguyễn Viết Nam"),
new XElement("ClassName", "C1308H")),
new XElement("Student",
new XElement("ID", "002"),
new XElement("FullName", "Phùng Chí Minh"),
new XElement("ClassName", "C1308H")),
new XElement("Student",
new XElement("ID", "003"),
new XElement("FullName", "Trần Ngọc An"),
new XElement("ClassName", "C1411L")));
return Content(contentXML.ToString(), "text/xml", Encoding.UTF8);
}
/*FileContentResult, FileStreamResult, FilePathResult là 3 kiểu ActionResult đều cho phép
trình duyệt mở hộp thoại lưu file và tải file về*/
//phương thức trả về có 3 tham số
/*tham số thứ nhất là mảng byte của file đối với kiểu FileContentResult.
là một FileStream đối với kiểu FileStreamResult và là một đường dẫn file đối với kiểu PathFileResult*/
//tham số thứ hai chỉ ra loại định dạng của file
//tham số thứ ba tên file mà trình duyệt sẽ tải về
public FileContentResult TestFileContentResult()
{
byte[] fileBytes = System.IO.File.ReadAllBytes(Server.MapPath("~/Content/East-West dance.mp4"));
string fileName = "East-West dance.mp4";
return File(fileBytes, "video/mp4", fileName);
}
public FileStreamResult TestFileStreamResult()
{
string pathFile = Server.MapPath("~/Content/DenVau.docx");
string fileName = "DenVau.docx";
return File(new FileStream(pathFile, FileMode.Open), "text/doc",fileName);
}
public FilePathResult TestFilePathResult()
{
string pathFile = Server.MapPath("~/Content/DenVau.docx");
string fileName = "DenVau.docx";
return File(pathFile, "text/doc", fileName);
}
}
}
Bước 5: Tạo View cho các Action trong HomeController với các code gợi ý sau:
- Index.cshtml
- TestViewResult
-TestPartialViewResult
Bước 6:Mở View/Shared/_Layout.cshtml rồi chỉnh sửa theo code sau:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("ViewResult", "TestViewResult", "Home")li>
<li>@Html.ActionLink("PartialView", "TestPartialViewResult", "Home")li>
<li>@Html.ActionLink("Empty", "TestEmptyResult", "Home")li>
<li>@Html.ActionLink("Redirect", "TestRedirectResult", "Home")li>
<li>@Html.ActionLink("Json", "TestJsonResult", "Home")li>
<li>@Html.ActionLink("JavaScript", "TestJavaScriptResult", "Home")li>
<li>@Html.ActionLink("Content", "TestContentResult", "Home")li>
<li>@Html.ActionLink("FileContent", "TestFileContentResult", "Home")li>
<li>@Html.ActionLink("FileStream", "TestFileStreamResult", "Home")li>
<li>@Html.ActionLink("FilePath", "TestFilePathResult", "Home")li>
ul>
div>
div>
div>
Bước 7: Nhấn F5 để được kết quả như sau
Lần lượt ấn vào từng mục để xem kết quả của mỗi kiểu trả về. Dưới đây là kết quả kiểu trả về của ContentResult:
Nguồn: Devmaster Academy
.png "Lập trình frontend với reacjs (Full)")