render partial view inside an iframe within asp.net mvc application

Question

I have a asp.net mvc application in which I have a partial view named _GeoApi.cshtml .

I need to render it inside an iframe .

<iframe src='@{Html.RenderPartial("_GeoApi");}' id='fram' ></iframe> 

I get a generated html code :

<iframe<script src="/Scripts/External js/jquery-1.8.2.js">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete" async="" defer=""></script>

//content removed for brivety

 src='' id='fram' /&gt; 

                                </iframe<script>

So I need to know

1. What are the reasons of this error?
2. How can I fix my code?

Answer 1

Error is caused because you have a <script> tag in your <iframe> tag.

The solution is to simply provide a URL as the src to a URL where you would render the partial instead of trying to put the contents in the iframe tag.

<iframe src='/api/geoApi' id='fram' ></iframe> 

Then create an ApiController that has a GeoApi action method which renders the "_GeoApi" partial view.