我的是基于VS2013+MVV 4.0,其它版本的应该也是类似吧。以下这些是我自己看w3school之后,自己总结的,大家想知道详细的可以去w3cschool去看
(http://www.w3school.com.cn/aspnet/mvc_intro.asp)
1.创建应用程序 文件-新建-网站-ASP.NET MVC 4 Web应用程序(名字:MvcApplication3)-基本-确定(如果没有ASP.NET MVC 4 Web应用程序,请先安装MVC)
2.添加样式和统一的外观
(1)外观即布局
在MvcApplication3项目下-Views-Shared-Layout.cshtml
将里面的内容替换为:
<!DOCTYPE html>(2)添加样式
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li> @*显示的文字是Home,Index控件,HomeController),下面定义控制器的时候会说明*@
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>
在MvcApplication3项目下-Content-site.css
将里面的内容替换为:
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* 菜单样式 ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* 表单样式 ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* 数据样式 ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
3.添加控制器
在MvcApplication3项目下-Controller-右键-添加-控制器(名字:HomeController)
将里面内容替换为(定义两个控件Index和About):
using System;4.添加视图
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index() //Index控件
{ return View(); }
public ActionResult About() //About控件
{ return View(); }
}
}
在HomeControl中
public ActionResult Index()在Index.cshtml中替换为:
右击此函数-添加视图-添加public ActionResult About()右击此函数-添加视图-确定
在Views文件夹下就会多出一个Home文件夹,里面有Index.cshtml和About.cshtml
@{ViewBag.Title = "Home Page";}在About.cshtml
<h1>Home page text</h1>
<p>11111111111</p>
@{ViewBag.Title = "About Us";}
<h1>About Us</h1>
<p>2122222222222</p>
以上,一个最基本的MVC应用程序已经创建好了,运行就可以看到效果。按下Movie选项卡是会出错,因为还没有添加Movie的控制器,后面就是用它来演示连接数据库。
下面就是在上面的基础上创建数据库连接。
1、App_Data文件夹-右键-添加-SQL SERVER数据库(命名:Movies.mdf)
2、双击Movies.mdf,在服务器资源管理器的数据库连接中就会出现该数据库
新建以下表(表名MovieDBs(必须))
注释:我们已经把这个表命名为 "MovieDBs" (以 s 结尾)。在后面,我们会看到 "MovieDBs" 用于数据模型。这是确保控制器与数据库表进行链接的命名惯例。
列 | 类型 | 允许 Nulls |
---|---|---|
ID | int (primary key) | No |
Title | nvarchar(100) | No |
Director | nvarchar(100) | No |
Date | datetime | No |
ID | Title | Director | Date |
---|---|---|---|
1 | Psycho | Alfred Hitchcock | 01.01.1960 |
2 | La Dolce Vita | Federico Fellini | 01.01.1960 |
3、添加连接字符串
向 Web.config 文件中的 <connectionStrings> 元素添加如下元素
<add name="MovieDBContext" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Movies.mdf;Integrated Security=True" providerName="System.Data.SqlClient"/>
4、添加数据库模型
Models文件夹-添加-类(类名:MovieDB.cs(必须)),红色的为要添加的。
注意:我们已经把这个表命名为 "MovieDBs" (以 s 结尾)。在上面,数据库表的名称 "MovieDBs" (以 s 结尾) 用于数据模型。
这是确保控制器与数据库表进行链接的命名惯例。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace MvcApplication4.Models
{
public class MovieDB
{
public int ID { get; set; }
public string Title { get; set; }
public string Director { get; set; }
public DateTime Date { get; set; }
}
public class MovieDBContext : DbContext
{
public DbSet<MovieDB> Movies { get; set; }
}
}
4、重新生成解决方案
解决方案——右键——重新生成解决方案
5、添加MoviesController
Controllers文件夹-右键-添加-控制器(控制器设置如下)
控制器名称:MoviesController
选择模板:包含读/写操作和视图的MVC控制器(使用Entity Framework)
模型类:MovieDB (MvcApplication3.Models)
数据上下文:MovieDBContext (MvcApplication3.Models)
以上操作已经连接好数据库,直接运行,点解Movie选项卡就可以看到结果。
连接数据库时遇到的问题:
问题:无法找到元数据
原因:wenconfig中的连接字符串的问题