一步一步学习ASP.NET MVC 1.0创建NerdDinner 范例程序，Part 26
本文根据《Professional ASP.NET MVC 1.0》中微软牛人Scott Guthrie 提供免费下载的第一章，一步一步演示如何通过ASP.NET MVC 1.0 正式版创建NerdDinner 范例程序。对了解如何使用最新的ASP.NET MVC 1.0框架创建Web Application 非常有帮助。本文由
http://forum.entlib.com 开源论坛小组提供。
本文继续学习之旅，一步一步通过ASP.NET MVC 1.0 实现NerdDinner 范例程序。
集成AJAX地图
下面我们在范例程序中集成AJAX地图，使应用程序更加可视化。这样，在用户创建、编辑或者查看宴会信息时，可以看到宴会的地理位置信息。
创建Map Partial 视图
我们计划在应用程序中多个地方使用地图功能。为了保持代码的简洁，我们封装通用的地图功能在一个单一的partial视图模板中，然后在多个Controller action方法和视图中重用。对该新建的partial视图命名为map.ascx，创建在\Views\Dinners目录。
如下图所示，创建map.ascx partial视图，并设置传递Dinner模型类作为View Data Class：
进一步更新Map.ascx 文件，代码如下：
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
<script src="/Scripts/Map.js" type="text/javascript"></script>
<div id="theMap">
</div>
<script type="text/javascript">
$(document).ready(function() {
var latitude = <%=Model.Latitude %>;
var longitude = <%=Model.Longitude %>;
if ((latitude == 0) || (longitude == 0))
LoadMap();
else
LoadMap(latitude, longitude, mapLoaded);
});
function mapLoaded() {
var title = "<%= Html.Encode(Model.Title) %>";
var address = "<%= Html.Encode(Model.Address) %>";
LoadPin(center, title, address);
map.SetZoomLevel(14);
}
</script>
第一部分<script>引用指向微软的Virtual Earth 6.2地图库，第二部分<script>引用指向map.js 文件，该文件将封装通用的JavaScript地图逻辑。<div id=”theMap”>元素是一个HTML容器，Virtual Earth将使用该容器来承载地图。
接下来包含了2段嵌入的<script>代码块，视图相关的2个JavaScript功能。第一个函数是当页面准备好运行客户端脚本时，使用jQuery调用一个函数。它调用LoadMap() 辅助函数，该函数定义在Map.js脚本文件中，用来加载virtual earth 地图控件。第二个是一个回调事件句柄，添加一个别针在地图上，标识位置。
你会注意到我们在客户端脚本中使用服务端的<%= %>代码块，嵌入Dinner的经度和维度属性。这一技术非常有用，可以输出动态值在客户端脚本中使用（不需要一个单独的AJAX回调到服务端去检索值 – 使得响应更快）。<%= %>代码块在视图在Server端呈现时将执行，因此，HTML输出将嵌入的JavaScript 值（如，var latitude = 47.64312）。
创建一个Map.js 工具类库
开始创建Map.js文件，用来封装地图的JavaScript功能，并实现上述的LoadMap和LoadPin方法。右键点击项目中的\Scripts目录，并选择 Add -> New Item 菜单项，选择JScript 项目，命名为Map.js。
下面是添加到Map.js文件中的JavaScript代码，该代码复制和Virtual Earth交互，并显示地图和Dinner对象的位置标识：
具体JavaScript代码 – 请参考原文149页，这里不重复了。
集成地图到创建和编辑表单
我们将集成地图到现有的创建和编辑视图。这点比较容易做到，不需要更改任何Controller代码。因为创建和编辑视图共享一个通用的DinnerForm partial视图，展示Dinner的用户界面，因为我们只需要在一个地方添加地图，就可以在创建和编辑视图中看到了。
我们需要做的是，打开\Views\Dinners\DinnerForm.ascx partial 视图，并更新它包含新的map partial视图。如下是更新后的DinnerForm视图的代码（注：为了代码的简洁性，这里忽略了HTML 表单的元素）：
<div id="mapDiv">
<% Html.RenderPartial("Map", Model.Dinner); %>
</div>
DinnerForm partial 视图接收类型为DinnerFormViewModel作为模型类型（因为它既需要一个Dinner对象，也需要一个SelectList填充国家下拉列表框）。Map partial 视图仅仅需要类型为Dinner的模型类型，因此当我们呈现Map partial视图时，我们传递DinnerFormViewModel.Dinner属性给它。
关于NerdDinner范例程序和Map地图集成的内容，因为涉及过多JavaScript的内容，本人对此不甚了解，也没有什么兴趣，就忽略了（原文内容从152页-165页）。