Tin tức

Thiết kế web ASP.NET 4.5 - Giao diện và điều hướng - Phần 1

27/01/2013

Trong phần hướng dẫn này, bạn sẽ sửa đổi giao diện người dùng của ứng dụng Web mặc định để hỗ trợ các tính năng của ứng dụng Wingtip Toys store trước. Ngoài ra, bạn sẽ bổ sung thêm dữ liệu gán điều hướng đơn giản. Hướng dẫn này được xây dựng dựa trên hướng dẫn trước "Tạo lớp truy cập dữ liệu" và là một phần chuỗi bài viết về Wingtip Toys. Nếu bạn đã từng thiết kế web với ASP.NET phần thiết kế giao diện các bước cũng tương tự.

Bạn sẽ tìm hiểu về:

• Cách thay đổi giao diện hỗ trợ các tính năng của ứng dụng Wingtip Toys trước đó.
• Cách cấu hình các thành phần HTML5 để bao gồm điều hướng trang.
• Cách tạo điều khiển để điều hướng dữ liệu sản phẩm.
• Cách hiển thị dữ liệu từ cơ sở dữ liệu được tạo sử dụng Entity Framework Code First trong phần trước.

ASP.NET Web Forms cho phép bạn tạo nội dung động cho ứng dụng Web. Mỗi trang web ASP.NET được tạo ra một cách tương tự như một trang web tĩnh HTML (một trang mà không bao gồm mã chạy trên máy chủ), nhưng trang web ASP.NET bao gồm các yếu tố phụ mà ASP.NET nhận và xử lý để tạo ra HTML khi trang chạy.

Với một trang HTML tĩnh (tệp htm hoặc html.), máy chủ đáp ứng một yêu cầu bằng cách đọc các tập tin và gửi nó về trình duyệt Web. Ngược lại, khi một người nào đó yêu cầu một trang Web ASP.NET (aspx file.), trang chạy như một chương trình trên máy chủ Web. Trong khi trang web được chạy, nó có thể thực hiện bất kỳ công việc website của bạn yêu cầu, bao gồm cả việc tính toán giá trị, đọc hoặc ghi thông tin cơ sở dữ liệu, hoặc gọi các chương trình khác. Kết quả, trang động tạo ra mã đánh dấu (chẳng hạn như các thành phần trong HTML) và gửi kết quả động này cho trình duyệt.

Sửa đổi giao diện

Tiếp tục loạt bài hướng dẫn này bằng cách sửa trang Default.aspx. Bạn sẽ sửa đổi giao diện người dùng đã được thực hiện bởi các mẫu mặc định được dùng để tạo ra ứng dụng. Các sửa đổi, sẽ thực hiện là công việc điển hình khi tạo ra bất kỳ hình thức ứng dụng Web hoặc trong quá trình thiết kế web. Bạn sẽ thực hiện điều này bằng cách thay đổi tiêu đề, thay thế một số nội dung và loại bỏ nội dung mặc định không cần thiết trong quá trình thiết kế web

1. Mở hoặc chuyển sang trang Default.aspx.
2. Nếu trang xuất hiện trong chế độ thiết kế web (Design), chuyển sang chế độ nguồn Source.
3. Ở trên cùng của trang trong chỉ thị @Page, thay đổi thuộc tính Title thành to “Welcome”, như dưới đây.

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
                 CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

4. Thay thế nội dung mặc định với mã đánh dấu dưới đây. 

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Wingtip Toys can help you find the perfect gift</h2>
            </hgroup>
            <p>
                We're all about transportation toys. You can order
                any of our toys today. Each toy listing has detailed
                information to help you choose the right toy.
            </p>
        </div>
    </section>
</asp:Content>

5. Thay thế tất cả nội dụng được chứa trong vùng chứa (placeholder) MainContent, do đó phần thẻ HTML bây giờ như sau:

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <section style="vertical-align: middle">
    </section>
</asp:Content>

6. Lưu trang Default.aspx bằng cách chọn Save Default.aspx từ menu File
Kết quả trang Default.aspx sẽ xuất hiện như hình dưới đây:
<%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
 
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Wingtip Toys can help you find the perfect gift</h2>
            </hgroup>
            <p>
                We're all about transportation toys. You can order
                any of our toys today. Each toy listing has detailed
                information to help you choose the right toy.
            </p>
        </div>
    </section>
</asp:Content>
 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <section style="alignment-adjust: middle">
    </section>
</asp:Content>

Trong ví dụ này, bạn gán thuộc tính Title của chỉ thị @Page. Khi mã HTML được hiển thị trong một trình duyệt, mã chạy trên máy chủ <%: Page.Title %> được xử lý nội dung chứa trong thuộc tính Title.

Ví dụ bao gồm các thành phần cơ bản cấu thành một tran. Các trang web có chứa văn bản tĩnh mà bạn có thể có trong một trang HTML, cùng với các thành phần được chỉ ra cho ASP.NET.

Chỉ thị @Page

ASP.NET Web Forms thường chứa chỉ thị cho phép bạn xác định các thuộc tính trang và thông tin cấu hình cho trang. Các chỉ thị được sử dụng bởi ASP.NET như các hướng dẫn làm thế nào để xử lý các trang, nhưng chúng không được tạo và trả về trình duyệt dưới dạng mã đánh dấu.

Các chỉ thị được sử dụng phổ biến nhất là chỉ thị @Page, cho phép bạn chỉ định nhiều tùy chọn cấu hình cho trang web, bao gồm những thành phần sau đây:

• Ngôn ngữ lập trình cho mã trong trang, ví dụ như C#.
• Mã máy có thể được bao gồm trong một trang gọi là Inline code hoặc mã được tách một tệp riêng gọi là code-behind
• Có hay không trang kết hợp với một trang master và nếu vậy nó sẽ được coi như một trang nội dung.
• Gỡ lỗi và các tùy chọn giám sát.

Nếu bạn không bao gồm một chỉ thị @Page trong trang, hoặc nếu các chỉ thị không bao gồm một thiết lập cụ thể, thiết lập sẽ được thừa hưởng từ file cấu hình Web.config hoặc từ các tập tin cấu hình Machine.config. Tệp Machine.config cung cấp thêm các thiết lập cấu hình cho tất cả các ứng dụng đang chạy trên máy.

Các điều khiển chạy phía máy chủ (Web Server Controls)

Trong hầu hết các ứng dụng ASP.NET Web Forms, bạn sẽ thêm các điều khiển cho phép người dùng tương tác với các trang, bao gồm các nút, hộp văn bản, danh sách.v.v... Những điều khiển chạy trên máy chủ Web tương tự như nút HTML và các yếu tố đầu vào. Tuy nhiên, chúng được xử lý trên máy chủ, cho phép bạn sử dụng mã máy chủ để gán các thuộc tính của chúng. Những điều khiển này cũng kích hoạt sự kiện mà bạn có thể xử lý trong mã máy chủ

Điều khiển chạy phía máy chủ sử dụng cú pháp đặc biệt mà ASP.NET nhận ra khi trang chạy. Tên tag cho ASP.NET các điều khiển chạy phía máy chủ bắt đầu với tiền tồ asp:. Điều này cho phép ASP.NET nhận biết và xử lý các điều khiển chạy phía máy chủ. Tiền tố có thể khác nếu điều khiển không phải là thành phần của .NET Framework. Ngoài tiền tố asp:,  các điều khiển ASP.NET chạy phía máy chủ còn bao gồm thuộc tính runat = "server" và một  thuộc tính ID có thể sử dụng để tham chiếu tới điều khiển trong mã phía máy chủ .

Khi trang web chạy, ASP.NET xác định điều khiển máy chủ và chạy mã được liên kết với các điều khiển. Các điều khiển được tạo ra và trả về dạng HTML hoặc dạng đánh dấu khác trong trang khi nó được hiển thị trong trình duyệt.

Mã chạy phía máy chủ

Hầu hết các ứng dụng ASP.NET Web Forms bao gồm mã chạy trên máy chủ khi trang được xử lý. Như đã đề cập ở trên, mã máy chủ có thể được sử dụng để làm nhiều thứ, chẳng hạn như thêm dữ liệu vào một điều khiển ListView. ASP.NET hỗ trợ nhiều ngôn ngữ để chạy trên máy chủ, bao gồm cả C #, Visual Basic, J #, và những ngôn ngữ khác.

ASP.NET hỗ trợ hai mô hình để viết mã máy chủ cho một trang Web. Trong mô hình đơn tập tin, các mã cho trang là một thành phần mã kịch bản thẻ mở bao gồm các thuộc tính runat = "server". Ngoài ra, bạn có thể tạo ra các mã cho các trang trong một tập tin với lớp riêng biệt, được gọi là mô hình code-behind. Trong trường hợp này, trang ASP.NET Web Forms nói chung không chứa mã máy chủ. Thay vào đó là chỉ thị @Page  bao gồm các thông tin liên kết các trang aspx với tập tin liên quan đến mã phía sau của nó.

Thuộc tính CodeBehind chứa trong chỉ thị @Page  chỉ định tên của tập tin lớp riêng biệt, và  thuộc tính Inherits xác định tên của lớp bên trong file code-behind tương ứng với trang.

Thiet ke web mien phi,  Hoc thiet ke web

ESVN-Nơi hội tụ giải pháp

Công ty cổ phần Eastern Sun Việt Nam