passing information from WebMatrix to Javascript RSS

• • Reply
  

  wavemaster

  Participant

  1350 Points

  1161 Posts

  passing information from WebMatrix to Javascript

  Nov 11, 2012 01:40 AM|LINK

  I have a piece of javascript that take two zip codes and displays a map with points A and B, and a route.

  I want to feed the Javascript dynamically from WebMatrix.

  I found one of Mike's samples, but I do not understand of this applies to my situation. Does anyone have a sample that is easier to understand? The sample is called Working with the JSON Helper.

  TIA, Robert

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  
  <script type="text/javascript">
  
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js';
  
      function initialize() {
  
  
          var directionsService = new google.maps.DirectionsService();
          var directionsDisplay = new google.maps.DirectionsRenderer();
  
          var map = new google.maps.Map(document.getElementById('map_canvas'), {
              zoom: 7,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              panControl: false,
              mapTypeControl: false,
              streetViewControl: false
          });
  
          directionsDisplay.setMap(map);
          directionsDisplay.setPanel(document.getElementById('panel'));
  
          var request = {
              origin: '21236',
              destination: '43081',
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
  
          directionsService.route(request, function (response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
              }
          });
          }
  
          var dialogmapinitialize = {
              open: function () {
                  initialize();
              },
      };

  
  
  

  • Edited by wavemaster on Nov 11, 2012 01:45 AM
• • Reply
  

  Mikesdotnett...

  All-Star

  155593 Points

  19979 Posts

  Moderator

  MVP

  Re: passing information from WebMatrix to Javascript

  Nov 11, 2012 06:36 AM|LINK

  Where do you get your values from? if you get them from textboxes, you just plug the Request values in:

  var request = {
      origin: '@Request["origin"]',
      destination: '@Request["destination"]',
      travelMode: //etc

  
  
  

  Regards, Mike
  Web Pages CMS | My Site | Twitter
  • Edited by Mikesdotnetting on Nov 11, 2012 06:36 AM
• • Reply
  

  wavemaster

  Participant

  1350 Points

  1161 Posts

  Re: passing information from WebMatrix to Javascript

  Nov 11, 2012 02:01 PM|LINK

  User has a grid view then selects a row;

  Dialog window opens (everything in the dialog is now coming from a new file)

  The row id gets passed to the new file;

  query the database to get the two zip codes;

  populate the dialog with jquery tabs

  one of the tabs has the google maps div

• • Reply
  

  Mikesdotnett...

  All-Star

  155593 Points

  19979 Posts

  Moderator

  MVP

  Re: passing information from WebMatrix to Javascript

  Nov 11, 2012 03:25 PM|LINK

  What I suggested should work, except that you will write out the values from your database query result instead of using Request.

  Regards, Mike
  Web Pages CMS | My Site | Twitter
• • Reply
  

  wavemaster

  Participant

  1350 Points

  1161 Posts

  Re: passing information from WebMatrix to Javascript

  Nov 12, 2012 12:30 AM|LINK

  This is what I have:

  @{
      Layout = "~/_SiteLayout.cshtml";
      Page.Title = "Title";
  
      var origin1 = 74058;
      var destination1 = 43081;
      var db = Database.Open("StarterSite");
      var selectQueryString = "SELECT * FROM Sample";
      
      var data = db.Query(selectQueryString);
      var grid = new WebGrid(data, ajaxUpdateContainerId: "grid", rowsPerPage: 16);
  }

  And the relevant section of the script:

         var request = {
              origin: 'origin1',
              destination: 'destination1',
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };

  
  I get directions from Lincolnshire DN37, UK to some place in Poland with too many sz combinations to repeat here.

  
  
  

• • Reply
  

  Mikesdotnett...

  All-Star

  155593 Points

  19979 Posts

  Moderator

  MVP

  Re: passing information from WebMatrix to Javascript

  Nov 12, 2012 04:45 AM|LINK

  var request = {
              origin: '@origin1',
              destination: '@destination1',
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };

  Regards, Mike
  Web Pages CMS | My Site | Twitter
  • Marked as answer by Angie xu - MSFT on Nov 14, 2012 06:50 AM
• • Reply
  

  wavemaster

  Participant

  1350 Points

  1161 Posts

  Re: passing information from WebMatrix to Javascript

  Nov 12, 2012 01:26 PM|LINK

  Sorry, that was an predictable solution.

  Thanks.