2013-06-22 31 views
3

我正在開發一個網站,我希望能訪問網站的網站添加他們的評論。如何在asp.net中彈出一個模式彈出的模式彈出式錯誤

我所做的是,我保留了一個添加按鈕,當用戶單擊該按鈕時,會彈出一個添加評論的彈出窗口。現在用戶不應該將該字段留空。所以我在後面的代碼中進行所需的驗證,現在我想顯示一個模式彈出錯誤消息,當用戶嘗試添加註釋而沒有輸入一個字段。我怎樣才能顯示錯誤信息,然後再返回去評論模態彈出..

我想出的代碼如下...

<asp:Button ID="addComment" runat="server" Text="Add Your Comment" OnClick="addComment_Click" style="margin-top:10px;" Height="30px" ToolTip="Add Your comment about us" Font-Bold="True" /> 

<asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager> 
<ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="btnCancel" targetcontrolid="addComment" popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader" drag="false" backgroundcssclass="ModalPopupBG"></ajaxtoolkit:modalpopupextender> 
<asp:panel id="Panel1" style="display: none" runat="server"> 
    <div class="HellowWorldPopup"> 
    <div class="PopupHeader" id="PopupHeader"> 
     <h3 style="color:white; font-family:'Palatino Linotype'">Add Your Comment</h3> 
    </div> 
    <div class="PopupBody"> 
     <p style="font-family:'Palatino Linotype'; margin-left:10px;">Your Name :</p> 
     <p> 
     <asp:TextBox ID="txtName" Text="" runat="server" Width="300px" style="margin-left:10px; font-family:'Palatino Linotype'; font-size:medium; font-style:italic"></asp:TextBox> 
     </p> 

     <p style="font-family:'Palatino Linotype'; margin-left:10px;">Your Comment:</p> 
     <p> 
     <asp:TextBox ID="txtComment" Text="" runat="server" Width="400px" style="margin-left:10px;font-family:'Palatino Linotype'; max-height:100px; font-size:medium; resize:none; font-style:italic" TextMode="MultiLine"></asp:TextBox> 
     </p> 

    </div> 

    <asp:Button runat="server" id="btnOkay" Text="Done" OnClick="btnOkay_Click" style="font-family:'Palatino Linotype'; margin-bottom:10px; margin-left:10px; width:100px; height:30px; font-size:small;font-weight:700" /> 
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" style="font-family:'Palatino Linotype';width:100px; height:30px; margin-left:10px; font-size:small;font-weight:700" OnClick="btnCancel_Click" /> 

    </div> 

</asp:panel> 

請幫助我..

預先感謝

+0

你可以嘗試jQuery UI的對話框而不是彈出式擴展? –

+0

@Deepu ..你是建議jqeury UI對話框只用於顯示錯誤信息或整個東西 –

+0

我認爲更簡單的方法是將上面的代碼移動到一個單獨的aspx頁面,這將打開一個jQuery UI對話框,然後你可以有裏面的驗證彈出。另外,您可以在客戶端進行驗證,以避免服務器回發。 –

回答

1

我發現這個問題的解決方案:

修改後的代碼如下:

<asp:Button ID="addComment" runat="server" Text="Add Your Comment" OnClick="addComment_Click" style="margin-top:10px;" Height="30px" ToolTip="Add Your comment about us" Font-Bold="True" CausesValidation="false" /> 

<asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager> 
<ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="btnCancel" targetcontrolid="addComment" popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader" drag="false" backgroundcssclass="ModalPopupBG" 
oncancelscript="ClearUI();" behaviorid="modalwithinput"></ajaxtoolkit:modalpopupextender> 
<asp:panel id="Panel1" style="display: none" runat="server"> 
    <div class="HellowWorldPopup"> 
    <div class="PopupHeader" id="PopupHeader"> 
     <h3 style="color:white; font-family:'Palatino Linotype'">Add Your Comment</h3> 
    </div> 
    <div class="PopupBody"> 
     <p style="font-family:'Palatino Linotype'; margin-left:10px;">Your Name :</p> 
     <p> 
     <asp:TextBox ID="txtName" Text="" runat="server" Width="300px" style="margin-left:10px; font-family:'Palatino Linotype'; font-size:medium; font-style:italic"></asp:TextBox> 
     <asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="txtName" errormessage="Please Enter your name" setfocusonerror="true" display="None"></asp:requiredfieldvalidator> 
     <ajaxtoolkit:validatorcalloutextender id="RequiredFieldValidator1_ValidatorCalloutExtender" runat="server" targetcontrolid="RequiredFieldValidator1" behaviorid="textValidator" enabled="True"> 
     </ajaxtoolkit:validatorcalloutextender> 
     </p> 

     <p style="font-family:'Palatino Linotype'; margin-left:10px;">Your Comment:</p> 
     <p> 
     <asp:TextBox ID="txtComment" Text="" runat="server" Width="400px" style="margin-left:10px;font-family:'Palatino Linotype'; max-height:100px; font-size:medium; resize:none; font-style:italic" TextMode="MultiLine"></asp:TextBox> 
     <asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" controltovalidate="txtComment" errormessage="Please Enter the Comment" setfocusonerror="true" display="None"> 
     </asp:requiredfieldvalidator> 
     <ajaxtoolkit:validatorcalloutextender id="Validatorcalloutextender1" runat="server" targetcontrolid="RequiredFieldValidator2" behaviorid="textValidator1" enabled="True"> 
     </ajaxtoolkit:validatorcalloutextender> 
     </p> 

    </div> 

    <asp:Button runat="server" id="btnOkay" Text="Done" OnClick="btnOkay_Click" style="font-family:'Palatino Linotype'; margin-bottom:10px; margin-left:10px; width:100px; height:30px; font-size:small;font-weight:700" /> 
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" style="font-family:'Palatino Linotype';width:100px; height:30px; margin-left:10px; font-size:small;font-weight:700" OnClick="btnCancel_Click" /> 

    </div> 

</asp:panel> 

Source