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