Below is an example Program To make the application more visualized. In this way, you can view the geographical location of a banquet when creating, editing, or viewing banquet information.
Create map partial
View We plan to use the map function in multiple places in the application. To maintain Code We encapsulate general map functions in a single partial view template and reuse them in multiple controller action methods and views. Name the newly created partial view map. ascx and create it in the \ views \ dinners directory. As shown in, create the map. ascx partial view and pass the dinner model class as the view data class:
The code for further updating the map. ascx file is as follows: <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(){ VaRLatitude = <% = model. Latitude %>; VaRLongpolling = <% = model. longpolling %>; If(Latitude = 0) | (longpolling = 0 )) Loadmap (); Else Loadmap (latitude, longpolling, maploaded ); }); FunctionMaploaded (){ VaRTitle ="<% = Html. encode (model. Title) %>"; VaRAddress ="<% = Html. encode (model. Address) %>"; Loadpin (center, title, address ); Map. setzoomlevel (14 ); } </Script> The first part <SCRIPT> references the image library pointing to Microsoft's Virtual Earth 6.2, and the second part <SCRIPT> references the map. js file, which encapsulates General JavaScript map logic. The <Div id = "themap"> element is an HTML container. Virtual Earth uses this container to hold the map. The following section contains two embedded <SCRIPT> code blocks and two JavaScript Functions related to views. The first function is to call a function using jquery when the page is ready to run the client script. It calls the loadmap () auxiliary function, which is defined in the map. js script file and used to load the Virtual Earth map control. The second is a callback event handle, which adds a pin to the map to identify the location. You will notice that we use the server <% = %> code block in the client script to embed the longitude and dimension attributes of the dinner. This technology is very useful and can be used to output dynamic values in client scripts (without a separate Ajax callback to the server to retrieve values-to make the response faster ). <% = %> The code block is executed when the view is rendered on the server. Therefore, the HTML output contains the embedded Javascript value (for example, VAR latitude = 47.64312 ).
Create a map. js
Tool Library Create a map. js file to encapsulate the JavaScript function of the map and implement the above loadmap and loadpin methods. Right-click the \ scripts directory in the project, select Add-> new item, and select the JScript project named map. js. Add to map. javaScript code in the JS file. The code copies and interacts with Virtual Earth, and displays the location ID of the map and dinner object. For specific JavaScript code, see the 149 page of the original article.
Integrate maps to create and edit forms We will integrate the map to the existing create and edit views. This is easy to implement, and you do not need to change any controller code. The creation and editing views share a common dinnerform partial view and display the dinner user interface. Because we only need to add a map in one place, we can see it in the creation and editing views. What we need to do is to open the \ views \ dinners \ dinnerform. ascx partial view and update it to include the new map partial view. The updated code of the dinnerform view is as follows (NOTE: For the sake of simplicity, elements of the HTML form are ignored here ): <Div ID= "Mapdiv"> <%Html. renderpartial ("Map", Model. Dinner );%> </Div> The receiving type of the dinnerform partial view is dinnerformviewmodel (because it requires both a dinner object and a selectlist to fill the country drop-down list box ). The map partial view only needs the dinner model type. Therefore, when we present the map partial view, we pass the dinnerformviewmodel. Dinner attribute to it. I am not familiar with or interested in the content of the nerddinner sample program and map integration because it involves too much javascript content, ignore (the original content ranges from 152 pages to 165 pages ).
