Thursday, February 2, 2012

Lesson 03 – HTML TAGS AND HTMLHELPER CLASS IN ASP.NET MVC APPLICATION

Bài tập 1: Thẻ  HTML trong ứng dụng ASP.Net Application
o   Mở Visual Studio 2010 và tạo mới 1 Solution tên là Exercise03Soln đặt trong thư mục MVCWebsite (đã tạo ở bài trước)
ü  Chuột phải vào Solution | Add | New Project
ü  Bạn chọn ASP.NET MVC 3 Web Application và đặt tên là FixedHtmlMVCApplication
ü  Tiếp theo bạn chọn Select a template: Empty, View Engine: ASPX. Bạn bỏ qua việc tạo mới unit test project

o   Sau khi tạo xong ta thấy cấu trúc project như sau:
ü  Không xó thư mục trong View (ngoại trừ thư mục Shared)
ü  Không có tập tin .cs trong Controller
ü  Không có tập tin .cs trong Models

o   Chuột phải vào Views | Add | New Folder tên là Account và QuocHung:

o   Bạn chọn thử mục Controller, chuột phải vào | Add | Controller tên là AccountController

ü  Thay đổi Action Index thành Login

public ActionResult Login()
        {
            ViewData["SessionId"] = Session.SessionID;
            return View();
        }

o   Bạn chọn thử mục Controller, chuột phải vào | Add | Controller tên là HomeController

ü  Thay đổi Action Index thành Default

public ActionResult Default()
        {
            return View();
        }

o   Chuột phải vào Views/Account | Add | New Item
ü  Chọn Web | MVC 3 | MVC 3 View Page
ü  Tên là Login.aspx
o   Chuột phải vào Views/QuocHung | Add | New Item
ü  Chọn Web | MVC 3 | MVC 3 View Page
ü  Tên là Default.aspx

o   Mở Default.aspx
ü  Ở  chế độ Source
ü  Thêm đoạn sau:

<div>Wellcome to ASP.NET 4.0 MVC 3</div>
<a href="/Account/Login">Login</a><br />
<a href="/Account/NewAccount">New Account</a><br />
o   Mở Login.aspx
ü  Ở  chế độ Source
ü  Thêm đoạn sau:

<form name="login" id="login" action="/Account/Login">       
        <table class="style1">
        <tr>
<td colspan="2">Xin vui lòng cung cấp Email
và mật khẩu đăng nhập vào QuocHung</td></tr>
        <tr>
            <td>
                Địa chỉ Email:</td>
            <td>
                <input id="txtEmail" type="text" /></td>
        </tr>
        <tr>
            <td>
                Mật khẩu:</td>
            <td>
                <input id="txtMatKhau" type="text" /></td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                <input id="btnDangNhap" type="submit" value="Đăng nhập" /></td>
        </tr>
    </table>   
</form>
<%=ViewData["SessionId"] %>

ü  Giao diện như sau:

o   Mở Global.asax.cs và sửa đổi MapRoute như sau

routes.MapRoute(
                "Default"// Route name
                "{controller}/{action}/{id}"// URL with parameters
                new { controller = "QuocHung", action = "Default",
                    id = UrlParameter.Optional } // Parameter defaults
            );

o   Nhấn F5 và chạy bạn sẽ thấy báo lỗi vì chưa có Controller QuocHung

o   Thêm mới 1 Controller tên QuocHungController và thêm 1 Action Default

public ActionResult Default()
        {
            return View();
        }
o   Nhấn F5 lại bạn sẽ thấy trang Default với 2 link: Login và New Account

o   Bạn nhấn vào link Login  bạn sẽ thấy giao diện trang Login như sau

Bài tập 2: Thẻ  HTML trong ứng dụng ASP.Net Application
o   Tiếp tục với Project FixedHtmlMVCApplication
o   Chuột phải vào Views/Account | Add | New Item
ü  Chọn Web | MVC 3 | MVC 3 View Page
ü  Tên là NewAccount.aspx

o   Mở NewAccount.aspx
ü  Ở  chế độ Source
ü  Thêm đoạn sau và chỉnh sửa như đoạn code dưới:

<form name="login" id="login" action="/Account/NewAccount">
    <table>
        <tr>
            <td colspan="2">
                Xin vui lòng cung cấp thông tin tài khoản QuocHung
            </td>
        </tr>
        <tr>
            <td>
                Địa chỉ Email:
            </td>
            <td class="style1">
                <input id="txtEmail" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Mật khẩu:
            </td>
            <td class="style1">
                <input id="txtMatKhau" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Tỉnh thành:
            </td>
            <td>
                <select id="Province" name="Province">
                            <option></option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td class="style1">
                <input id="btnDangNhap" type="submit" value="Tạo tài khoản" />
            </td>
        </tr>
    </table>
    </form>
ü  Giao diện như sau:

o    Chỉnh sửa Controller/AccountController và khai báo Action NewAccount

o   Nhấn F5 lại bạn sẽ thấy trang Default với 2 link: Login và New Account

o   Bạn nhấn vào link New Account  bạn sẽ thấy giao diện trang Login như sau

Bài tập 3: Cách đưa dữ liệu từ Controller lên View
o   Tiếp tục với Project FixedHtmlMVCApplication
o   Chỉnh sửa Controller/AccountController và khai báo Action và chỉnh sửa Action NewAccount

public ActionResult NewAccount()
        {
            List<string> provinces = new List<string>();
            provinces.Add("Ho Chi Minh");
            provinces.Add("Ha Noi");
            provinces.Add("Thua Thien Hue");
            ViewData["Provinces"] = provinces;
            return View();
        }
o   Chỉnh sửa View / NewAccount như sau:

<form name="login" id="login" action="/Account/NewAccount">
    <table>
        <tr>
            <td colspan="2">
                Xin vui lòng cung cấp thông tin tài khoản QuocHung
            </td>
        </tr>
        <tr>
            <td>
                Địa chỉ Email:
            </td>
            <td class="style1">
                <input id="txtEmail" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Mật khẩu:
            </td>
            <td class="style1">
                <input id="txtMatKhau" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Tỉnh thành:
            </td>
            <td>
                <select id="Province" name="Province">
                    <%foreach (var item in (List<string>)ViewData["Provinces"])
                      { %>
                            <option><%=item %></option>
                    <%}                 
                    %>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td class="style1">
                <input id="btnDangNhap" type="submit" value="Tạo tài khoản" />
            </td>
        </tr>
    </table>
    </form>
o   Nhấn F5 lại bạn sẽ thấy trang Default với 2 link: Login và New Account
o   Bạn nhấn vào link New Account  bạn sẽ thấy giao diện trang Login như sau

Bài tập 4:
o   Chuột phải vào Solution | Add | New Project
ü  Bạn chọn ASP.NET MVC 3 Web Application và đặt tên là HtmlHelperMVCApplication

ü  Tiếp theo bạn chọn Select a template: Empty, View Engine: ASPX. Bạn bỏ qua việc tạo mới unit test project

o   Chuột phải vào Views | Add | New Folder tên là Account và Home

o   Bạn chọn thử mục Controller, chuột phải vào | Add | Controller tên là AccountController
ü  Thay đổi Action Index thành Login

public ActionResult Login()
        {
            ViewData["SessionId"] = Session.SessionID;
            return View();
        }

o   Bạn chọn thử mục Controller, chuột phải vào | Add | Controller tên là HomeController
ü  Thay đổi Action Index thành Default

public ActionResult Default()
        {
            return View();
        }

o   Chuột phải vào Views/Account | Add | New Item
ü  Chọn Web | MVC 3 | MVC 3 View Page
ü  Tên là Login.aspx

o   Chuột phải vào Views/Home | Add | New Item
ü  Chọn Web | MVC 3 | MVC 3 View Page
ü  Tên là Default.aspx

o   Mở Default.aspx
ü  Ở  chế độ Source
ü  Thêm đoạn sau:
<div>Wellcome to ASP.NET 4.0 MVC 3</div>
<a href="/Account/Login">Login</a><br />
<a href="/Account/NewAccount">New Account</a><br />
o   Mở Login.aspx
ü  Ở  chế độ Source
ü  Thêm đoạn sau:

<% using(Html.BeginForm("Login","Account"))
   { %>
    <table class="style1">
        <tr>
            <td colspan="2">Xin vui lòng cung cấp Email và mật
khẩu đăng nhập vào QuocHung</td></tr>
        <tr>
            <td>Địa chỉ Email:</td>
            <td><%=Html.TextBox("Email","quochung211187@gmail.com"%></td>
        </tr>
        <tr>
            <td>Mật khẩu:</td>
            <td><%=Html.Password("Password"%></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="btnDangNhap" type="submit" value="Đăng nhập" /></td>
        </tr>
    </table><br/>
    <%=ViewData["SessionId"%>  
    <% } %>

o   Mở Global.asax.cs và sửa đổi MapRoute như sau

routes.MapRoute(
                "Default"// Route name
                "{controller}/{action}/{id}"// URL with parameters
                new { controller = "Home", action = "Default",
                    id = UrlParameter.Optional } // Parameter defaults
            );

o   Bạn sẽ thấy trang Default với 2 link: Login và New Account
o   Bạn nhấn vào link Login  bạn sẽ thấy giao diện trang Login như sau

o   Click phải vào trang web chọn view source bạn sẽ thấy thẻ form được tạo ra như sau

Bài tập 5: Cách đưa dữ liệu từ Controller lên View
o   Tiếp tục với Project HtmlHelperMVCApplication
o   Chỉnh sửa Controller/AccountController và khai báo Action và chỉnh sửa Action NewAccount

public ActionResult NewAccount()
        {
            List<string> provinces = new List<string>();
            provinces.Add("Ho Chi Minh");
            provinces.Add("Ha Noi");
            provinces.Add("Thua Thien Hue");
            ViewData["Provinces"] = new SelectList(provinces);
            List<string> departments = new List<string>();
            departments.Add("Accounting");
            departments.Add("Human Resource");
            departments.Add("Engineering");
            ViewData["Departments"] = new SelectList(departments);
            return View();
        }

o   Tạo mới View / NewAccount và code Html  như sau:

<form name="login" id="login" action="/Account/NewAccount">
    <table>
        <tr>
            <td colspan="2">Xin vui lòng cung cấp
thông tin tài khoản QuocHung</td>
        </tr>
        <tr><td>Địa chỉ Email:</td>
            <td class="style1"><input id="txtEmail" type="text" /></td>
        </tr>
        <tr>
            <td>Mật khẩu:</td>
            <td class="style1"><input id="txtMatKhau" type="text" /></td>
        </tr>
        <tr>
            <td>Tỉnh thành:</td>
            <td><%=Html.DropDownList("provinces") %></td>
        </tr>
        <tr>
            <td>Phòng ban:</td>
            <td><%=Html.DropDownList("Departments""Human Resource")%></td>
        </tr>
        <tr>
            <td></td>
            <td class="style1"><input id="btnDangNhap" type="submit"
             value="Tạo tài khoản" /></td>
        </tr>
    </table>
</form>

o   Nhấn F5 lại bạn sẽ thấy trang Default với 2 link: Login và New Account
o   Bạn nhấn vào link New Account  bạn sẽ thấy giao diện trang Login như sau

0 comments:

Post a Comment