Display parent controls modal from child control in ASP .NET

Question

0.00/5 (No votes)

See more:

Hi friends,

I have 2 user controls , One control is placed inside another control. In parent control I have added a bootstrap modal. in child control i have added an iframe and this iframe will show an aspx page. I need to display the parent controls modal from the aspx page shown inside the iframe . If any one have idea please help me.

Thanks in advance....

What I have tried:

function popEditContent() {
<%-- $('#<%=lblError.ClientID%>').text('');--%>
$('#popContent').modal({
backdrop: 'static',
show: true
});
}
function popClose() {
$('.modal-backdrop').remove();
$('body').removeClass("modal-open").css('padding', '0');
$('#popContent').modal.close();
}

and called this function from the aspx page shown in iframe.. But popup not displays

Posted 16-Aug-16 23:17pm

Subhash PM

Updated 17-Aug-16 0:57am

Add a Solution

Comments

njammy 17-Aug-16 5:36am

Hi Subhash PM
Please click Improve Question and post some markup you already have.

My initial thoughts are that your ASPX page inside the iFrame is not registering the bootstrap scripts or your main web application's bundles (css, scripts etc).

In developer tools in browser (F12 key) check the iframe page sources and check they're loaded.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

njammy · Answer 1 · 2016-08-17T00:57:00

This works for me:
Add this to the aspx page inside iframe
(I would suggest a more dynamic and robust approach of injecting the code rather than hardcode in case the controls change)

JavaScript

function ShowParentModal() {
        $('#myModal', window.parent.document).modal('show');
    };

Master Page (note all the scripts registered.)

ASP.NET

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebFormsSample.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        
        <div class="container body-content">

            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            
            <hr />

            <footer>
                <p>&copy; <%: DateTime.Now.Year %></p>
            </footer>
        </div>

    </form>
</body>
</html>

Test ASPX page: (Registers control with bootstrap)

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapModal.aspx.cs" Inherits="WebFormsSample.BootstrapModal"
    MasterPageFile="~/Site.Master" %>
<%@ Register Src="~/Controls/BootstrapModal.ascx" TagPrefix="uc1" TagName="Modal" %>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
    <uc1:Modal runat="server" id="modal1"></uc1:Modal>
</asp:Content>

BootstrapModal.ascx

ASP.NET

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BootstrapModal.ascx.cs" Inherits="WebFormsSample.Controls.BootstrapModal" %>
<%@ Register Src="iFrameContainerControl.ascx" TagPrefix="uc1" TagName="iFrameContainer" %>

<h4>BootstrapModal.ascx</h4>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Show Modal
</button>

<div class="modal" id="myModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                Hi I am a modal in the parent control.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<div>
    <uc1:iFrameContainer runat="server" ID="iFrameContainer1"></uc1:iFrameContainer>
</div>

iFrameContainerControl.ascx

ASP.NET

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="iFrameContainerControl.ascx.cs" Inherits="WebFormsSample.Controls.iFrameContainerControl" %>

<h4>iFrameContainerControl.ascx</h4>
<div>
<iframe src="../iFrameTestContentPage.aspx">
</iframe>
</div>

iFramTestContentPage.aspx

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="iFrameTestContentPage.aspx.cs" Inherits="WebFormsSample.iFrameTestContentPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <webopt:bundlereference runat="server" path="~/Content/css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            Hi i'm content inside an iFrame.
        </div>
    </form>

    <button type="button" class="btn btn-primary btn-lg" onclick="ShowParentModal()" >
        Show Modal
    </button>

</body>
</html>
<script type="text/javascript">
    function ShowParentModal() {
        $('#myModal', window.parent.document).modal('show');
    };
</script>

Display parent controls modal from child control in ASP .NET

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us