Cấp bậc tác giả:

TRAINING

[TUT]ASP.NET MVC 4 - Web Page được thiết kế bởi HtmlHelper Extension

Được viết bởi webmaster ngày 23/07/2015 lúc 01:02 PM
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
  • 0
  • 11316
Tải tệp tin: Click ở đây

[TUT]ASP.NET MVC 4 - Web Page được thiết kế bởi HtmlHelper Extension

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

insert-table-01.jpg

- 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

html-Input-02.jpg

- Chuyển sang chế độ source sẽ có rất nhiều mã như hình

code-html-input-03.jpg

- Chạy chương trình

view-html-04.jpg

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

formtag-view-05.jpg

Tiếp tục View Source trang web

formtag-viewsource-06.jpg

- 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

formtag-viewsource-07.jpg

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>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <% }%>
- Chạy như hình

input-tag-08.jpg

- View Sorce Code xem nhé

 
<form action="/Home/FormTag" id="form2" method="post" name="form2" onsubmit="return confirm(&#39;Are you sure?&#39;)">
        <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>&nbsp;</td>
                <td>&nbsp;</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:

input-tag-email-09.jpg

- Thử với Password, tương tự như vậy

input-tag-password-view-10.jpg

input-tag-password-controller-11.jpg

input-tag-password-run-12.jpg

Đố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

selectTag-13.jpg

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

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML