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:-
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 /> <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 /> <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>
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.
Leave a Reply