ASP.NET MVC - Lab 03 - View in ASP.NET MVC 5 - Bài 3.3
Lab 03 - View in ASP.NET MVC 5 - Bài 3.3
View in ASP.NET MVC 5
Tạo ứng dụng ASP.NET MVC 5 sử dụng HTML Heper Methods để tạo trang Đăng ký thành viên.
Bước 1 : Kích chuột phải vào Solution Name -> Chọn Add -> Chọn New Project Nhập tên project -> Chọn đường dẫn lưu trữ -> Nhấn OK (xem hình dưới).
Bước 2: Tạo lớp Country trong thư mục Models với code như sau:
public class Country
{
public string ID { get; set; }
public string Name { get; set; }
}
Bước 3 : Tạo HTMLHelperController trong thư mục Controller với code gợi ý như sau:
public class HTMLHelperController : Controller
{
// GET: HTML_Helper_Methods
public ActionResult FormRegister()
{
// tạo list cho droplist
ViewBag.listCountry = new List<Country>() {
new Country(){ID="0",Name="-- Chọn Quốc Gia --"},
new Country(){ID="VN",Name="Việt Nam"},
new Country(){ID="AT",Name="AUSTRALIA"},
new Country(){ID="UK",Name="Anh"},
new Country(){ID="FR",Name="Pháp"},
new Country(){ID="US",Name="Mỹ"},
new Country(){ID="KP",Name="Hàn Quốc"},
new Country(){ID="HU",Name="Hồng Kong"},
new Country(){ID="CN",Name="Trung Quốc"},
};
return View();
}
public ActionResult Register()
{
// lấy giá trị được các trường đẩy lên server khi submit
string fvr = "";
TempData["UName"] = Request["txtUName"];
TempData["Pass"] = Request["txtPass"];
TempData["FName"] = Request["txtFName"];
TempData["Gender"] = Request["Gender"].ToString();
TempData["Address"] = Request["txtAddress"];
TempData["Email"] = Request["txtEmail"];
TempData["Country"] = Request["Country"];
if (Request["Reading"].ToString().Contains("true")) fvr +="Reading ,";
if (Request["Shopping"].ToString().Contains("true")) fvr += "Shopping ,";
if (Request["Sport"].ToString().Contains("true")) fvr += "Sport ,";
TempData["Favourist"] = fvr;
return View();
}
}
Bước 4 : Tạo view cho 2 Action vừa tạo trong HTMLHelperController
-
FormRegister.cshtml
@{
ViewBag.Title = "FormRegister";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Đăng ký thành viênh2>
@{
Html.BeginForm("Register", "HTMLHelper", FormMethod.Get);
<table class="table table-bordered">
<tr>
<td>@Html.Label("Tên đăng nhập")td>
<td>@Html.TextBox("txtUName")td>
tr>
<tr>
<td>@Html.Label("Mật khẩu")td>
<td>@Html.Password("txtPass")td>
tr>
<tr>
<td>@Html.Label("Nhập lại mật khẩu")td>
<td>@Html.Password("txCfPass")td>
tr>
<tr>
<td>@Html.Label("Họ và tên")td>
<td>@Html.TextBox("txtFName")td>
tr>
<tr>
<td>@Html.Label("Ngày sinh")td>
<td><input type="date" name="BDay"/>td>
tr>
<tr>
<td>@Html.Label("Giới tính")td>
<td>@Html.RadioButton("Gender","Name",true) Nam @Html.RadioButton("Gender","Nữ") Nữtd>
tr>
<tr>
<td>@Html.Label("Địa chỉ")td>
<td>@Html.TextArea("txtAddress")td>
tr>
<tr>
<td>@Html.Label("Email")td>
<td>@Html.TextBox("txtEmail")td>
tr>
<tr>
<td>@Html.Label("Quốc gia")td>
<td>@Html.DropDownList("Country", new SelectList(ViewBag.listCountry,"ID","Name"))td>
tr>
<tr>
<td>@Html.Label("Sở thích")td>
<td>@Html.CheckBox("Reading") Đọc sách @Html.CheckBox("Shopping") Mua sắm @Html.CheckBox("Sport") Thể thaotd>
tr>
<tr>
<td>td>
<td><input type="submit" value="Đăng Ký"/>td>
tr>
table>
Html.EndForm();
}
-
Register.cshtml
@{
ViewBag.Title = "SubmitForm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Thông tin đăng kýh2>
<table class="table table-bordered">
<tr>
<td>UserName :td>
<td>@TempData["UName"]td>
tr>
<tr>
<td>Password :td>
<td>@TempData["Pass"]td>
tr>
<tr>
<td>Full Name :td>
<td>@TempData["FName"]td>
tr>
<tr>
<td>Gender :td>
<td>@TempData["Gender"]td>
tr>
<tr>
<td>Address :td>
<td>@TempData["Address"]td>
tr>
<tr>
<td>Email :td>
<td>@TempData["Email"]td>
tr>
<tr>
<td>Country :td>
<td>@TempData["Country"]td>
tr>
<tr>
<td>Favourist :td>
<td>@TempData["Favourist"]td>
tr>
table>
Bước 5: Mở Views/Shared/_Layout .cshtml tìm và thêm đoạn code dưới đây vào đúng vị trí
<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("DEVMASTER.vn-HTML Helper", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Đăng ký", "FormRegister", "HTMLHelper")li>
ul>
div>
div>
div>
Bước 6: Chạy và kiểm tra kết quả form Đăng ký thành viên
Kết quả sau khi điền đầy đủ thông tin các trường và click vào nút Đăng Ký
Phần II bài tập tự làm
Bài 3.1: Tạo ứng dụng ASP.NET MVC 5 và thực hiện các công việc sau;
- In ra các số nguyên tố từ 1-100
- In ra giai thừa từ 1-10
- In ra bảng cửu chương từ 2-9
Bài 3.2: Tạo ứng dụng ASP.NET MVC 5 với form đăng ký thành viên như sau:
Sau khi nhập xong nhấn nút Cập nhật thì hiển thị thông tin chi tiết sang trang khác.
