首页主要包括两部分，主体部分显示15个最新的的商品，右边则显示10条最新的优惠信息。主体部分可以直接使用传入的数据生成，也可以通过分类列表的方法生成，看个人喜好。而优惠信息则使用分类的方法生成。
在完成首页前，需要做点准备功夫，因为需要显示评价，所以首先到地址“http://plugins.jquery.com/project/Star_Rating_widget
”下载一个名称为“jQuery
UI
Stars”的插件。插件下载后，将jquery.ui.stars.css文件添加到Content文件夹，jquery.ui.stars.min.js文件添加到Scripts文件夹，而jquery.ui.stars.gif则放到images文件夹。最后还需要修改一下jquery.ui.stars.css文件中背景图片的路径。
在母版页_Layout.cshtml的head中增加以下文件的引用：
| 1 |
<
link
href
=
"
@Url.Content(
"
~
/
Content
/
jquery
.
ui
.
stars
.
css
"
)
"
rel
=
"
stylesheet
"
type
=
"
text/css
"
/
>
|
| 2 |
<
script
src
=
"
@Url.Content(
"
~
/
Scripts
/
jquery
-
ui
.
min
.
js
"
)
"
type
=
"
text/javascript
"
>
<
/
script
>
|
| 3 |
<
script
src
=
"
@Url.Content(
"
~
/
Scripts
/
jquery
.
ui
.
stars
.
min
.
js
"
)
"
type
=
"
text/javascript
"
>
<
/
script
>
|
| 4 |
|
现在要完成首页的整体布局，打开Index.cshtml，讲ViewBag.Title修改为“首页——Ext商店”，然后加入以下代码：
| 1 |
<
div
id
=
"
contentMain
"
>
|
| 2 |
<
span
class
=
"
header
"
>
最新产品
<
/
span
>
|
| 3 |
@
{
Html
.
RenderAction
(
"
Homepage
"
,
"
Product
"
)
;
}
|
| 4 |
<
/
div
>
|
| 5 |
<
div
id
=
"
contentRight
"
>
|
| 6 |
<
span
class
=
"
header
"
>
优惠信息
<
/
span
>
|
| 7 |
@
{
Html
.
RenderAction
(
"
RightList
"
,
"
News
"
)
;
}
|
| 8 |
<
/
div
>
|
| 9 |
|
代码中，最新产品和优惠信息的数据都将从partial视图获取。下面在Site.css中加入以下css：
| 1 |
#contentMain
{
float
:
left
;
width
:
580px
;
display
:
block
;
border-left
:
1px
solid
#d3d3d3
;
border-right
:
1px
solid
#d3d3d3
;
border-bottom
:
1px
solid
#d3d3d3
;
}
|
| 2 |
#contentMain
.header
{
width
:
570px
;
height
:
28px
;
background
:
url(/images/bk.gif)
repeat-x
;
line-height
:
28px
;
display
:
block
;
color
:
#000
;
font-size
:
14px
;
margin
:
0px
;
padding-left
:
10px
;
}
|
| 3 |
#contentMain
ul
{
float
:
left
;
width
:
180px
;
display
:
block
;
padding
:
0
0
10px
10px
;
}
|
| 4 |
#contentMain
li
{
list-style-type
:
none
;
}
|
| 5 |
#contentMain
.title
{
height
:
56px
;
line-height
:
14px
;
width
:
170px
;
display
:
block
;
font-size
:
12px
;
}
|
| 6 |
#contentMain
.rating
-title
{
float
:
left
;
}
|
| 7 |
#contentMain
.rating
{
float
:
left
;
width
:
90px
;
}
|
| 8 |
#contentMain
img
{
border
:
0px
;
width
:
170px
;
height
:
190px
;
}
|
| 9 |
#contentMain
a
{
text-decoration
:
none
;
color
:
#000
;
}
|
| 10 |
#contentMain
a:hover
{
text-decoration
:
underline
;
}
|
| 11 |
#contentMain
a:visited
{
text-decoration
:
none
;
color
:
#000
;
}
|
| 12 |
#contentRight
{
float
:
right
;
width
:
200px
;
display
:
block
;
border
:
1px
solid
#d3d3d3
;
padding
:
1px
;
}
|
| 13 |
#contentRight
.header
{
background
:
url(/images/leftHeader.jpg)
repeat-x
;
height
:
28px
;
line-height
:
28px
;
width
:
190px
;
display
:
block
;
color
:
#fff
;
font-size
:
14px
;
margin
:
0px
;
}
|
| 14 |
#contentRight
span
{
width
:
180px
;
display
:
block
;
height
:
20px
;
line-height
:
20px
;
background
:
transparent
url(/images/point02.jpg)
no-repeat
scroll
0
10px
;
padding-left
:
10px
;
margin-left
:
5px
;
}
|
| 15 |
#contentRight
a
{
color
:
#000
;
}
|
| 16 |
#contentRight
a:hover
{
text-decoration
:
underline
;
}
|
| 17 |
#contentRight
a:visited
{
color
:
#000
;
}
|
| 18 |
|
现在要完成最新产品的显示。在Controllers文件夹添加一个“ProductController”的控制器，首先加入对“Extshop.Models”的引用，然后添加以下代码：
| 1 |
[
ChildActionOnly
]
|
| 2 |
public
ActionResult
Homepage
(
)
|
| 3 |
{
|
| 4 |
var
q
=
dc
.
T_Products
.
OrderByDescending
(
m
=
>
m
.
CreateTime
)
.
Take
(
15
)
;
|
| 5 |
return
PartialView
(
q
)
;
|
| 6 |
}
|
| 7 |
|
代码只是很简单的从数据库取出15条记录，然后返回Partial视图。在“Homepage”上单击鼠标右键，然后创建一个Partial视图，在视图中添加以下代码：
| 1 |
@
model
IEnumerable
<
Extshop
.
Models
.
T_Products
>
|
| 2 |
@
{
|
| 3 |
foreach
(
var
c
in
Model
)
|
| 4 |
{
|
| 5 |
<
ul
>
|
| 6 |
<
li
>
<
a
href
=
'
@
Url
.
Action
(
"
Details
"
,
"
Product
"
,
new
{
id
=
c
.
ProductID
}
)
'
>
<
img
src
=
'
/
Images
/
products
/
@
c
.
SamllImageUrl
'
alt
=
"
@c.Title
"
/
>
<
/
a
>
<
/
li
>
|
| 7 |
<
li
class
=
'
title
'
>
<
a
href
=
'
@
Url
.
Action
(
"
Details
"
,
"
Product
"
,
new
{
id
=
c
.
ProductID
}
)
'
>
@
c
.
Title
<
/
a
>
<
/
li
>
|
| 8 |
<
li
>
市场价：
<
del
>
@
c
.
MarketPrice
.
ToString
(
"
C
"
)
<
/
del
>
<
/
li
>
|
| 9 |
<
li
>
当前价：
@
c
.
UnitPrice
.
ToString
(
"
C
"
)
<
/
li
>
|
| 10 |
<
li
>
<
span
class
=
"
rating-title
"
>
评 价：
<
/
span
>
|
| 11 |
<
div
class
=
'
rating
'
id
=
"
@c.ProductID.ToString(
"
rat
-
0
"
)
"
>
|
| 12 |
<
input
name
=
"
@c.ProductID.ToString(
"
Star0
"
)
"
type
=
"
radio
"
class
=
"
star
"
disabled
=
"
disabled
"
value
=
"
1
"
@
(
c
.
TotalRating
=
=
1
?
"
checked='checked'
"
:
"
"
)
/
>
|
| 13 |
<
input
name
=
"
@c.ProductID.ToString(
"
Star0
"
)
"
type
=
"
radio
"
class
=
"
star
"
disabled
=
"
disabled
"
value
=
"
2
"
@
(
c
.
TotalRating
=
=
2
?
"
checked='checked'
"
:
"
"
)
/
>
|
| 14 |
<
input
name
=
"
@c.ProductID.ToString(
"
Star0
"
)
"
type
=
"
radio
"
class
=
"
star
"
disabled
=
"
disabled
"
value
=
"
3
"
@
(
c
.
TotalRating
=
=
3
?
"
checked='checked'
"
:
"
"
)
/
>
|
| 15 |
<
input
name
=
"
@c.ProductID.ToString(
"
Star0
"
)
"
type
=
"
radio
"
class
=
"
star
"
disabled
=
"
disabled
"
value
=
"
4
"
@
(
c
.
TotalRating
=
=
4
?
"
checked='checked'
"
:
"
"
)
/
>
|
| 16 |
<
input
name
=
"
@c.ProductID.ToString(
"
Star0
"
)
"
type
=
"
radio
"
class
=
"
star
"
disabled
=
"
disabled
"
</spa
分享到：
Global site tag (gtag.js) - Google Analytics
|
相关推荐
【Asp.net MVC 3 实例学习：ExtShop 系列最终源代码】 Asp.net MVC 3 是微软推出的一款基于模型-视图-控制器（Model-View-Controller）架构的Web应用程序开发框架，它是Asp.net技术的一个重要分支，为开发者提供了...
总之，"Asp.net MVC 3实例学习之ExtShop（四）的源代码"为我们提供了一个深入了解Asp.NET MVC 3开发的机会，通过研究源代码，我们可以学习到如何构建一个完整的电子商务系统，包括数据模型、业务逻辑、用户界面以及...
**ASP.NET MVC 框架详解** ASP.NET MVC（Model-View-Controller）是一种轻量级、基于组件的Web应用程序架构，它由微软开发并应用于.NET Framework中，为开发者提供了构建可测试、灵活且易于维护的Web应用的强大工具...
ASP.NET MVC4是一种基于Microsoft .NET Framework的轻量级、模型-视图-控制器（MVC）框架，用于构建可维护、高性能的Web应用程序。在VS2010集成开发环境中，结合SQL2008数据库，我们可以创建出功能丰富的Web应用。...
ASP.NET MVC作为微软官方的.NET平台下MVC解决方案，自诞生起就吸引了众多.NET平台开发人员的眼球。ASP.NET MVC从一开始的设计思路就与Struts不同，它的映射是利用路由配置而非xml，从而大大降低了开发复杂度，并且比...
在这个“精通ASP.NET MVC 4实例源码”中，你将深入学习到如何利用这一框架进行实际项目开发。 首先，让我们来了解一下ASP.NET MVC 4的核心概念： 1. **模型（Model）**：模型是应用程序中的业务逻辑层，负责处理...
ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程
Asp.Net MVC是一种基于模型-视图-控制器（Model-View-Controller）设计模式的Web应用程序开发框架。它由微软公司推出，旨在...通过学习这些案例，开发者可以逐步掌握Asp.Net MVC的精髓，从而高效地构建现代Web应用。
asp.net MVC3实例开发教程，是基于ASP.NET MVC3+ADO.NET4+EF4.1+Jquery+插件等技术下的CRM企业客户管理系统,asp.net MVC3实例开发教程由北风网提供，asp.net MVC3实例开发教程包括：营销管理、客户管理、服务管理、...
MVC3是ASP.NET MVC系列的第三个主要版本，它引入了许多新特性，如 Razor视图引擎、增强的模型绑定、对jQuery的内置支持以及更强大的错误处理机制。 当DWZ框架与ASP.NET MVC3结合使用时，可以实现前后端分离的开发...
ASP.NET MVC 5 - 开始MVC 5之旅 2. ASP.NET MVC 5 - 控制器 3. ASP.NET MVC 5 - 视图 4. ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ASP.NET MVC 5 - 创建连接字符串并使用SQL ...
4. **路由（Routing）**：ASP.NET MVC的路由系统是核心组件之一，它决定了URL请求如何映射到控制器和动作。源代码中的路由配置通常位于`Global.asax.cs`文件的`RegisterRoutes`方法中。通过自定义路由规则，开发者...
在这个"ASP.NET MVC 项目集合.zip"压缩包中，可能包含了多个ASP.NET MVC项目的源代码，这对于学习和理解ASP.NET MVC的开发实践非常有帮助。下面，我们将深入探讨ASP.NET MVC的关键概念和技术。 1. **模型（Model）*...
在"ASP.NET MVC实例"中，我们有两个具体的示例项目——NerdDinner和My Movie List，这两个都是为了帮助初学者理解并掌握ASP.NET MVC框架而设计的。 NerdDinner是一个经典的教程项目，它模拟了一个晚餐聚会的管理...
在这个"asp.net mvc 示例项目"中，我们可以深入学习和理解ASP.NET MVC的核心概念和实践技巧。 首先，我们来探讨一下ASP.NET MVC的核心组成部分： 1. **模型（Model）**：模型是应用程序中的业务逻辑和数据处理部分...
3. **Web API 2 集成** - ASP.NET MVC 5 集成了Web API 2，使得在同一项目中同时处理RESTful API和Web页面变得更加简单。 4. **过滤器** - 过滤器是可重用的代码段，可以在请求生命周期的不同阶段执行，如授权、...
这个实例提供了一个完整的ASP.NET MVC网站的详细结构和实现，可以帮助开发者了解和学习如何创建高效、可维护的Web应用。 **ASP.NET MVC架构** 1. **模型（Model）**：模型是应用程序的核心部分，它处理业务逻辑和...
在这个标题为“ASP.NET MVC 5 网站开发之美”的资源中，我们可以期待深入学习如何利用这个框架创建高质量的Web应用。 1. **MVC设计模式**：MVC模式是软件工程中的一种设计模式，它将应用程序分为三个主要部分：模型...
通过本书的学习，读者可以全面掌握ASP.NET MVC的开发，并从代码中获取软件开发与架构设计的经验与灵感。本书具有很大的参考价值，既适合ASP.NET MVC开发初学者阅读，也适合有一定基础的ASP.NET MVC开发人员进行技术...