Модальная анимация Popup Extender в ASP.net - PullRequest
Новая
       17

Модальная анимация Popup Extender в ASP.net

1 голос
/ 02 июня 2011

В настоящее время я занимаюсь разработкой приложения ASP.net c #.У меня есть вид сетки, которая имеет кнопки ссылки внутри.Когда кнопка ссылки нажата, я хочу отобразить модальное всплывающее окно, используя анимацию постепенного исчезновения и анимацию постепенного исчезновения при нажатии кнопки внутри модального всплывающего окна.

Я добавил расширитель анимации в код и установил TargetControlID в качестве идентификатора кнопки ссылки, однако при попытке запустить веб-сайт выдает ошибку System.InvalidOperationException, TargetControID из ModalPopupExtender недопустим,Элемент управления с идентификатором «sofLink» не найден.sofLink - это идентификатор LinkButton.

Ниже приведен код для вида сетки 

<asp:GridView ID="tblSoftware" runat="server" Width="100%"
                        EnableModelValidation="True" AutoGenerateColumns="False" 
                        onselectedindexchanged="tblSoftware_SelectedIndexChanged"
                        CellPadding="2">
                        <Columns>
                            <asp:TemplateField HeaderText="Software Name">
                                <ItemTemplate>
                                <asp:LinkButton ID="sofLink" Text='<%# Bind("sof_softwareName") %>' 
                                 CommandName="sofID" OnCommand="GetSoftwareModal" CommandArgument='<%# Eval("sof_id") %>' runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="sof_platform" HeaderText="Platform" ReadOnly="True" SortExpression="sof_platform" />
                        </Columns>
                        <HeaderStyle CssClass="gridHeader" />
                        <PagerSettings Position="Bottom" />
                        <PagerStyle HorizontalAlign="Right" VerticalAlign="Middle" CssClass="gridPage" />
                        <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
                    </asp:GridView>

А ниже приведен код для ModalPopupExtender 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="sofLink"
                    PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />

               <asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
                    <asp:Label ID="softwareTitle" Font-Bold="true" Font-Size="Medium" runat="server" Width="100%" style="text-align: center;" /><br /><br />
                    <asp:Literal ID="litSoftware" runat="server"></asp:Literal>
                    <asp:Button id="OKButton" runat="server" Text="Close" style="position: relative; right: 0px; width: 100px;" />
               </asp:Panel>

               <asp:ScriptManager ID="asm" runat="server" />

И нижекод для анимации 

       <ajaxToolkit:AnimationExtender ID="popupAnimation" runat="server"
            TargetControlID="sofLink">

            <Animations>
                <OnClick>
                    <Parallel AnimationTarget="ModalPanel"
                    Duration="0.3" Fps="25">
                    <FadeIn />
                    </Parallel>
                </OnClick>
            </Animations>
       </ajaxToolkit:AnimationExtender>

Спасибо за любую помощь, которую вы можете предоставить.

Ответы [ 3 ]

1 голос
/ 02 июня 2011

TargetControlID (насколько я знаю) должен быть элементом управления самой всплывающей панели, а не элементом управления сеткой.Когда я использую ModalPopupExtender, я обычно использую asp: Button с 'display: none' в качестве TargetControlID.Например, 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnPopup"
                PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />
<asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
<asp:Button id="btnPopup" runat="server" style="display:none" />

В коде позади вы должны управлять отображением и скрытием базы управления для события, например, GetSoftwareModal.Вы также можете связать то, что вам нужно, если это применимо.

Надеюсь, это поможет.

1 голос
/ 02 февраля 2012

Я пытался, однако, моя анимация не отображается.Я добавляю привязку данных в LinkButton: 

<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('DetailView1').databind();document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>

Я думаю, что из-за привязки данных DetailView1 необходимо получить данные из базы данных.Если DetailView1 не привязывается, анимация отображается нормально.

1 голос
/ 02 июня 2011

Вы можете использовать скрытую кнопку и использовать ее идентификатор в качестве TargetControlID для ModalPopupExtender. 

<asp:Button id="btnShowPopup" runat="server" style="display:none" />

Затем вы можете вызвать щелчок кнопки клиентской стороны, если хотите сразу же отобразить всплывающее окно без обратной передачи следующим образом: 

<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
...