0
Ajax ModalPopupを使用して、Comment.aspxをモーダルポップアップとしてロードするには、2つのリンクがあります。ASP.Netアップデートパネルの悪夢。ボタンは正しく発射されません。 WebフォームC＃
ModalPopup1で同じComment.aspxを開くLinkBuutonと、別のModalpopup2で同じページを読み込む投稿コメントの送信ボタンです。私はjQueryを使用してクリックをトラップし、尊重されたModalPopupのComment.aspxページを読み込みます。
リンクボタン "lnkBtnComment"を使用して "mpShowCommentPopUp"ポップアップを開くと、問題なく動作し、インライン検証が問題なく表示されるという問題があります。
しかし、私はこのポップアップを閉じて、このシナリオでボタン "btnPostComment2"を使用して同じComment.aspxをロードしようとするとボタンが起動しません。
もし私がページをリフレッシュして、今度はlnkBtnCommentを使ってComment.aspxページを開きます。 "今回はうまくいきません。何も問題なく表示されます。
私は部分的なメインページのコードと
<%@ Page Title="" UICulture="Auto" Language="C#" MasterPageFile="~/SiteMaster.master" AutoEventWireup="true" CodeFile="ArticleDetails.aspx.cs" Inherits="ArticleDetails" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript">
jQuery(document).ready(function() {
$("#<%=lnkBtnEmail.ClientID %>").click(function(){
//Load EMail Form
$("#<%=pnlEmailArticleForm.ClientID %>").load("EmailArticle.aspx?ArticleID=<%=Request["ArticleID"] %>&Language=<%=Request["Language"] %>", function() { });
// $(".formErrorContent").show(); // $(".formErrorArrow").show();
});
//Close popup
$("#<%= imgBtnCloseEmailPopup.ClientID %>").click(function() { $('#frmEmail').validationEngine('hideAll')
// $(".formErrorContent").hide(); // $(".formErrorArrow").hide();
});
$("#<%=btnPostComment2.ClientID %>").click(function(){
//Load Comment Form
$("#<%=pnlCommentForm2.ClientID %>").load("Comment.aspx?ArticleID=<%=Request["ArticleID"] %>&Language=<%=Request["Language"] %>", function() { });
});
$("#<%= imgBtnClose2.ClientID %>").click(function() { $('#frmComment').validationEngine('hideAll') });
$("#<%= lnkBtnComment.ClientID %>").click(function() {
//Load Comment Form
$("#<%=pnlCommentForm.ClientID %>").load("Comment.aspx?ArticleID=<%=Request["ArticleID"] %>&Language=<%=Request["Language"] %>", function(){ });
});
$("#<%= imgBtnClose.ClientID %>").click(function() { $('#frmComment').validationEngine('hideAll') });
});
//For printing
function CallPrint() {
window.open('PrintArticle.aspx?articleID=<%=Request["articleID"] %>', 'Email', 'width=690, height=650,left=100, top=100, location=no, menubar=no, resizable=no, scrollbars=yes, status=no, toolbar=no,fullscreen=no');
}
//For printing
function CallDownload() {
window.open('PrintArticle.aspx?articleID=<%=Request["articleID"] %>&download=yes', 'Email', 'width=690, height=650,left=100, top=100, location=no, menubar=no, resizable=no, scrollbars=no, status=no, toolbar=no,fullscreen=no');
}
</script>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}
.bodyClass
{
background: url(~/images/content_repeat.jpg) repeat-xy;
background-color:#E5E5E5;
}
</style>
<script type="text/javascript" >
function showHelloWorld() {
//alert('Hello World');
return true;
}
//-->
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="container" class="container">
<div id="TopBanner" class="TopBanner"><asp:Image ID="imgTopBanner" runat="server" /> </div>
<div id="TopBannerBase" class="TopBannerBase" ></div>
</div>
<div id="bodyContainer" class="bodyContainer">
<table cellpadding="0" cellspacing="0" >
<tr>
<td width="35px"></td>
<td width="826px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="826px">
<tr>
<td height="40px" width="826px" >
<div class="breadcrum" >
<asp:HyperLink ID="hyLkHomeNav" runat="server" CssClass="goldNav" NavigateUrl="default.aspx" ></asp:HyperLink>
</div>
<div class="breadcrum">
<asp:HyperLink ID="hyLkPageNav" runat="server" CssClass="goldNav" ></asp:HyperLink>
</div>
<div class="breadcrum">
<asp:HyperLink ID="hyLnkYear" runat="server" CssClass="goldNav" ></asp:HyperLink>
</div>
<div class="breadcrum">
<asp:HyperLink ID="hylnkArticleTitle" runat="server" CssClass="goldNav" ></asp:HyperLink>
<asp:Label ID="lblArtcleTitleNav" CssClass="navActiveCurrent" runat="server" Text=""></asp:Label>
</div>
<asp:TextBox ID="txtPageName" runat="server" Height="16px" Visible="False" Width="16px"></asp:TextBox>
</td>
</tr>
<tr>
<td height="35px" width="826px">
<table cellpadding="0" cellspacing="0" width="826px" >
<tr>
<td height="400px" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="30px">
<asp:Label ID="lblArticleTitle" CssClass="ArticleTitleText" runat="server" Text="" Width="100%"></asp:Label>
<div id="articlePubdate" Class="ArticlePubDate" >
<asp:Label ID="lblPublished" runat="server" Text="Published : "></asp:Label>
<asp:Label ID="lblPubDate" runat="server" Text=""></asp:Label>
</div>
</td>
</tr>
<tr>
<td height="2px" bgcolor="#D1C094"></td>
</tr>
<tr>
<td style="text-align:justify" >
<div id="divArticleImage" class="divArticleImage" runat="server">
<asp:Image ID="imgArticle" CssClass="ArticleImage" runat="server" />
<div id="divArticleImageDesc" class="divArticleImageDesc" >
<asp:Label ID="lblImgDesc" runat="server" Text=""></asp:Label>
</div>
</div>
<asp:Label ID="lblArticleDetails" CssClass="PageBodyText" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr><td >
<table class="divArticleDetailsFooter"><tr><td>
<!-- Article Details Section footer -->
<div style="height:10px;"></div>
<div id="divArticleDetailsFooter" class="divArticleDetailsFooter">
<div id="divlblComment" class="imgTArticleDetailsFooter">
<asp:Image ID="imgComment" runat="server" ImageUrl="~/images/comment.png" />
<asp:LinkButton ID="lnkBtnComment" runat="server"
CssClass="divArticleDetailsFooterLabels" CausesValidation="False"
onclick="lnkBtnComment_Click" >Comment</asp:LinkButton>
</div>
<div id="divlblEmail" class="imgTArticleDetailsFooter">
<asp:Image ID="imgEmail" runat="server" ImageUrl="~/images/email.png" />
<asp:LinkButton ID="lnkBtnEmail" runat="server"
CssClass="divArticleDetailsFooterLabels" CausesValidation="True"
onclick="lnkBtnEmail_Click" >Email</asp:LinkButton>
</div>
<div id="divlblPrint" class="imgTArticleDetailsFooter">
<asp:Image ID="imgPrint" runat="server" ImageUrl="~/images/print.png" />
<asp:HyperLink ID="hylPrintArticle" runat="server" CssClass="divArticleDetailsFooterLabels" OnClick="CallPrint()" NavigateUrl=""> Print</asp:HyperLink>
</div>
<div id="divlblDownload" class="imgTArticleDetailsFooter">
<asp:Image ID="imgDownload" runat="server" ImageUrl="~/images/download.png" />
<asp:HyperLink ID="hylDownloadArticle" runat="server" CssClass="divArticleDetailsFooterLabels" OnClick="CallDownload()" NavigateUrl=""> Download</asp:HyperLink>
</div>
</div>
<!-- Article Details Section footer -->
</td></tr></table>
</td></tr>
<tr>
<td height="20px" ></td>
</tr>
<tr>
<td height="2px" bgcolor="#D1C094"></td>
</tr>
<tr>
<td height="100px" >
<div id="showComments" class="showComments">
<div id="divCommentCount" class="CommentCount"><asp:Label ID="lblCommentCount" runat="server" Text="Comment"></asp:Label> </div>
<div id="divPostCommentMSG" class="PostCommentMSG"><asp:Label ID="lblPostCommentMSG" runat="server" Text="Please keep your comments relevant to this website entry. Email addresses are never displayed, but they are required to confirm your comments. Please note that gratuitous links to your site are viewed as spam and may result in removed comments."></asp:Label></div>
<div id="divPostCommentButton" class="divPostCommentButton">
<asp:Button ID="btnPostComment2" runat="server" CssClass="buttonPC"
Text="Post Comment" CausesValidation="False"
onclick="btnPostComment2_Click" /></div>
<div>Line</div>
<div>Post Date</div>
<div>Message</div>
<div>Person Name</div>
<div>line</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="39px" valign="top">
</td>
</tr>
</table>
</div>
<div>
<asp:ModalPopupExtender ID="mpShowCommentPopUp" runat="server" TargetControlID="lnkBtnComment" PopupControlID="pnlComment"
BackgroundCssClass="modalBackground" CancelControlID="imgBtnClose" RepositionMode="None" ></asp:ModalPopupExtender>
<asp:Panel ID="pnlComment" runat="server" BackColor="White" Height="400px" Width="520px" style="display:none">
<div id="divcommentForm" class="commentForm">
<div id="divClose" class="commentClose">
<asp:ImageButton ID="imgBtnClose" runat="server" ImageUrl="~/images/close.png" CausesValidation="False" />
</div>
<!-- comment Form -->
<asp:Panel ID="pnlCommentForm" runat="server" Visible="true">
</asp:Panel>
<!-- comment Form -->
</div>
</asp:Panel>
</div>
<div>
<asp:ModalPopupExtender ID="mpShowCommentPopUp2" runat="server" TargetControlID="btnPostComment2" PopupControlID="pnlComment2"
BackgroundCssClass="modalBackground" CancelControlID="imgBtnClose2" RepositionMode="None" ></asp:ModalPopupExtender>
<asp:Panel ID="pnlComment2" runat="server" BackColor="White" Height="400px" Width="520px" style="display:none">
<div id="divcommentForm2" class="commentForm">
<div id="divClose2" class="commentClose">
<asp:ImageButton ID="imgBtnClose2" runat="server" ImageUrl="~/images/close.png" CausesValidation="False" />
</div>
<!-- comment Form -->
<asp:Panel ID="pnlCommentForm2" runat="server" Visible="true">
</asp:Panel>
<!-- comment Form -->
</div>
</asp:Panel>
</div>
<div>
<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="350px" Width="520px" >
<div id="emailArticle" class="EmailArticleForm">
<div id="closeEmailArticle" class="commentClose">
<asp:ImageButton ID="imgBtnCloseEmailPopup" runat="server" ImageUrl="~/images/close.png" onclick="imgBtnCloseEmailPopup_Click" CausesValidation="False" />
</div>
<!-- Email Form -->
<asp:Panel ID="pnlEmailArticleForm" runat="server" Visible="true">
</asp:Panel>
<!-- Email Form -->
</div>
</asp:Panel>
</div>
</asp:Content>
メインページ部分コードC＃
protected void imgBtnCloseEmailPopup_Click(object sender, ImageClickEventArgs e)
{
this.mpShowEmailArticlePopup.Show();
}
protected void lnkBtnComment_Click(object sender, EventArgs e)
{
this.mpShowCommentPopUp.Show();
}
protected void lnkBtnEmail_Click(object sender, EventArgs e)
{
this.mpShowEmailArticlePopup.Show();
}
protected void btnPostComment2_Click(object sender, EventArgs e)
{
this.mpShowCommentPopUp2.Show();
}
Comment.aspxページコード
<%@ Page Language="C#" UICulture="Auto" AutoEventWireup="true" CodeFile="Comment.aspx.cs" Inherits="Comment" EnableViewStateMac="False" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 id="Head1" runat="server" updatemode="Conditional">
<title></title>
<% if (Session["lang"] == "ar-AE")
{ %>
<link href="~/Styles/arabic.css" rel="stylesheet" type="text/css" />
<% } else { %>
<link href="~/Styles/english.css" rel="stylesheet" type="text/css" />
<% } %>
<link href="Scripts/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="Scripts/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="Scripts/js/jquery.validationEngine-ar.js" type="text/javascript" charset="utf-8"></script>
<script src="Scripts/js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="Scripts/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
//jQuery("#Form2").validationEngine();
<% if(Session["lang"] =="ar-AE") %>
jQuery("#frmComment").validationEngine({ promptPosition: 'topLeft', scroll: false });
<%else %>
jQuery("#frmComment").validationEngine({ promptPosition: 'topRight', scroll: false });
<% %>
// $("#frmComment").validationEngine('attach');
});
</script>
</head>
<body id="body" dir="<%=Session["PageDIR"] %>" bgcolor="White">
<form id="frmComment" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updPnlComment" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlCommentForm" runat="server" Visible="true" >
<div id="commentFormTable" class="commentFormTable">
<table align="left" cellpadding="0" cellspacing="0" width="460px" border=0 >
<tr>
<td >
<table cellpadding="0" cellspacing="8" width="460px" >
<tr>
<td colspan="2"><asp:Label ID="lblPostComment" runat="server" Text="Post Comment" CssClass="lblPostComment"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblCommentMsg" CssClass="txtLabelComment" runat="server" Text="Please make sure your comment is not abusive, defamatory or offensive. All
fields must be filled in correctly or the comment will not be approved."
Width="400px" ></asp:Label>
</td>
</tr>
<tr>
<td colspan="2"><asp:Label ID="lblRequired" CssClass="txtLabelComment" runat="server" Text="[*] indicates a required field."></asp:Label>
</td>
</tr>
<tr>
<td width="110px">
<asp:Label ID="lblFullName" runat="server" Text="Full Name" CssClass="txtLabelComment"></asp:Label>
</td>
<td width="340px">
<asp:TextBox ID="txtFullName" runat="server"
CssClass="validate[required] txtbox300Comment" TabIndex="1" ></asp:TextBox>
*
<asp:RequiredFieldValidator ID="rfv1" runat="server"
ControlToValidate="txtFullName"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td >
<asp:Label ID="lblEmail" runat="server" Text="Email Address" CssClass="txtLabelComment"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"
CssClass="validate[required,custom[email]] txtbox300Comment" TabIndex="2" ></asp:TextBox>
*
<asp:RequiredFieldValidator ID="rfv2" runat="server"
ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td >
<asp:Label ID="lblCountry" runat="server" Text="Country" CssClass="txtLabelComment"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="validate[required] ddGeneralComment"
TabIndex="3">
<asp:ListItem Value="" ></asp:ListItem>
<asp:ListItem Value="AF">Afghanistan</asp:ListItem>
<asp:ListItem Value="AL">Albania</asp:ListItem>
<asp:ListItem Value="DZ">Algeria</asp:ListItem>
<asp:ListItem Value="AS">American Samoa</asp:ListItem>
<asp:ListItem Value="AD">Andorra</asp:ListItem>
<asp:ListItem Value="AO">Angola</asp:ListItem>
<asp:ListItem Value="AI">Anguilla</asp:ListItem>
<asp:ListItem Value="ZR">Zaire</asp:ListItem>
<asp:ListItem Value="ZM">Zambia</asp:ListItem>
<asp:ListItem Value="ZW">Zimbabwe</asp:ListItem>
</asp:DropDownList>
*<asp:RequiredFieldValidator ID="rfv3" runat="server"
ControlToValidate="ddCountry"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td >
<asp:Label ID="lblMSG" runat="server" Text="Your Message" CssClass="txtLabelComment" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtMessage" runat="server" CssClass="validate[required, maxSize[1000]] txtbox300MComment"
TextMode="MultiLine" MaxLength="10" TabIndex="4"></asp:TextBox>
*<asp:RequiredFieldValidator ID="rfv4" runat="server"
ControlToValidate="txtMessage"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td > </td>
<td>
<asp:CheckBox ID="cbAnonymous" runat="server"
Text="I wish to be anonymous. Do not publish my name with my comment. " CssClass="txtLabelComment" />
</td>
</tr>
<tr>
<td > </td>
<td>
<div>
<asp:Button ID="btnSaveComments" runat="server" CssClass="buttonPopups" onclick="btnSaveComments_Click" Text="Post Comment" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlCommentSuccessMSG" runat="server" Visible="false">
<table align="center" cellpadding="0" cellspacing="0" width="510px">
<tr>
<td height="410px" valign="middle" align="center">
<asp:Label ID="lblCommentSuccessMSG" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
これは私がこれでイライラと私は一つのことを解決する最後の1週間からそれで働いていると、別のシンクタンクがパンにダウンを開始しているコードです。
私はコードをAjaxモーダルポップアップを使用してこのパネルを更新パネルと共に呼び出すと、個々のページとしてはうまく動作しますが、バグはうまくいきます。
同じ機能を使用するより良い方法がありますか？
私は何か助けていただければ幸いです。
私はaspx開発環境を持っていないが、それはJavaScriptが発射したようだ。 Chrome、Safari、Firefoxのエラーコンソールを確認しましたか？ – reporter
エラーは発生しません – Learning
IEとデバッグモードで質問に記載された上記の手順を繰り返し、私自身がcomment.aspxページに移動し、ページ自体にエラーが表示されたら、このエラーを生成します – Learning