Bài trước:
Hôm nay chúng ta chuyển sang tìm hiểu về thiết kế trang Web ASP.NET MVC bằng mã ASPX.
Đã đính kèm Mock Project cho các bạn tải về review lại.
Mục tiêu
- Nắm vững Namespace Web.Mvc.Html
- Hiểu class HtmlHelper WebViewBase và WebPageBase
- Nắm vững AjaxHelper
- Làm việc với các class Extensions
Tổng quan:
- Server Script(PHP, JSP, ASP,...)
+ Sử dụng thẻ HTML làm giao diện phía người dùng cho việc input và uotput
- ASP.NET Web Form
+ Thẻ HTML
+ Thẻ HTML Server Control(chạy trên server)
+ ASP.NET Control(chạy trên server)
- ASP.NET MVC
+ Thẻ HTML
+ HtmlHelper/AjaxHelper và WebViewBase, WebPageBase(sinh ra thẻ HTML)
Làm ví dụ:
- Tạo Project ASP.NET MVC 4.0 mới, đặt tên tùy ý
- Tạo trang Aspx mới đặt tên là Html.aspx để test, nằm trong thư mục Home(trong thư mục View)
- Tại lớp HomeController.cs nằm trong thư mục Controller, dán đoạn Code này vào để điều khiển việc tương tác giao diện người dùng
public ActionResult Html()
{
return View();
}
- Tại trang Html.aspx, bạn chuyển sang tab Design bên dưới
- Tạo Table, bằng cách nhấn vào Tab Table trên menu để chọn Insert Table như hình
- Nhập thông tin như hình, chú ý các Input HTML, ở đây Email là Input Text, Password là Input Password, Submit là Input Submit
- Chuyển sang chế độ source sẽ có rất nhiều mã như hình
- Chạy chương trình
Chú ý: Trên là các thẻ HTML truyền thống.
Giới thiệu HtmlHelper
- Class HtmlHelper cung cấp phương thức mới tạo ra control HTML
- Tất cả các phương thức HtmlHelper sinh ra thẻ HTML như forms, controls, input validation và trả về kết quả là chuỗi
- Để làm việc với HtmlHelper thì sử dụng namespace System.Web.Mvc.Html
Cấu trúc HtmlHelper
- BeginForm
- CheckBox
- DropDownList
- RadioButton
- TextBox
- ActionLink
- Hidden
- ListBox
- Password
- TextArea
Desgin UI cho trang View
- class InputExtensions: Thể hiện việc hỗ trợ control HTML input như CheckBox, TextBox,..
- class TextAreaExtensions: Trả lại phần tử textarea bằng cách sử dụng HTML helper và HTML attribute
- class SelectExtensions: Trả lại phần tử select multiselect như DropDownList, ListBox sử dụng HTML helper và tên form filed
Làm việc với class FormExtensions
Ví dụ sau sẽ rõ ràng hơn:
- Tạo mới trang FormTag.aspx trong thư mục Home(nằm trong thư mục View) - chú ý sau này tôi nói tạo trang aspx thì bạn ngầm hiểu là trong thư mục View nhé. Và trong thư mục View sẽ có các thư mục con, nên tôi sẽ không nói lại việc nằm trong thư mục View nữa.
- Tại trang FormTag.aspx copy dòng code này vào sao thẻ body
<% using(Html.BeginForm("FormTag","Home",FormMethod.Post)){ %>
Body
<% }%>- Để chạy được cần phải gọi trong Controller, trong HomeController.cs thêm vào code sau:
public ActionResult FormTag()
{
return View();
}
Từ giờ bạn cũng ngầm hiểu là muốn chạy tại trang aspx nào trong View, thì phải gọi trong HomeController
- Chạy xem như thế nào theo hình
Tiếp tục View Source trang web
- Thay đổi một số đoạn code trong trang FormTag như sau
<div>
<% using (Html.BeginForm("FormTag", "Home", FormMethod.Post))
{ %>
Body of First Form
<% }%>
<% using (Html.BeginForm("FormTag", "Home", FormMethod.Post, new { @name = "form2", @id = "form2", @onsubmit = "return confirm('Are you sure?')" }))
{ %>
Body of Second Form
<% }%>
</div>
- Chạy và View Source Code để xem
Làm việc với class InputExtensions
Sử dụng cho việc nhập dữ liệu để gán dữ liệu.
Nếu làm việc với Model thì sử dụng Html.TextBoxFor
Làm ví dụ về Form đăng nhập
- Tạo mới trang inputTags.aspx
- Nhập Code này vào
<% using (Html.BeginForm("FormTag", "Home", FormMethod.Post, new { @name = "form2", @id = "form2", @onsubmit = "return confirm('Are you sure?')" }))
{ %>
<table style="width: 100%;">
<tr>
<td colspan="2">Please enter your email and password.</td>
</tr>
<tr>
<td>Email</td>
<td><%= Html.TextBox("Email") %></td>
</tr>
<tr>
<td>Address</td>
<td><%= Html.TextBox("Address","141B/1 Lý Tự Trọng, Tp Đà Nẵng") %></td>
</tr>
<tr>
<td>Phone</td>
<td><%= Html.TextBox("Phone","0905042112", new{@maxlength=10,@ReadOnly=true}) %></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<% }%>- Chạy như hình
- View Sorce Code xem nhé
<form action="/Home/FormTag" id="form2" method="post" name="form2" onsubmit="return confirm('Are you sure?')">
<table style="width: 100%;">
<tr>
<td colspan="2">Please enter your email and password.</td>
</tr>
<tr>
<td>Email</td>
<td><input id="Email" name="Email" type="text" value="" /></td>
</tr>
<tr>
<td>Address</td>
<td><input id="Address" name="Address" type="text" value="141B/1 Lý Tự Trọng, Tp Đà Nẵng" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input ReadOnly="True" id="Phone" maxlength="10" name="Phone" type="text" value="0905042112" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>- Nếu muốn lấy giá trị mặc đình từ View Controller thì phải làm sao?
Bạn vào HomeController, tại hàm gọi trang hiện tại muốn thấy, copy code sau
public ActionResult inputTags()
{
ViewBag.Email = "webmaster@dotnet.vn";
return View();
}
Sau đó tại trang inputTag.aspx, khai báo 1 chuỗi string email để test xem
<tr>
<td>Email</td>
<td>
<% string email = ViewBag.Email; %>
<%= Html.TextBox("Email",email) %></td>
</tr>Kết quả như mong đợi:
- Thử với Password, tương tự như vậy
Đối với Checkbox, Hidden, Radio, TextArea đều tương tự, và các thuộc tính thì cứ đặt trong từ khóa new thôi
Làm việc với SelectExtentsions
- Tạo trang selectTag và code như sau
<% using (Html.BeginForm("FormTag", "Home", FormMethod.Post, new { @name = "form2", @id = "form2", @onsubmit = "return confirm('Are you sure?')" }))
{ %>
<%= Html.DropDownList("Departments") %>
<%} %>
- Trong HomeController với hàm tương ứng như sau
public ActionResult selectTag()
{
List<String> departments = new List<string>();
departments.Add("Đà Nẵng");
departments.Add("Hà Nội");
departments.Add("Hải Phòng");
departments.Add("Hồ Chí Minh");
ViewBag.Departments = new SelectList(departments);
return View();
}- Chạy chương trình như dưới
Làm việc với thẻ link
- Sử dụng Url.Content(String as relative path)
- Url.Content bên trong class WebViewPage và trả về đối tượng UrlHelper
- Ví dụ:
<link href="<%Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
<script src="<%Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<img src="<%Url.Content("~/Content/logo.gif") %>" />
Bài tiếp theo: Thiết kế layout với View Content Page, Master Page và User Control Page