reload on button click in

Question

Here is my aspx:

<asp:Panel ID="pnl_updateClinicVisit" runat="server" CssClass="modalPopupClinicVisitEntry2" DefaultButton="bt_editClinicVisit_submit"  Style="display:none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button AutoPostBack="false" UseSubmitBehavior="false" ID="AddMedicationChange" ClientIdMode="Static" runat="server" Text="Add Med Change" OnClick="AddMedicationChange_Click" />
            <asp:Panel ID="AddNewMedicationPanel" runat="server">
                <asp:TextBox ID="NewDrugName" OnTextChanged="NewDrugName_TextChanged" runat="server"></asp:TextBox>
                <asp:AutoCompleteExtender ID="NewDrugNameAutoCompleteExtender"
                    runat="server"
                    TargetControlID="NewDrugName"
                    MinimumPrefixLength="1"
                    EnableCaching="false"
                    CompletionSetCount="1"
                    CompletionInterval="500"
                    ServiceMethod="GetDrugs">
                </asp:AutoCompleteExtender>
                <asp:DropDownList OnSelectedIndexChanged="NewDrugChange_SelectedIndexChanged" ID="NewDrugChange" runat="server">
                    <asp:ListItem>Drug +</asp:ListItem>
                    <asp:ListItem>Drug -</asp:ListItem>
                    <asp:ListItem>Dose ↑</asp:ListItem>
                    <asp:ListItem>Dose ↓</asp:ListItem>
                </asp:DropDownList>
                <asp:Button AutoPostBack="false" UseSubmitBehavior="false" ID="SubmitMedChange" runat="server" Text="Add to Visit" OnClick="SubmitMedicationChange_Click" />
            </asp:Panel>
            <asp:ModalPopupExtender ID="updateClinicModalPopupExtender" runat="server" TargetControlID="bt_editClinicVisit_dummy"
                PopupControlID="pnl_updateClinicVisit" CancelControlID="bt_editClinicVisit_cancel"
                DropShadow="true" BackgroundCssClass="modalBackground" />
        </ContentTemplate>
    </asp:UpdatePanel>          
 </asp:Panel> 

For some reason my page is reloading when I click the "AddnewMdication" and "SubmitMedChange" buttons. When I have the AutoPostBack=false UseSubmitBehavior=false , the events fire and then the page reloads. If I don't have these attributes then the page reloads before the events even fire. How do I get AJAX functionality within this modal?

Answer 1

Try setting your Button s as an AsyncPostBackTrigger . You can do this by adding in the Triggers section and declaring the UpdatePanel as a conditional update.

For example

<asp:UpdatePanel ID="UpdatePanel1" runat="server"
    UpdateMode="Conditional">
    <Triggers>        
        <asp:AsyncPostBackTrigger ControlID="AddMedicationChange" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="SubmitMedChange" EventName="Click" />
    </Triggers>    
    <ContentTemplate>        
        <%-- Your code here --%>
    </ContentTemplate>
</asp:UpdatePanel>

What this should do is to explicitly declare that those two buttons as being Async.

If this doesn't work, will you please post the relevant code to your two button OnClick events? AddMedicationChange_Click and SubmitMedicationChange_Click

If you try to interact with controls outside of the UpdatePanel in your code-behind during an asyncpostback, odd things can start to happen.