下面我們在範常式序中整合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頁）。
