• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Email: info@dotnettec.com | Mobile: +91-8800268750

DotNetTec

  • Home
  • Tutorials
    • Programming Language
      • C#
      • JavaScript
    • .Net Development
      • .NET Framework
      • ASP.NET Web Forms
      • MVC Architecture
      • Web API
      • .NET Core Framework
    • Front End Frameworks
      • JavaScript
      • HTML
    • Cloud Computing
      • Microsoft Azure
    • Database
      • SQL Server
    • Google Maps API
    • RPA
      • Blue Prism
      • UiPath
  • How to
  • Knowledge Base
  • Shop

How can I access an iFrame from the codebehind file in ASP.NET

December 13, 2020 by Ravi Kumar Leave a Comment

In this blog post, you will learn using iframe in asp.net c# and how to set it’s src dynamically in asp.net codebehind file. Previously I have explained what is an iframe and how it works. iframes are an easy way by which you can embed another page within your original page.

Using iframe in ASP.Net C#

ASP.Net also provides the option to have an iframe in our ASPX Pages. It can be with/without the “runat=server” attribute and does serve the purpose of embedding the page. Let’s create and design an iframe, open the aspx page in a modal popup dynamically from the codebehind file and client-side using javascript as well. Find the below source code:-

iframe in asp.net

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How can I access an iFrame from the codebehind file in ASP.NET</title>
    <script src="Js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Js/jquery-ui.js" type="text/javascript"></script>
    <script src="Js/UIDesign/IframDivDrag.js" type="text/javascript"></script>
    <link href="css/IframePopUpDesign.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        /*---------------------Popup code--------------------------------------*/
        function DragDiv() {
            $("#idClusterDiv_pop").draggable();
        }

        function Close_btn_click() {
            $('#idClusterDiv_pop').animate({
                opacity: 0.1
            }, 450, function () {
                // Animation complete.
                $("#idClusterDiv_pop").css("display", "none");
            });
        }

        function min_btn_click() {
            var browserName = navigator.appName;
            $("#DivOnIframe").css("display", "none");
            if (browserName == "Chrome") {
                //alert("helloChrome!!");
                $('#idClusterDiv_pop').animate({
                    top: '598',
                    left: '5',
                    position: 'absolute'
                }, 500, function () {
                    // Animation complete. 
                });
            } //Checked for Chrome


            if (browserName == "Firefox") {
                //alert("helloFirefox!!");
                $('#idClusterDiv_pop').animate({
                    top: '560',
                    left: '5',
                    position: 'absolute'
                }, 500, function () {
                    // Animation complete.
                });
            } //Checked for Firefox 

            if (browserName == "Microsoft Internet Explorer") {
                //alert("hello Microsoft Internet Explorer!!");
                $('#idClusterDiv_pop').animate({
                    top: '605',
                    left: '5',
                    position: 'absolute'
                }, 500, function () {
                    // Animation complete.
                });
            } //Checked for IE
        }

        function max_btn_click() {
            $("#DivOnIframe").css("display", "block");
            // for opening the pop up back at the original location
            if (document.getElementById('idClusterDiv_pop').style.left == '5px') {
                $('#idClusterDiv_pop').animate({
                    opacity: 1,
                    left: '30%',
                    top: '1%'
                }, 500, function () {
                    // Animation complete.
                });
            }
            else {//For opening the pop Up at the present location
                $('#idClusterDiv_pop').animate({
                    opacity: 1
                }, 500, function () {
                    // Animation complete.
                });
            }
        }

    </script>

    <script type="text/javascript">
        function openPopUp() {
            document.getElementById('idClusterDiv_pop').style.display = 'block';
            document.getElementById('idClusterDiv_pop').style.opacity = '1.0';
            document.getElementById('ifIdReport').src = document.URL.substr(0, document.URL.lastIndexOf("/", document.URL.length)) + "/test.aspx";
            document.getElementById('idParagraphiframe').innerHTML = "iframe demo";
            document.getElementById('ifIdReport').style.width = '288px';
            document.getElementById('ifIdReport').style.height = '270px';
            document.getElementById('DivOnIframe').style.height = '275px';
        }
    </script>

</head>
<body onload="DragDiv();">
    <form id="form1" runat="server">
        <h2>Access/Open an iFrame from the codebehind file in ASP.NET</h2>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="Js/UIDesign/IframDivDrag.js" ScriptMode="Auto" />
            </Scripts>
        </asp:ScriptManager>
        <!-- Pop up design -->
      <br /> &nbsp;&nbsp; <asp:Button ID="btnOpenPopUp" runat="server" Text="Click here to open Iframe from Codebehind file"
            OnClick="btnOpenPopUp_Click" />        
         <asp:UpdatePanel runat="server" ID="upnlPopup" UpdateMode="Conditional">
            <ContentTemplate>
                <br />
                &nbsp;&nbsp;<a href="#" style="text-decoration: none;" onclick="openPopUp()"> Click here to open Iframe
                using JavaScript</a>
                <div class="export_pop_up" id="idClusterDiv_pop" runat="server" style="display: none;">
                    <div class="export-header-bg">
                        <span id="idParagraphiframe" runat="server"></span><a class="Iframe_close" id="closeBtn"
                            href="#" onclick="Close_btn_click()"></a><a class="Iframe_max" id="maxBtn" href="#"
                                onclick="max_btn_click()"></a><a class="Iframe_min" id="minBtn" href="#" onclick="min_btn_click()"></a>
                    </div>
                    <div class="export-main-bg" id="DivOnIframe" runat="server">
                        <iframe width="353" height="190" id="ifIdReport" runat="server" scrolling="no" style="background: #fff !important; border: none"></iframe>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
                       
        <!--Pop up design Ends  -->
    </form>
</body>
</html>

Default.aspx.cs

using System;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnOpenPopUp_Click(object sender, EventArgs e)
    {
        ShowPopup("iframe demo", "288px", "270px", "275px", string.Concat("/test.aspx?s=", DateTime.Now.Second.ToString()));
    }

    public void ShowPopup(string HeadingText, string IFrameWidth, string IFrameHeight, string DivOnIframeHeight, string URL)
    {
        try
        {
            idParagraphiframe.InnerText = HeadingText;
            ifIdReport.Attributes.Add("width", IFrameWidth);
            ifIdReport.Attributes.Add("height", IFrameHeight);
            idClusterDiv_pop.Style["display"] = "block";
            DivOnIframe.Style["height"] = DivOnIframeHeight;
            string vAbsoluteURL = string.Empty;
            vAbsoluteURL = Request.Url.AbsoluteUri;
            vAbsoluteURL = vAbsoluteURL.Remove(vAbsoluteURL.LastIndexOf("/"));
            vAbsoluteURL = string.Concat(vAbsoluteURL, URL);
            ifIdReport.Attributes.Add("src", vAbsoluteURL);

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

iframe (test.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>iframe Test Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Welcome!"></asp:Label>
    </div>
    </form>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on the example of iframe in asp.net c#. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Category iconASP.NET,  How to Tag iconasp.net iframe,  example of iframe in asp.net,  iframe in asp.net,  using iframe in asp.net c#

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Google Maps Draw Polygon Get Coordinates
  • Check if point inside polygon Google Maps JavaScript
  • How to Create a Calendar Control in ASP.NET
  • Interview Etiquette Before, During and After
  • How to Attend Telephonic Interview Tips

Products

  • Online Shopping ASP.NET Project Source Code Online Shopping ASP.NET Project Source Code
    Rated 5.00 out of 5
    $69.00 $39.00
  • responsive-aspnet-mvc-grid-view ASP.NET MVC full Ajaxify and Bootstrap Grid with CRUD Operation
    Rated 4.67 out of 5
    $21.00 $9.00
  • eCommerce Website Source Code in ASP.NET eCommerce Website Source Code in ASP.NET $99.00
  • Hospital Management System Project ASP.Net Source Code
    Rated 5.00 out of 5
    $99.00
  • Whatsapp Bulk Message Sender Source Code WhatsApp Bulk Message Sender Source Code
    Rated 5.00 out of 5
    $69.00

Footer

DotNetTec

A platform for Software Developers and Architects. Learn new skills and apply them in real-life to build an end to end applications.

Sitemap

  • About
  • Blog
  • Shop
  • Contact
  • Privacy Policy

Expertise

  • Web Development
  • Custom Software Development
  • Web API Development
  • Google Maps APIs
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Copyright © 2021 DotNetTec. All rights reserved. Return to top