Subhash PM Ответов: 1

Дисплей родительского контроля модального управления от ребенка в ASP .Чистая

Привет друзья,

У меня есть 2 пользовательских , одна находится внутри другой элемент управления. В родительском элементе управления я добавил модальный bootstrap. в Управления я добавил iframe и таким образом, он может показать aspx-странице. Мне нужно, чтобы отобразить родительского контроля модальные из aspx-страницы отображается внутри iframe . Если у кого-то есть идея, пожалуйста, помогите мне.



Заранее спасибо....

Что я уже пробовал:

функция popEditContent() {
<%-- $('#<%=lblError.ClientID%>'). text (");--%>
$('#popContent'). модальный({
фон: "статический",
шоу: правда
});
}
функция popClose() {
$('. modal-background'). удалить();
$('тело').removeClass("модально-открыть").в CSS('обивка', '0');
$('#popContent'). modal. close();
}

и вызвал эту функцию со страницы aspx, показанной в iframe.. Но всплывающее окно не отображается

njammy

Привет Субхаш личку
Пожалуйста, нажмите кнопку улучшить вопрос и опубликуйте некоторую разметку, которая у вас уже есть.

Мои первоначальные мысли заключаются в том, что ваша страница ASPX внутри iFrame не регистрирует сценарии начальной загрузки или пакеты вашего основного веб-приложения (css, скрипты и т. д.).

В инструментах разработчика в браузере (клавиша F12) проверьте источники страниц iframe и убедитесь, что они загружены.

1 Ответов

Рейтинг:
1

njammy

Это работает для меня:
Добавьте это на страницу aspx внутри iframe
(Я бы предложил более динамичный и надежный подход к введению кода, а не жесткого кода в случае изменения элементов управления)

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


Главная страница (обратите внимание на все зарегистрированные скрипты.)
<%@ 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>


Тестовая страница ASPX: (регистрирует управление с помощью bootstrap)
<%@ 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 вносятся
<%@ 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 вносятся
<%@ 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-файл
<%@ 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>