CODEWITHSUNDEEP
asp.netasp.net-mvciframe
John O'Grady
John O'Grady

Reputation: 245

ASP.NET MVC5 How to dynamically fill an Iframe src based on data in the model

Hope some kind soul can help a beginner coder out here :)

I have an ASP MVC app whose purpose is to take

  1. Addresses as user input,
  2. Dynamically build queries to the Google MAPS apis for encoding and distance calculations
    1. Deserialise the JSON coming back and fill data with the coordinates and distance calculation.

I have this much working ok. I am now trying to dynamically build a URL to be used in an Iframe on a details action in my view/controller based on the data stored in the model and use this to display an embedded Google MAPS window.

My Journey model declares the mapurl variable as follows: public string mapurl { get; set; }

My JourneyController fills this string variable as follows:

string mapurl = String.Format("https://www.google.com/maps/embed/v1/directions?key=MYKEY&origin={0}&destination={1}", journey.StartAddress, journey.FinishAddress);

When I set a breakpoint after this line I can see that the code is populating the mapurl string value as follows:

https://www.google.com/maps/embed/v1/directions?key=MYKEY&origin=XYZ Lawn, Raheny, Dublin, Ireland&destination=Enniscorthy Co. Wexford, Ireland.

Note also that at an earlier stage in the code the StartAddress and FinishAddress string variables which were originally set to user input values have later been set to the "formatted address" value sent back in the JSON coming from the Google MAPs API so these should be values (albeit, see my "hunch" comment line below, which may not be formatted correctly) should be meaningful addresses to the awesomeness that is Google Maps.

In my Details View I am then attempting to dynamically set the Iframe URL value as follows:

    <iframe width="500" height="350" frameborder="0" style="border:0"      src="@Model.mapurl"></iframe>

For background info, the following static iframe URL code loads successfully.

    <iframe width="500" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=1%20Foxfield%20Lawn2C%20Raheny%2C%20Ireland&destination=128%20Old%20County%20Road%2C%20Crumlin%2C%20Ireland&key=MYKEY" allowfullscreen></iframe>

I have a hunch that the issue is that the code which declares the mapurl string variable is not "URL Escaped" as in it contains whitespace characters which are then not valid in the resulting URL String.

Many thanks for any help advice you can offer on how I can update the code which sets the mapurl value to get around this issue

Upvotes: 2

Views: 4950

Answers (2)

John O&#39;Grady
John O&#39;Grady

Reputation: 245

Not 100% sure on why the accepted answer was subsequently queried but in case it's useful to other users here is a fuller solution In the Create [POST] method on the Journey controller I needed to use the @Uri.EscapeDataString () method to cleanse whitespace from the mapurl variable

    journey.mapurl = String.Format("https://www.google.com/maps/embed/v1/directions?key=MYKEY&origin={0}&destination={1}", @Uri.EscapeDataString(journey.StartAddress), @Uri.EscapeDataString(journey.FinishAddress));

the URL was then correctly HTML formatted and showed as expected in the IFRAME using the existing HTML as 

      <iframe width="500" height="350" frameborder="0" style="border:0"      src="@Model.mapurl"></iframe>

Upvotes: 0

Andres Castro
Andres Castro

Reputation: 1858

Try to use @Uri.EscapeDataString(Model.mapurl);

Upvotes: 2

Related Questions