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>
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>
</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>
</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>
</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
