Tin tức

Thiết kế web ASP.NET 4.5- Hiển thị dữ liệu - Phần 2

02/02/2013

Chạy ứng dụng

Sau khi hoàn thành việc thiết lập và viết mã lệnh hiển thị dữ liệu, bạn có thể thực hiện chạy ứng dụng. Chạy ứng dụng bây giờ bạn có thể xem tất cả các sản phẩm chỉ một tập sản phẩm được giới hạn theo danh mục sản phẩm 
1. Ơ chế độ thiết kế web (Design), trong Solution Explorer, bấm chuột phải lên trang Default.aspx và chọn View in Browser.
Trình duyệt sẽ mở và hiển thị trang Default.aspx.
2. Chọn Cars từ danh mục trong menu điều hướng.
Trang  ProductList.aspx được hiển thị với những sản phẩm trong danh Carsmục “”.

thiết kế web
3. Chọn Products từ menu điều hướng ỏe trên cùng.
Ngược lại  trang ProductList.aspx hiển thị toàn bộ danh sách sản phẩm.
thiết kế web

4. Đóng trình duyệt trở về Visual Studio.

Thêm điều khiển dữ liệu hiển thị chi tiết sản phẩm
Tiếp theo, bạn sẽ sửa mã đánh dấu trong trang ProductDetails.aspx để có thể hiển thị thông tin chi tiết từng sản phẩm.
1. Ở chế độ thiết kế web Trong Solution Explorer, mở trang ProductDetails.aspx và chuyển sang chế độ Source.
2. Thay thế mã đánh dấu với mã sau:

<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
         CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <asp:FormView ID="productDetails" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false">
        <ItemTemplate>
            <div>
                <h1><%#:Item.ProductName %></h1>
            </div>
            <br />
            <table>
                <tr>
                    <td>
                        <img src="/Catalog/Images/<%#:Item.ImagePath %>" border="1" alt="<%#:Item.ProductName %>" height="300" />
                    </td>
                    <td style="vertical-align: top">
                        <b>Description:</b><br /><%#:Item.Description %>
                        <br />
                        <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                        <br />
                        <span><b>Product Number:</b> <%#:Item.ProductID %></span>
                        <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
Mã này sử dụng một điều khiển FormView để hiển thị thông tin chi tiết về một sản phẩm riêng biệt. Mã này sử dụng các phương thức để hiển thị dữ liệu trong trang ProductList.aspx. Điểu khiển FormView được sử dụng để hiển thị một bản ghi duy nhất tại một thời điểm từ một nguồn dữ liệu. Khi sử dụng điều khiển FormView, bạn tạo ra các mẫu (template) để hiển thị và chỉnh sửa các giá trị dữ liệu được gắn kết. Các mẫu chứa các điều khiển, biểu thức gắn kết, và định dạng  giao diện và chức năng của biểu mẫu (form).
Để kết nối mã đánh dấu tới cơ sở dữ liệu, bạn phải bổ sung thêm mã cho trang ProductDetails.aspx.
1. Ở chế độ thiết kế web, trong Solution Explorer, bấm chuột phải lên trang ProductDetails.aspx và bấm View Code.
file ProductDetails.aspx.cs với mã lệnh được hiển thị.
2. Thay thế mã hiện hành bằng mã dưới đây:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;
 
namespace WingtipToys
{
    public partial class ProductDetails : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        public IQueryable<Product> GetProduct([QueryString("productID")]int? productId)
        {
            var _db = new WingtipToys.Models.ProductContext();
            IQueryable<Product> query = _db.Products;
            if (productId.HasValue && productId > 0)
            {
                query = query.Where(p => p.ProductID == productId);
            }
            else
            {
                query = null;
            }
            return query;
        }
    }
}

Mã này kiểm tra giá trị "ProductID" của chuỗi truy vấn (QueryString). Nếu giá trị chuỗi truy vấn được tìm thấy, các sản phẩm phù hợp được hiển thị. Nếu không có chuỗi truy vấn được tìm thấy, hoặc giá trị chuỗi truy vấn không hợp lệ, không có sản phẩm nào được hiển thị trên trang ProductDetails.aspx.

Chạy ứng dụng

Để kiểm tra kết quả, bây giờ bạn chạy ứng dụng để thấy thông tin từng sản phẩm được hiển thị dựa trên mã của từng sản phẩm.
1. Ở chế độ thiết kế web, trong Solution Explorer, bấm chuột phải lên trang Default.aspx và chọn View in Browser.
Trình duyệt sẽ mở và hiển thị trang Default.aspx.
2. Chọn "Boats" từ danh mục trên meu điều hướng.
Trang ProductList.aspx được hiển thị.
3. Chọn sản phẩm “Paper Boat” từ danh sách sản phẩm.
Trang ProductDetails.aspx được hiển thị.
thiết kế web

4. Đóng trình duyệt.

Tóm lược

Trong hướng dẫn của loạt bài này, bạn có thêm mã đánh dấu và mã để hiển thị một danh sách các sản phẩm và hiển thị chi tiết sản phẩm. Trong quá trình này, bạn đã tìm hiểu về điều khiển  dữ liệu, mô hình liên kết, và các nguồn cung cấp giá trị. Trong hướng dẫn tiếp theo, bạn sẽ thêm một giỏ mua hàng cho ứng dụng mẫu Wingtip Toys.

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