Tin tức

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

02/02/2013

Hướng dẫn này mô tả làm thế nào để hiển thị dữ liệu và các chi tiết mục dữ liệu bằng cách sử dụng ASP.NET Web Forms và Entity Framework Code First. Hướng dẫn này được xây dựng dựa trên hướng dẫn trước "giao diện người dùng và định hướng" và là một phần của loạt bài hướng dẫn về ứng dụng the Wingtip Toy Store. Khi đã hoàn thành hướng dẫn này, bạn có thể xem các sản phẩm trên trang ProductsList.aspx và thông tin chi tiết từng sản phẩn trên trang ProductDetails.aspx.

Trong bài này bạn sẽ được hướng dẫn:
Thêm điều khiển dữ liệu để hiển thị sản phẩm từ cơ sở dữ liệu.
Kết nối điều khiển dữ liệu tới dữ liệu được chọn.
Thêm điều khiển dữ liệu để hiển thị chi tiết sản phẩm từ cơ sở dữ liệu.
Nhận một giá trị từ chuỗi truy vấn và sử dụng giá trị để giới hạn dữ liệu lấy về từ cơ sở dữ liệu.


Trong bài viết này có hai tính năng sẽ được giới thiệu đó là:
Mô hình liên kết dữ liệu (Model Binding)
Trình cung cấp giá tị (Value providers)

Thêm điều khiển dữ liệu để hiển thị thông tin sản phẩm

Khi liên kết dữ liệu vào một điều khiển, có các tùy chọn khác nhau mà bạn có thể sử dụng. Các tùy chọn phổ biến nhất bao gồm thêm một điều khiển nguồn dữ liệu, thêm mã bằng thủ công, hoặc bằng cách sử dụng mô hình liên kết

Sử dụng điều khiển dữ liệu nguồn để liên kết dữ liệu

Thêm một điều khiển nguồn dữ liệu (Data Source Control) cho phép bạn liên kết điểu khiển nguồn dữ liệu để hiển thị dữ liệu. Cách tiếp cận này cho phép khai báo điều khiển kết nối trực tiếp tới nguồn dữ liệu phía máy chủ, thay vì sử dụng một cách tiếp cận lập trình.

Lập trình thủ công để liên kết dữ liệu

Việc viết mã để thực hiện việc đọc các giá trị, kiểm tra một giá trị null, chuyển đổi dữ liệu sang kiểu thích hợp, kiểm tra xem việc chuyển đổi thành công, và cuối cùng, bằng cách sử dụng các giá trị trong mệnh đề truy vấn. Bạn sử dụng phương pháp này khi bạn cần duy trì việc kiểm soát logic khi truy cập dữ liệu.

Sử dụng mô hình liên kết để gắn kết dữ liệu 

Sử dụng mô hình liên kết cho phép bạn có được kết quả nhanh nhất, ít phải viết mã đồng thời cung cấp khả năng tái sử dụng các chức năng trong suốt ứng dụng. Mô hình liên kết nhằm mục đích đơn giản hóa công việc viết mã lệnh trong khi vẫn đảm bảo được các lợi ích của khung gắn kết dữ liệu một cách đa dạng.

Hiển thị sản phẩm

Trong hướng dẫn này, bạn sẽ sử dụng mô hình liên kết để gắn kết dữ liệu. Để cấu hình một điều khiển dữ liệu sử dụng mô hình liên kết để lựa chọn dữ liệu, bạn gán thuộc tính SelectMethod của điều khiển cho tên của một phương thức trong mã lệnh của của trang. Điều khiển dữ liệu gọi phương thức vào thời điểm phù hợp trong vòng đời của trang và tự động gắn kết với dữ liệu trả về. Không cần phải gọi phương thức DataBind một cách tường minh, đây cũng là một cải tiến trong việc thiết kế web bằng ASP.NET

Sử dụng các bước dưới đây, bạn sẽ sửa đổi mã HTML trong trang ProductList.aspx để các trang có thể hiển thị các sản phẩm.
1. Ở chế độ thiết kế web (Design), trong  Solution Explorer, mở trang ProductList.aspx và chuyển về chế độ Source.
2. Thay đổi mã đánh dấu với đoạn mã sau:
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
         CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Page.Title %></h1>
            </hgroup>
 
                 <section class="featured">
                    <ul>
                        <asp:ListView ID="productList" runat="server"
                            DataKeyNames="ProductID"
                            GroupItemCount="3" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                            <EmptyDataTemplate>     
                                <table id="Table1" runat="server">       
                                    <tr>         
                                        <td>No data was returned.</td>       
                                    </tr>    
                                </table
                            </EmptyDataTemplate
                            <EmptyItemTemplate>    
                                <td id="Td1" runat="server" /> 
                            </EmptyItemTemplate
                            <GroupTemplate>   
                                <tr ID="itemPlaceholderContainer" runat="server">     
                                    <td ID="itemPlaceholder" runat="server"></td>   
                                </tr
                            </GroupTemplate
                            <ItemTemplate>   
                                <td id="Td2" runat="server">     
                                    <table>       
                                        <tr>         
                                            <td> </td>         
                                            <td>
                                                <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                                    <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                                        width="100" height="75" border="1"/></a>
                                            </td>
                                            <td>
                                                <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                                    <span class="ProductName">
                                                        <%#:Item.ProductName%>
                                                    </span>
                                                </a>           
                                                <br />
                                                <span class="ProductPrice">          
                                                    <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                                </span>
                                                <br />           
                                            </td>       
                                        </tr>     
                                    </table>   
                                </td
                            </ItemTemplate
                            <LayoutTemplate>   
                                <table id="Table2" runat="server">     
                                    <tr id="Tr1" runat="server">       
                                        <td id="Td3" runat="server">         
                                            <table ID="groupPlaceholderContainer" runat="server">           
                                                <tr ID="groupPlaceholder" runat="server"></tr>         
                                            </table>       
                                        </td>     
                                    </tr>     
                                    <tr id="Tr2" runat="server"><td id="Td4" runat="server"></td></tr>   
                                </table
                            </LayoutTemplate>
                        </asp:ListView>
                    </ul>
               </section>
        </div>
    </section>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

Mã sử dụng một điều khiển ListView được đặt tên là "productList" để hiển thị sản phẩm.
<asp:ListView ID="productList" runat="server"

Điều khiển ListView hiển thị dữ liệu theo một định dạng được định nghĩa bằng cách sử dụng các mẫu (template) và kiểu (style).  Điều đó rất hữu ích cho dữ liệu có dạng cấu trúc lặp lại. Ví dụ đơn giản như ListView  có thể hiển thị dữ liệu từ cơ sở dữ liệu, tuy nhiên bạn có thể cho phép người dùng chỉnh sửa, chèn, và xóa dữ liệu, và sắp xếp và trang dữ liệu, mà không cần viết mã lệnh.

Bằng cách thiết lập thuộc tính ItemIype trong điều khiển ListView, biểu thức gán dữ liệu Item có sẵn và điều khiển trở thành một kiểu mạnh . Như đã đề cập trong hướng dẫn trước đây, bạn có thể lựa chọn các chi tiết của đối tượng Item bằng cách sử dụng IntelliSense, chẳng hạn như chỉ ra tên sản phẩm thông qua thuộc tính ProductName:
thiết kế web

Ngoài ra, bạn sử dụng mô hình liên kết để chỉ rõ giá trị của phương thức SelectMethod .  Giá trị này (GetProducts) sẽ tương ứng với phương thức mà bạn sẽ thêm vào mã lệnh để hiển thị các sản phẩm trong bước tiếp theo.

Thêm mã hiển thị sản phẩm 

Trong bước này, bạn sẽ thêm mã để thao tác với điều khiển ListView với dữ liệu sản phẩm từ cơ sở dữ liệu. Mã lệnh sẽ hỗ trợ hiển thị sản phẩm theo từng danh mục, cũng như tất cả các sản phẩm.

1. Ở chế độ thiêt kế web, trong Solution Explorer, bấm chuột phải vào file ProductList.aspx và chọn View Code.
2. Thay thế mã hiện hành trong file ProductList.aspx.cs với mã sau:

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 ProductList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId)
        {
            var _db = new WingtipToys.Models.ProductContext();
            IQueryable<Product> query = _db.Products;
            if (categoryId.HasValue && categoryId > 0)
            {
                query = query.Where(p => p.CategoryID == categoryId);
            }
            return query;
        }
    }
}

Mã lệnh này này cho thấy phương thức GetProducts được tham chiếu bởi thuộc tính ItemType  của điều khiển ListView trong trang ProductList.aspx. Để giới hạn kết quả cho một danh mục cụ chỉ định trong cơ sở dữ liệu, mã lệnh gán giá trị categoryId từ một giá trị chuỗi truy vấn được truyền cho trang ProductList.aspx khi trang ProductList.aspx được điều hiển thị. Lớp QueryStringAttribute trong không gian tên System.Web.ModelBinding được sử dụng để lấy giá trị của biến id trong chuỗi truy vấn. Hướng mô hình liên kết này gắn một giá trị từ chuỗi truy vấn đến tham số  categoryId vào lúc chạy.

Khi một danh mục hợp lệ được truyền vào thông qua chuỗi truy vấn tới tới trang, kết quả của truy vấn được giới hạn cho các sản phẩm trong cơ sở dữ liệu phù hợp với giá trị categoryId. Ví dụ, nếu URL trang ProductsList.aspx như sau: http://localhost/ProductList.aspx?id=1, có nghĩa là trang web chỉ hiển thị các sản phẩm có mã danh mục bằng 1.

Nếu không có chuỗi truy vấn được bao gồm khi điều hướng đến trang ProductList.aspx, tất cả các sản phẩm sẽ được hiển thị.

Nguồn của các giá trị cho các  phương thức này được gọi là nhà nguồn cung cấp giá trị (dưới dạng QueryString), và các thuộc tính tham số cho biết giá trị nguồn cung cấp để sử dụng được gọi là thuộc tính nguồn cung cấp dịch vụ giá trị (chẳng hạn như "id"). ASP.NET bao gồm các nguồn cung cấp giá trị và các thuộc tính tương ứng cho tất cả các nguồn dữ liệu đầu vào trong một ứng dụng Web Forms, chẳng hạn như chuỗi truy vấn, tập tin cookie, giá trị của form, điều khiển, state, biến session, và các thuộc tính hồ sơ. Bạn cũng có thể viết tùy chỉnh các nguồn cung cấp giá trị.

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