ĐÀO TẠO DOANH NGHIỆP : SỞ KHOA HỌC CÔNG NGHỆ TỈNH ĐỒNG NAI

ENTERPRISE TRAINING: DONG NAI DEPARTMENT OF SCIENCE AND TECHNOLOGY.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

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