Mvc项目实例 MvcMusicStore 一

Mvc项目实例 MvcMusicStore 一
Mvc项目实例 MvcMusicStore 二
Mvc项目实例 MvcMusicStore 三
Mvc项目实例 MvcMusicStore 四
Mvc项目实例 MvcMusicStore 五

 

 

 

一、简介

此项目为.Net Mvc学习试例,原版的项目可从www.asp.net网站上下载;

在学习的过程中,我们将通过.net mvc2来创建一个音乐仓储系统。整个应用程序包括三个部分,分别为:选购、结帐和后台管理

二、预备知识

学习此项目时,最好具用Linq知识。在这里推荐博客园里LoveCherry的一步一步学Linq to sql

http://www.cnblogs.com/lovecherry/archive/2007/08/13/853754.html

 

三、项目开始

第一节    搭建基本开发准备

项目开发环境

开发工具:vs2010旗舰版

使用迅雷可从此连接下载;

thunder://QUFlZDJrOi8vfGZpbGV8Y25fdmlzdWFsX3N0dWRpb18yMDEwX3VsdGltYXRlX3g4Nl9kdmRfNTMyMzQ3Lmlzb3wyN

jg1OTgyNzIwfDRhZTYyMjg5MzNkZGU0OWQ5YmZhNGMzNDY3YzgzMWMyfC9aWg==

数据库:sqlserver2000或更高,此项目中我采用的是sqlserver2005

 

第二节    新建MVC项目

 

打开vs2010 选中文件à新建à项目

Mvc项目实例 MvcMusicStore 一

将打一个新建项目对话框,

Mvc项目实例 MvcMusicStore 一

1.  选择.net framework4平台

2.  选择web模板中 Asp.net MVC2web应用程序

3.  修改项目名称为MvcMusicStore ,然后点击确定

Mvc项目实例 MvcMusicStore 一

 

项目中默认新建了一些文件夹,它们的作用如下:

文件夹名称

作用

/Controllers

存储控制器文件,处理页面传入的请求,和返回数据库处理文件

/Views

界面或页面模板

/Models

数据库业务实体类及数据类

/Content

存储图片,样式表,或其它静态文件

/Scripts

存放自定义javascript文件

/App_Data

存放数据库文件

 

控制器(Controller)

添加一个HomeController

鼠标右击Controller文件夹,à添加à控制器   打开添加控制器对话框,把控制器名称修改为HomeController à点击添加.

Mvc项目实例 MvcMusicStore 一

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MvcMusicStore.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public ActionResult Index()

        {

            return View();

        }

 

    }

}

 

为了更新简单的认识控制器,我们修改HomeController 让其返回一个字符串

1.       Index函数返回的ActoinResult改为string

2.       修改return语句

修改后代码为:

 

        // GET: /Home/

        public string Index()

        {

            return "Hello from Home";

        }

运行项目查看效果

Mvc项目实例 MvcMusicStore 一

注明:请不要录入上面的地址去浏览;在vs中自带的服务器会随机分配端口。

 

下面我们将为项目仓储控制器它有三个模块它们分别为

1.       仓储首页模块

2.       列表模块

3.       指定相册的详细模块

 

添加控制器和方法

Mvc项目实例 MvcMusicStore 一

代码如下:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MvcMusicStore.Controllers

{

    public class StoreController : Controller

    {

        //

        // GET: /Store/

 

        public string Index()

        {

            return "Hello from Store.Index()";

        }

 

        //

        // GET: /Store/Browse

 

        public string Browse()

        {

            return "Hello from Store.Browse()";

        }

 

        //

        // GET: /Store/Details

 

        public string Details()

        {

            return "Hello from Store.Details()";

        }

    }

}

 

再次运行项目,浏览/Store/Detials

从上面页面中我们看到,仅仅传地址而不传参数是无法浏览特定相册信息的。下面我们修改控制器的Details方法

        // GET: /Store/Details/5

 

        public string Details(int id)

        {

            string message = "Store.Details,ID=" + id;

            return Server.HtmlEncode(message);

        }

运行效果如下

在传输入参数时,为什么不是/store/detals/?id=6呢? 这里我们看一下Global.asax文件

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Routing;

 

namespace MvcMusicStore

{

    public class MvcApplication : System.Web.HttpApplication

    {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

            routes.MapRoute(

                "Default"// 路由名称

                "{controller}/{action}/{id}"// 带有iD?数的URL

                new { controller = "Home", action = "Index", id = UrlParameter.Optional } //参数默认值

            );

 

        }

 

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

 

            RegisterRoutes(RouteTable.Routes);

        }

    }

}

 

其中这段

routes.MapRoute(

                "Default"// 路由名称

                "{controller}/{action}/{id}"// 带有iD?数的URL

                new { controller = "Home", action = "Index", id = UrlParameter.Optional } //参数默认值

            );

说明地址栏中第二个/后面的值就是参数id的默认值,所以当我浏览store/details/6时,就说明参数id的值为6

 

那么,我们要传其它值时,怎么办呢?还好.net mvc框架中早已经考虑到,我们不必再去写相应的路由。 我们接着修改controller中的代码。

        //

        // GET: /Store/Browse

 

        public string Browse()

        {

            string message = "Store.Browse, Genre=" +

                Server.HtmlEncode(Request.QueryString["genre"]);

            return Server.HtmlEncode(message);

        }

运行效果如下:

说明:在程序中我们应用到Server.HtmlEncode 方法来处理Request.Querystring[“genre”] 是为了防止javascript注入和修改浏览地址

 

视图和视图模块

这里我们要引入一个概念视图模块;

mvc项目中重点体现的是Model View Controller三个部分。这三个部分中View部分负责显示,一般是一些显示模板;

Controller控制器,类似于一个中间转化器,处理浏览器发过来的请求,传向指定的方法,调用Model 来和数据库交互信息;

Model模块层,处理数据库信息。

在这个过程中出现一个问题就是View Model数据通过谁传递,怎么传递?

.net mvc中增加了两个数据类型,ViewData TempData

虽然ViewDataTempData都可以传递弱类型数据,但是两者的使用是有区别的:

ViewData的生命周期和View相同只对当前View有效.

TempData保存在Session, Controller每次执行请求的时候会从Session中获取TempData并删除

Session, 获取完TempData数据后虽然保存在内部的字典对象中,但是TempData集合的每个条目访问一次后就从字典表中删除

也就是说TempData的数据至多只能经过一次Controller传递.

为何TempData只能够在Controll中传递一次因为SessionStateTempDataProvider.LoadTempData方法(TempDataDictionary.Load中调用)在从ControllerContextSession中读取了TempData数据后会清空Session:

 

使用模板

使用mvc模板为程序公共元素设置信息

找到Views文件夹,选中Shared文件夹,右健单击à添加à新建项—>选中Mvc2视图母板

把文件名称设置为Site.master à添加

Mvc项目实例 MvcMusicStore 一

Mvc项目实例 MvcMusicStore 一

 

添加成功后,向母板页中添加样式表 然后添加一些html标记。代码如下:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

</head>

<body>

    <div>

        <div id="header">

            <h1>ASP.NET MVC Music Store</h1>

            <ul id="navlist">

                <li class="first"><a href="/" id="current">Home</a></li>

                <li> <a href="/Store/">Store</a></li>

            </ul>

        </div>

        <asp:ContentPlaceHolder ID="MainContent" runat="server">

      

        </asp:ContentPlaceHolder>

    </div>

</body>

</html>

 

添加一个视图模板

 

首先,我们要修改HomeController

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MvcMusicStore.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public  ActionResult Index()

        {

            return View();

        }

 

    }

}

 

选中函数Index() ,然后右键单击Index  选择添加视图

Mvc项目实例 MvcMusicStore 一

 

Mvc项目实例 MvcMusicStore 一Mvc项目实例 MvcMusicStore 一

 

修改添加Index视图代码如下:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>This is the Homepage</h2>

</asp:Content>

 

 

再次运行项目

Mvc项目实例 MvcMusicStore 一

 

使用ViewModelView传输入信息

 

为项目创建一个新的文件夹,将其命名为ViewModels

Mvc项目实例 MvcMusicStore 一

在信息传输入时分为两类一是简单信息另一个是复杂信息两类;通过绑定视力的强类型数据对应的类,来传递信息

1.       简单信息传输

选中ViewModels文件夹,右键à添加类 StoreIndexViewModel

代码如下:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MvcMusicStore.ViewModels

{

    public class StoreIndexViewModel

    {

        public int NumberOfGenres { getset; }

        public List<string> Genres { getset; }

    }

}

 

 

信息传输类改完之后,我们要修改Controller文件,使用Controller把数据传输入到视图中;

 

找到StoreController 修改其index方法如下

        // GET: /Store/

 

        public ActionResult Index()

        {

           var genres=new List<string>{"Rock","Jazz","Country","Pop","Disco"};

 

           var viewModel=new  StoreIndexViewModel{

            NumberOfGenres=genres.Count,

            Genres=genres

           };

           return View(viewModel);

        }

重新编译整个项目

 

选中Index添加对应视图,选中创建强类型视图 在“视图数据类里选中创建的ViewModels.StoreIndexViewModel à添加

Mvc项目实例 MvcMusicStore 一

 

修改视图代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

 Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreIndexViewModel>" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

         Index

</asp:Content>

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

 

    <h2>Browse Genres</h2>

 

    <p> select from <%:Model.NumberOfGenres %> Genres:</p>

 

    <ul>

        <%foreach (string genreName in Model.Genres)

          %>

          <li>

            <%:genreName %>

          </li>

        <%%>

    </ul>

</asp:Content>

 

Mvc项目实例 MvcMusicStore 一

2.       复杂信息传输

  首先我们在Models文件夹里添加两个类。一是Albums.cs 另一个是Genre.cs

代码分别如下:

Genre.cs

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MvcMusicStore.Models

{

    public class Genre

    {

        public string Name { getset; }

    }

}

 

Album.cs

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MvcMusicStore.Models

{

    public class Album

    {

        public string Title { getset; }

        public Genre Genre { getset; }

    }

}

 

ViewModels文件里添加新类StoreBrowseViewModel做为复杂信息传输的介质

引用类库

using MvcMusicStore.Models;

 

修改StoreBrowseViewModel

    public class StoreBrowseViewModel

    {

        public Genre Genre { getset; }

        public List<Album> Albums { getset; }

    }

修改StoreController

        // GET: /Store/Browse

 

        public ActionResult Browse()

        {

 

            string genreName =

                Server.HtmlEncode(Request.QueryString["genre"]);

 

            var genre = new Genre

            {

                Name = genreName

            };

 

            var albums = new List<Album>();

 

            albums.Add(new Album { Title = genreName + "Album1" });

            albums.Add(new Album { Title = genreName + "Album2" });

 

            var viewModel = new StoreBrowseViewModel

            {

                Genre = genre,

                Albums = albums

            };

 

            return View(viewModel);

        }

 

然后选中Browse方法,右键单击添加视图 à创建强类型视图à 选择类为MvcMusicStore.ViewModels.StoreBrowseViewModelà添加

 

修改视图代码如下:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Browsing Genre: <%:Model.Genre.Name %></h2>

    <ul>

    <%foreach (var album in Model.Albums)

      %>

      <li><%:album.Title %></li>

    <%%>

    </ul>

</asp:Content>

 

 

接着,我们再修改控制器StoreController里的Details方法

        //

        // GET: /Store/Details/5

 

        public ActionResult Details(int id)

        {

            var album = new Album

            {

                Title = "Sample Album"

            };

            return View(album);

        }

而后,选种Details方法,右键添加视图,选择强类型为Models.Album ,最后修改details视图的代码如下:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Album <%:Model.Title%></h2>

</asp:Content>

至此我们把StoreController里的Index ,BrowseDetails模块全部实现了。 可还有一个问题,就是页面间如何连接。

 下面我们接着修改代码,为页面间信息添加链接

 

找到Views文件夹里的Browse文件里的Index修改代码如下:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Browse Genres</h2>

    <p> select from <%:Model.NumberOfGenres %> Genres:</p>

    <ul>

        <%foreach (string genreName in Model.Genres)

          %>

          <li>

          <%:Html.ActionLink(genreName,"Browse","Store",new {genre=genreName},null%>

          </li>

        <%%>

    </ul>

</asp:Content>

说明:如果想通过ActionLink传输更多参数。

  <%:Html.ActionLink(genreName,"Browse","Store",new {genre=genreName,gen="aa"},null%>

运行结果为:/Store/Browse?genre=Jazz&gen=aa

重新运行整个项目,查看效果.

 

第三节  连接数据库  (待续)

 

你可能感兴趣的:(store)