在本文中，将探讨如何将ASP.NET MVC3与Google地图API相结合，创建一个简单的地图应用程序。将使用Visual Studio 2010和Razor视图引擎来实现这一目标。
尽管本文将简要介绍MVC框架的一些概念，但大部分内容将假设已经熟悉该模式。以下是需要了解的一些关键点：
- Visual Studio 2010或免费工具
- MVC 3 RTM版本
- 一些美味的饼干（比喻，指轻松愉快的学习过程）
Razor视图引擎
Razor是ASP.NET网页的新渲染框架的一部分。与传统的ASP.NET渲染引擎不同，Razor使用更简洁的隐式语法来确定代码块的开始和结束。
例如，在传统的ASP.NET渲染器中，可能会看到这样的代码：
<ul>
<% foreach (var userTicket in Model) { %>
<li>
<%: userTicket.Value %>
</li>
<% } %>
</ul>
而在Razor中，代码将更类似于：
<ul>
@foreach (var userTicket in Model)
{
<li>
@userTicket.Value
</li>
}
</ul>
Razor还提供了许多其他功能，如Sections、Layouts和Razor特定的帮助器。本文将从高层次上探讨这些特性。
MVC 3工具变化
随着新语法的引入，模板的渲染方式也发生了变化。工具已经相应地更新，因此在从控制器生成视图时看到的视图源代码更加清晰。
例如，对于非强类型视图，只需要这样做：
@model IEnumerable<RazorMaps.Models.StringModel>
@{ ViewBag.Title = ""; }
将在本文的剩余部分更详细地探讨这些特性。
开始之前
如果对如何运行更感兴趣而不是如何运行，请跳到下一节。但是，这里有几个要点需要指出，以便能够跟上。
Razor对MVC应用程序的整体流程影响很小。考虑当对应用程序发出请求时发生的情况：
- 接收应用程序的第一个请求
- 执行路由
- 创建MVC请求处理程序
- 创建控制器
- 执行控制器
- 调用动作
- 执行结果
基本上，Razor在“执行结果”阶段介入。与使用MasterPages作为模板不同，Razor使用Layouts。Layouts与语法一样，是一种更简单、更清晰的方式来为网页组合模板。
创建一个简单的首页
需要设置一个视图，以便有东西可以查看。基础项目不包括将要使用的控制器或视图，所以将从这里开始。
右键单击“控制器”，选择“添加 > 控制器”，并命名为“HomeController”。得到了一个基本的控制器，并且首个ActionResult（将调用渲染首页）的代码是免费的：
public ActionResult Index()
{
return View();
}
接下来，右键单击“Index”方法中的任何位置，并从上下文菜单中选择“添加视图”。如果视图名称是“Index”，则不需要更改任何其他内容。使用的是Razor视图引擎，已经在_viewstart中指定了布局。
按F5键查看作品！
集成Google地图
需要做几件事情来启动基本的、无装饰的地图。尽管是从Google Maps Javascript API页面上的简单教程开始的，但会尽量将其MVC化，并查看Razor视图引擎的一些特性。
知道需要将Google Maps脚本添加到页面，从教程中看到，还需要一些样式。因为在Razor中使用布局，并且不希望在创建的每个页面上都有这些样式，将利用Razor部分在布局中。
打开_Layout.cshtml文件，并在文档的
部分添加以下代码：
<head>
...
@RenderSection("Scripts", false)
<style type="text/css">
@RenderSection("Styles", false)
</style>
...
</head>
在这里添加了两个可选的RenderSections。这与在使用母版页时创建内容部分非常相似。
接下来，回到index.cshtml文件，以便可以添加一些有趣的部分来加载地图。此时，值得拿一块饼干。
完善页面
在文件的顶部，将想要添加以下代码：
@{
ViewBag.Title = "MVC 3和Google地图";
}
@section Scripts {
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
}
@section Styles {
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 80% }
}
ViewBag是一个在运行时评估的动态表达式。"Title"属性用@ViewBag.Title表达式填充到布局模板中。
接下来，有两个部分；第一个将地图脚本添加到页面，第二个应用并指定需要的样式以正确渲染地图。
页面的其余部分包括：
- 一个div元素（用于托管地图）
- 一个初始化函数，用于设置地图
- 一个jQuery快捷方式，在页面准备好时调用初始化函数
以下是代码：
<h2>
Hello, Google Maps
</h2>
<div id="map_canvas" style="width:80%; height:80%">
</div>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
$(function() {
initialize();
});
</script>
就是这样！再次按F5键，地图加载。
如果对ASP.NET MVC有很好的掌握，并且理解MasterPages，那么切换到Razor引擎和模板将会是轻松和令人耳目一新的。通过Razor部分渲染每页代码是直接的，并且保持模板清晰。