Hướng dẫn từng bước tạo ứng dụng Web Shop Music Store bằng ASP.NET MVC3

 ngăn chặn các 
hành động điều khiển được thực hiện bằng cách duyệt / Store / GenreMenu. Này không cần thiết cho 
các quan điểm một phần, nhưng nó là một thực hành tốt, kể từ khi chúng tôi muốn chắc chắn rằng 
hành động của chúng ta điều khiển được sử dụng như chúng tôi dự định. Chúng tôi cũng đang quay trở 
lại PartialView hơn là View, cho phép các công cụ xem biết rằng nó không nên sử dụng Giao diện cho 
quan điểm này, khi nó đang được bao gồm trong các quan điểm khác. 
Nhấp chuột phải vào hành động điều khiển GenreMenu và tạo ra một cái nhìn một phần GenreMenu 
tên được mạnh mẽ đánh máy bằng cách sử dụng xem loại dữ liệu lớp như hình dưới đây. 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Cập nhật mã xem cho xem GenreMenu một phần để hiển thị các mục bằng cách sử dụng một danh 
sách có thứ tự như sau. 
@model IEnumerable 
 @foreach (var genre in Model) 
 { 
 @Html.ActionLink(genre.Name, 
 "Browse", "Store", 
 new { Genre = genre.Name }, null) 
 } 
Đang cập nhật Giao diện trang web để hiển thị Xem một phần của 
chúng tôi 
Chúng tôi có thể thêm quan điểm một phần của chúng tôi để bố trí trang web (/ xem / chia sẻ / 
_Layout.cshtml) gọi Html.RenderAction (). Chúng tôi sẽ thêm cả hai, cũng như đánh dấu một số bổ 
sung để hiển thị chúng, như hình dưới đây: 
 @ViewBag.Title 
 <link href="@Url.Content("~/Content/Site.css")" 
rel="stylesheet" 
 type="text/css" /> 
 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" 
 type="text/javascript"> 
 ASP.NET MVC MUSIC 
STORE 
 Home 
 Store 
 @{Html.RenderAction("CartSummary", "ShoppingCart");} 
 Admin 
 @{Html.RenderAction("GenreMenu", "Store");} 
 @RenderBody() 
 built with ASP.NET MVC 3 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Bây giờ khi chúng ta chạy ứng dụng, chúng ta sẽ thấy Genre trong vùng điều hướng bên trái Tóm tắt 
thông tin giỏ hàng ở đầu trang. 
Cập nhật trang Browse cửa hàng 
Trang Browse Store là chức năng, nhưng không nhìn rất tốt. Chúng ta có thể cập nhật các trang để 
hiển thị các album trong một bố cục tốt đẹp hơn bằng cách cập nhật mã xem (tìm thấy / Views / Store 
/ Browse.cshtml) như sau: 
@model MvcMusicStore.Models.Genre 
@{ 
 ViewBag.Title = "Browse Albums"; 
} 
 @Model.Name Albums 
 @foreach (var album in Model.Albums) 
 { 
 <a href="@Url.Action("Details", 
 new { id = album.AlbumId })"> 
 <img alt="@album.Title" 
 src="@album.AlbumArtUrl" /> 
 @album.Title 
 } 
Ở đây chúng tôi đang làm việc sử dụng của Url.Action hơn là Html.ActionLink để chúng tôi có thể áp 
dụng định dạng đặc biệt để liên kết để bao gồm các album ảnh nghệ thuật. 
Lưu ý: Chúng tôi đang hiển thị bìa album chung cho các album này. Thông tin này được lưu trữ trong cơ 
sở dữ liệu và có thể chỉnh sửa thông qua các Store Manager. Bạn được chào đón để thêm tác phẩm 
nghệ thuật của riêng bạn. 
Bây giờ khi chúng tôi duyệt đến một loại, chúng ta sẽ thấy các album được hiển thị trong một mạng 
lưới với các tác phẩm nghệ thuật album. 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Cập nhật trang Home để hiển thị các album bán chạy hàng đầu 
Chúng tôi muốn để tính năng album bán chạy hàng đầu của chúng tôi vào trang chủ để tăng doanh 
số bán hàng.Chúng tôi sẽ làm cho một số cập nhật HomeController của chúng tôi để xử lý đó, và 
thêm một số đồ họa bổ sung như. 
Đầu tiên, chúng ta sẽ thêm một tài sản chuyển hướng đến lớp Album của chúng tôi để 
EntityFramework đó biết rằng họ đang liên kết. Vài dòng cuối cùng của chúng tôi Album lớp nên bây 
giờ trông như thế này: 
public virtual Genre Genre { get; set; } 
public virtual Artist Artist { get; set; } 
public virtual ListOrderDetails { get; set; } 
 } 
} 
Lưu ý: Điều này sẽ yêu cầu thêm một tuyên bố bằng cách sử dụng để mang lại trong không gian tên 
System. 
Đầu tiên, chúng ta sẽ thêm một trường storeDB các MvcMusicStore.Models cách sử dụng câu, như 
trong các bộ điều khiển khác của chúng tôi. Tiếp theo, chúng ta sẽ thêm các phương pháp sau đây để 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
HomeController truy vấn cơ sở dữ liệu của chúng tôi để tìm các album bán chạy nhất theo 
OrderDetails. 
. 
private List GetTopSellingAlbums(int count) 
 { 
 // Group the order details by album and return 
 // the albums with the highest count 
 return storeDB.Albums 
 .OrderByDescending(a => a.OrderDetails.Count()) 
 .Take(count) 
 .ToList(); 
} 
This is a private method, since we don’t want to make it available as a controller action. We are 
including it in the HomeController for simplicity, but you are encouraged to move your business logic 
into separate service classes as appropriate. 
With that in place, we can update the Index controller action to query the top 5 selling albums and 
return them to the view. 
public ActionResult Index() 
{ 
 // Get most popular albums 
 var albums = GetTopSellingAlbums(5); 
 return View(albums); 
 } 
Đây là một phương pháp riêng, vì chúng ta không muốn để làm cho nó có sẵn như là một hành động 
điều khiển.Chúng tôi bao gồm cả nó trong HomeController vì đơn giản, nhưng bạn được khuyến 
khích để di chuyển logic kinh doanh của bạn vào các lớp học dịch vụ riêng biệt cho phù hợp. 
Với tại chỗ, chúng tôi có thể cập nhật các Chỉ số hành động điều khiển để truy vấn 5 album bán chạy 
nhất và trả lại để xem. 
public ActionResult Index() 
{ 
 // Get most popular albums 
 var albums = GetTopSellingAlbums(5); 
 return View(albums); 
 } 
Đoạn code hoàn chỉnh cho HomeController cập nhật như hình dưới đây. 
using System.Collections.Generic; 
 using System.Linq; 
 using System.Web.Mvc; 
 using MvcMusicStore.Models; 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
namespace MvcMusicStore.Controllers 
{ 
 public class HomeController : Controller 
 { 
 // 
 // GET: /Home/ 
 MusicStoreEntities storeDB = new MusicStoreEntities(); 
 public ActionResult Index() 
 { 
 // Get most popular albums 
 var albums = GetTopSellingAlbums(5); 
 return View(albums); 
 } 
 private List GetTopSellingAlbums(int count) 
 { 
 // Group the order details by album and return 
 // the albums with the highest count 
 return storeDB.Albums 
 .OrderByDescending(a => a.OrderDetails.Count()) 
 .Take(count) 
 .ToList(); 
 } 
 } 
} 
Cuối cùng, chúng tôi sẽ cần phải cập nhật xem Index Trang chủ của chúng tôi để nó có thể hiển thị 
một danh sách các album bằng cách cập nhật các loại mẫu và thêm danh sách album để phía 
dưới. Chúng tôi sẽ nhân cơ hội này cũng thêm một tiêu đề và một phần xúc tiến trang. 
@model List 
@{ 
 ViewBag.Title = "ASP.NET MVC Music Store"; 
} 
Fresh off the grill 
 @foreach (var album in Model) 
 { 
 <a href="@Url.Action("Details", "Store", 
 new { id = album.AlbumId })"> 
 @album.Title 
 } 
Bây giờ khi chúng ta chạy các ứng dụng, chúng tôi sẽ cập nhật trang chủ của chúng tôi với các album 
bán chạy nhất và thông điệp quảng cáo của chúng tôi. 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Kết luận 
Chúng ta đã thấy rằng ASP.NET MVC làm cho nó dễ dàng để tạo một trang web phức tạp với truy cập 
cơ sở dữ liệu, hội viên, AJAX, vv khá nhanh chóng. Hy vọng rằng hướng dẫn này đã cho bạn những 
công cụ bạn cần để bắt đầu xây dựng các ứng dụng ASP.NET MVC của riêng của bạn! 
DEMO PHẦN TÌM KIẾM AJAX 
Nếu các bạn muốn tạo chức năng tìm kiếm tương tự như google, nhập keyword đến đâu 
thì tự động search kết quả đến đó mà ko cần phải refresh lại trang thì có thể sử dụng 
jQuery. 
Trong homecontroller tôi tạo thêm 2 action : 
public ActionResult Search() 
 { 
 return View(); 
 } 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
 public ActionResult SearchResult(string s) 
 { 
 var albums = storeDB.Albums.Where(a => a.Title.Contains(s)); 
 return PartialView(albums); 
 } 
Tạo các 2 view tương ứng với 2 Action trên là Search.aspx và SearchResult.ascx, lưu ý 
với view SearchResult.aspx thì nhớ chọn cả mục Create a partial view(.ascx). 
Ở view Search thì chỉ có 1 html input và 1 button submit, kết quả nhận được sẽ display ở 
partialview SearchResult. 
Source của Search.aspx như sau : 
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage" %> 
 function onSuggestion() { 
 $('#keyword').keyup(function () { 
 $('#key').val($('#keyword').val()); 
 $.get('/home/SearchResult', { s: $('#keyword').val() }, 
function (data) { 
 $('#result').html(data); 
}); 
 } 
); 
 } 
Search 
<% using(Ajax.BeginForm("SearchResult","Home",new AjaxOptions 
{ 
InsertionMode=InsertionMode.Replace, 
HttpMethod="GET", 
UpdateTargetId="result" 
})){%> 
Lưu ý ở hàm JS mà tôi sử dụng jQuery, Mỗi khi bắt sự kiện keyup của cái textbox thì tôi 
gửi 1 HTTP get request về server : 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
 function onSuggestion() { 
 $('#keyword').keyup(function () { 
 $('#key').val($('#keyword').val()); 
 $.get('/home/SearchResult',{s:$('#keyword').val()}, 
 function (data) { 
 $('#result').html(data); 
 }); 
 } 
 ); 
 } 
Cái SearchResult chỉ đơn giản là show ra kết quả, và đc render mỗi khi submit ở view 
Search : 
" %> 
AlbumId 
GenreId 
ArtistId 
Title 
Price 
AlbumArtUrl 
 | 
 | 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Lưu ý là ở Site.Master các bạn phải báo mấy cái script cần thiết : 
<script src="../../Scripts/MicrosoftAjax.js" 
type="text/javascript"> 
 <script src="../../Scripts/MicrosoftMvcAjax.js" 
type="text/javascript"> 
 <script src="../../Scripts/jquery-1.4.1.js" 
type="text/javascript"> 
Code Site.master 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" 
Inherits="MVC_MusicStore_Egroups.Views.Shared.Site" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
""> 
 Search Ajax 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
 DEMO MVC3 MUSIC STORE - EGROUPS 
 Home 
 Store 
 Admin 
 Xây dựng bởi E-Groups Việt Nam 
kết quả các bạn sẽ đc như sau : 
Edit by Nhiên IT ( www.eg.vnao.vn ) 
Xong, chúc bạn thành công !