Ep

Ep

How to work with IFrame using jQuery & Code Behind in Asp.Net? - An Example

C# - Using iFrames In ASP .NET


In my previous post I explained about What is Iframe? - An Introduction. Now I will show you how to use Iframe in ASP.Net web application. 


In this example we will create a beautiful Iframe as Popup as dialog, We can generate Iframe dynamically from client side or server side in a simple way. Find the source code below:-

code project,sample,Iframe in asp.net,code behind,in javascript,jQuery,source code,an example,in jquery how to work with iframe, generate dynamically


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>C# - An Example for IFrame as Popup in ASP.Net from Client Side or Server Side</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 = "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">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="Js/UIDesign/IframDivDrag.js" ScriptMode="Auto" />
        </Scripts>
    </asp:ScriptManager>
    <!-- Pop up design -->
    <asp:UpdatePanel runat="server" ID="upnlPopup" UpdateMode="Conditional">
        <ContentTemplate>
            <br />
            &nbsp;&nbsp;<a href="#" style="text-decoration: none;" onclick="openPopUp()"> Open Iframe
                From Client Side ..</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>
    <br />
    <br />
    &nbsp;&nbsp;<asp:Button ID="btnOpenPopUp" runat="server" Text="Open Iframe From Server Side"
        OnClick="btnOpenPopUp_Click" />
    <!--Pop up design Ends  -->
    </form>
</body>
</html>
-----------
Default.aspx.cs
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

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("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)
        {
        }
    }
}

IframePopUpDesign.css
/*******************New Iframe pop Design **************************/
/*******************Added On :5 May 2013 **************************/
body{margin:0px; padding:0px;}
.export-header-bg span
{
      font: bold 13px Calibri, Arial, "myriad Pro";
      color: #333;
      padding: 6px 0 0 15px;
      float: left;
}
.export_pop_up
{
      min-width: 250px;
      width: auto;
      height: auto;
      border: #fff 2px solid;
      left: 30%;
      top: 1%;
      z-index: 9999999;
      position: absolute;
      border-radius: 8px;
}
div.export-main-bg
{
      position: relative;
      padding: 5px 5px 0px 5px;
      background-color: #a8a8a8;
}
div.export-footer-bg
{
      width: 100%;
      height: 40px;
      background-image: url(../Images/IframePopUp/export_footer_bg.png);
      background-repeat: repeat-x;
}
div.close-btn
{
      float: right;
      width: 86px;
      height: 40px;
      margin-right: 5px;
}

div.export-header-bg
{
      width: 100%;
      height: 30px;
      background-image: url(../Images/IframePopUp/HeaderBg.png);
      background-repeat: repeat-x;
      border-radius: 5px 5px 0px 0px;
      cursor: move;
}

.Iframe_close
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_Close.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}
.Iframe_close:hover
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_Close_h.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}
.Iframe_min
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_minimize.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}
.Iframe_min:hover
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_minimize_h.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}
.Iframe_max
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_maximize.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}

.Iframe_max:hover
{
      display: block;
      float: right;
      height: 23px;
      width: 23px;
      margin-right: 5px;
      background-image: url(../Images/IframePopUp/Iframe_maximize_h.png);
      background-repeat: no-repeat;
      margin-top: 3px;
      *margin-top:-25px;
      outline:0;
      border:0;
}
/*************************END******************/ 


Download source code click here ..

How to work with IFrame using jQuery & Code Behind in Asp.Net? - An Example Reviewed by Ravi Kumar on 4:35:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.