65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET、MVC 3、Razor 视图引擎和 Google Maps

TheyCallMeMrJames
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (18投票s)

2011 年 1 月 21 日

CPOL

7分钟阅读

viewsIcon

302121

downloadIcon

1

快速了解如何在 MVC 3 中使用 Razor 视图引擎运行 Google Maps。

引言

随着 MVC 3 的发布、更新的项目模板和 Razor 视图引擎，我想看看将一些 ASP.NET 的优点与 Google Maps API 进行快速的整合有多么困难。

RazorMaps/title.png

对于这个项目，我们将逐步介绍如何在 Visual Studio 2010 中使用 ASP.NET MVC 3 创建一个新项目，然后用少量 JavaScript 来“Razor 化”一个非常基本的 Google Map。

背景

虽然我在这篇文章中简要提及了 MVC 框架的一些概念，但大多数情况下，我将假设您对该模式很熟悉。以下是您需要跟上进度的内容：

事物如何变化

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>

还有许多其他功能可以简化开发，例如 Sections、Layouts 和 Razor 特有的 helpers。我们将在本文中对它们进行高层次的探讨。

MVC 3 工具更改

显然，有了新的语法，模板的渲染方式也随之改变。工具已相应更新，因此在从控制器生成视图时，我们可以看到更整洁的视图源。对于一个非强类型视图，这就是让页面正常工作的全部内容。

RazorMaps/clean-view.PNG

模型继承也得到了极大的简化，并且更具可读性。自从 MVC 问世以来，我们一直这样做：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage<Sample.Aspclassic.Models.StringModel>" %>

现在在 Razor 中：

@model IEnumerable<RazorMaps.Models.StringModel>
@{ ViewBag.Title = ""; }

我们将在本文的其余部分更详细地探讨其中一些功能。

入门

安装完成后，在“新建项目”对话框中选择“Web”模板下的“ASP.NET MVC 3 Web Application”是相当容易的。如果您没有看到该项目类型，请确保您定位的是正确的框架。

RazorMaps/image_14_.png

我将项目命名为 RazorMaps。单击“确定”后，我们将看到一个向导来选择项目的选项。这是一个简单但很好的改进，因为它集成了向导、测试项目创建以及多个模板（空模板与“Internet 应用程序”）并允许我们选择视图引擎。

RazorMaps/image_13_.png

为了简单起见，我只选择了一个空模板，并且没有选择测试项目。

项目的大部分结构感觉都很熟悉，事实上，MVC 项目在根级别没有明显的变化，并且所有预期的文件夹都在那里。

很高兴看到 jQuery 已默认添加到 _layout.cshtml 文件中，并且 jQuery UI 也包含在项目中。

在我撰写本文时，这也是最新版本的 jQuery 库，并且它们已更新了 vsdoc 文件（太棒了！不再需要重命名旧文件并替换库！），此外还有其他一些库（启用 unobtrusive 验证等）。

首先，入门

如果您对如何运行比运行本身更感兴趣，可以跳到下一节，但这里有几点需要指出，以便您能够跟上。

Razor 对 MVC 应用程序的整体流程影响很小。考虑一下当应用程序收到请求时发生的关键细节：

  • 接收应用程序的第一个请求
  • 执行路由
  • 创建 MVC 请求处理程序
  • 创建控制器
  • 执行控制器
  • 调用操作
  • 执行结果

摘自 MSDN 的《理解 MVC 应用程序执行》

基本上，Razor 在 **执行结果** 处发挥作用。Razor 使用 Layouts 来代替 MasterPages 作为模板。Layouts 在语法上，是一种更简单、更整洁的方式来构建网页模板。您只需要创建一个使用每个视图引擎的 MVC 应用程序即可看到这一点。Layouts 在渲染过程中也显得更主动；而在 MasterPage 中，您会放入一个 ContentSection 来指定内容何时可以渲染，而在 Layout 中，您会调用 RenderSection()。同样，sections 的定义更像内容页面中的函数调用。我们将通过实现地图的过程来观察这些差异。

另一个不同之处在于我们如何看待 PartialViews。Razor 为 partial views 和 full views 使用相同的文件类型，即 .cshtml，而经典 MVC 视图引擎使用 .ascx（用户控件）来实现它们。我认为这并不重要，而且没有真正的原因需要保留旧的区分。

当前工具的一个缺点是，当我们通过布局指定 JavaScript 或 CSS 源时，我们在视图中会丢失对样式和脚本的 IntelliSense。您可以通过在每个页面中添加引用来解决此问题（如果您这样做，有多种方法可以避免重复引用）。

因此，在对一些变化以及 Razor 在我们的范式中的位置有了一些基本了解之后，我们出发吧！

一个简单的首页

我们需要设置一个视图，以便我们有东西可以查看。基础项目不包含我们将需要的控制器或视图，所以我们将从那里开始。

右键单击 **Controllers**，选择 **Add > Controller**，并将其命名为 **HomeController**。我们将启动并运行我们的基本控制器，并且第一个 ActionResult（将调用渲染我们的首页）的代码是免费的。

RazorMaps/image_31_.png

接下来，右键单击 Index 方法中的任意位置，然后从上下文菜单中选择 **Add View**。如果视图名称是 Index，那么您无需更改其他任何内容。我们正在使用 Razor 视图引擎，并且已在 _viewstart 中指定了布局。

RazorMaps/image_30_.png

按 F5 查看您的精彩作品！

你好，Google Maps

我们需要做一些事情来启动和运行基本的、无风格的地图。虽然我参考了 Google Maps Javascript API 页面上的简单教程，但我将尽可能尝试将其 MVC 化，并研究 Razor 视图引擎的一些功能。

我们知道需要将 Google Maps 脚本添加到页面中，并且从教程中可以看出，还需要一些样式。由于我们在 Razor 中使用了 layouts，并且不希望在每个创建的页面上都有这些样式，因此我们将利用布局中的 Razor Sections。

打开 _Layout.cshtml 并在文档的 <head> 部分添加以下代码行：

<pre lang="aspnet">@RenderSection("Scripts", false)
<style type="text/css"> 
    @RenderSection("Styles", false)
</style>

在这里，我们添加了两个可选的 RenderSections。这与使用母版页时创建内容节非常相似。

接下来，回到我们的 index.cshtml 文件，以便添加用于加载地图的关键部分。此时，值得拿起一块饼干。

充实页面

在文件的最顶部，您需要添加以下代码：

@{ 
    ViewBag.Title = "MVC 3 and Google Maps"; 
} 
@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 表达式填充到我们的布局模板中。

接下来是我们的两个 sections；第一个将地图脚本添加到我们的页面，第二个应用并指定地图正确渲染所需的样式。

页面的其余部分包括：

  • 一个 div 元素（用于托管地图）
  • 一个 initialize 函数，用于设置地图，以及
  • 一个 jQuery 快捷方式，用于在页面准备就绪时调用 initialize 函数

这是代码：

<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 有很好的掌握，并且了解 MasterPage，那么切换到 Razor 引擎和模板将是轻松而令人耳目一新的。通过 Razor section 渲染集成每页代码非常简单，可以保持模板的整洁。

更新的脚本库、改进的模板以及大量的功能增强使这个版本非常完善。

以下是一些链接和有用的参考资料，可以帮助您了解相关内容：

历史

  • 2011-01-21.1：第一个版本
  • 2011-01-21.2：上传应用程序截图
  • 2011-01-21.3：添加 Google Maps 链接
  • 2011-01-21.4：增加了关于 Razor 的更多背景信息（感谢 Pete！)
  • 2011-01-21.5：增加了关于工具的更多信息
  • 2011-01-26.1：添加了入门指南，参考文献中添加了 MSDN 链接
© . All rights reserved.