Лучший способ загрузить другие веб-страницы asp.net в Ajax Modal Popup с помощью jQuery

Question

Мне нужно загрузить страницу Comment.aspx (веб-формы) во всплывающем окне Ajax Modal, которое определено MainPage.aspx

Как лучше всего это сделать

MainPage.aspx

<asp:ModalPopupExtender ID="mpShowEmailArticlePopup" runat="server" TargetControlID="lnkBtnEmail" PopupControlID="pnlEmailArticle"
 BackgroundCssClass="modalBackground" CancelControlID="imgBtnCloseEmailPopup" RepositionMode="None"></asp:ModalPopupExtender>

 <asp:Panel ID="pnlEmailArticle" runat="server" BackColor="White" Height="500px" Width="520px" >

<div id="emailArticle" class="commentForm">
 <div id="closeEmailArticle" class="commentClose">
    <asp:ImageButton ID="imgBtnCloseEmailPopup" runat="server" ImageUrl="~/images/close.png" onclick="imgBtnCloseEmailPopup_Click" 
        CausesValidation="False"  /> </div>
<asp:UpdatePanel ID="updPnlEmailArticle" runat="server">
 <ContentTemplate>

//Need to load the COMMENT PAGE HERE


</asp:Panel>
 </ContentTemplate>
    </asp:UpdatePanel>
 </div>
</asp:Panel>

Comment.aspx код страницы

<asp:Panel ID="pnlEmailArticleForm" runat="server" Visible="true">
 <table align="center" cellpadding="0" cellspacing="0" width="600px">
        <tr>
            <td>
                <table cellpadding="0" cellspacing="10">
                    <tr>
                        <td  colspan="2"><asp:Label ID="lblEmailArticleTitle" runat="server" Text="Article Title Will Go here"  CssClass="lblPostComment"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><asp:Label ID="lblEmailArticleRequired" CssClass="txtLabelComment" runat="server" Text="[*] indicates a required field."></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td width="100px">
                            <asp:Label ID="lblEmailArticleFriendsEmail" runat="server" Text="Your friends email address" CssClass="txtLabelComment"></asp:Label>
                        </td>
                        <td width="400px">
                            <asp:TextBox ID="txtEmailArticleFriendsEmail" runat="server" CssClass="validate[required,custom[email]] txtbox300Comment" ></asp:TextBox>
                            &nbsp;*
                        </td>

                    </tr>
                    <tr>
                        <td width="100px">
                            <asp:Label ID="lblEmailArticleYourName" runat="server" Text="Your Name" CssClass="txtLabelComment"></asp:Label>
                        </td>
                        <td width="400px">
                            <asp:TextBox ID="txtEmailArticleYourName" runat="server" CssClass="validate[required] txtbox300Comment" ></asp:TextBox>
                            &nbsp;*
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <asp:Label ID="lblEmailArticleYourEmail" runat="server" Text="Your email address" CssClass="txtLabelComment"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEmailArticleYourEmail" runat="server" CssClass="validate[required,custom[email]] txtbox300Comment" ></asp:TextBox>
                            &nbsp;*
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <asp:Label ID="lblEmailArticleYourMSG" runat="server" Text="Your Message" CssClass="txtLabelComment" ></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEmailArticleYourMSG" runat="server" CssClass="validate[required, maxSize[500]] txtbox300MComment" 
                                TextMode="MultiLine" MaxLength="10"></asp:TextBox>
                            &nbsp;*</td>
                    </tr>
                    <tr>
                        <td  valign="top" >                            
                            <asp:Label ID="lblEmailArticleVC" runat="server" Text="Verification Code" CssClass="txtLabelComment"></asp:Label>
                        </td>
                        <td valign="top" >
                        <uc1:MyCaptcha ID="MyCaptcha2" runat="server"  />

                        </td>
                    </tr>
                    <tr>
                        <td > &nbsp;</td>
                        <td>  
                            <asp:Button ID="btnEmailArticle" runat="server" onclick="btnEmailArticle_Click" 
                                Text="Send Message" Enabled="False" />
                        </td>
                    </tr>
                    <tr>
                        <td > &nbsp;</td>
                        <td>  
                            &nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</asp:Panel>
 <asp:Panel ID="Panel3" runat="server" Visible="false">
 <table align="center" cellpadding="0" cellspacing="0" width="510px">
        <tr>
            <td height="510px" valign="middle" align="center">
                <asp:Label ID="Label9" runat="server" Text=""></asp:Label>
            </td>
            </tr>
</table>
</asp:Panel>

Решение : я использовал следующий подход.Я также публикую это решение, чтобы у других был выбор.Он вполне подходит для моих нужд

jQuery(document).ready(function () {

            $("#<%= imgBtnClose.ClientID %>").click(function () {

                $('#frmComment').validationEngine('hideAll')

             });

             $("#<%= lnkBtnComment.ClientID %>").click(function () {

             $("#<%=pnlCommentForm.ClientID %>").load("Comment.aspx", function (){});
                 $(".formErrorContent").show();
                 $(".formErrorArrow").show();
             });
});

Я также отметил один из ответов как правильный, который мог бы быть использован в моем случае.

Answer 1

Самый простой способ - использовать iframe для отображения содержимого страницы комментариев на главной странице. Таким образом вы сохраняете стиль страницы комментариев.

<iframe src="/comment.aspx" frameborder="0" width="100%" height="300px"></iframe>

Если вы все еще хотите использовать jQuery, то следующее будет делать эту задачу.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<body>
<div id="#results"/>
<script>
var request = $.ajax({
  url: "comment.aspx",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});
</script>
</body>
</html>

Чтобы добавить html-комментарии к целевому элементу, используйте следующую функцию ajax success.

$('#<%=updPnlEmailArticle.ClientID%>').append(html);

Еще одна вещь. Вы должны использовать AssociatedControlID элемента управления Label в форме комментариев. Это делает метку визуализированной в виде HTML-метки , что является простым улучшением удобства использования.

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

Keith

Answer 2

Вы можете создать пользовательский элемент управления, который есть у Comment.aspx и MainPage.aspx. Смотри здесь