Closing popup when refreshed via function

Question

I have everything setup and the functions are already working and everything seems just fine. Just have one doubt and I dont know if it is even possible. I have a button that opens a modalpopupextender, and in there, I have a form, which has another button that activates a dropdownlist (which is the one where I grab all the information) and after the click on the button, it is supposed to fill all the form. The problem is, it closes the modalpopupextender, and although the function is completing, what I dont want is to have the window closed, I mean refresh the popup without closing it.

Here it is...

Class.aspx

<asp:Panel ID="panelEmail" Height="680px" Width="800px" runat="server" CssClass="modalPopUp">
    <h2>Contact by Email:</h2>
    <hr />
    <blockquote>
        <legend>Pick the template to use: </legend>
        <asp:dropdownlist id ="ddlTemplate" runat ="server" Height="23px" Width="436px">
              </asp:dropdownlist >  
        <asp:Button ID="Button1" runat="server" Text="Select" OnClick="Template_Changed" />   
        <legend>Email Recipient: </legend>
        <asp:TextBox ID ="emailT" runat="server" Width="356px" Height="24px" Visible="true" Text="[email protected]"></asp:TextBox>
        <legend>Email Subject: </legend>
        <asp:TextBox ID ="title" runat="server" Width="356px" Height="24px" Visible="true" ></asp:TextBox> 
        <asp:TextBox ID ="txtDetails" runat="server" Width="672px" Height="267px" Visible="true" ></asp:TextBox>
        <ajaxToolkit:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" runat="server" TargetControlID="txtDetails" 
            EnableSanitization="false" DisplaySourceTab="true" >
        </ajaxToolkit:HtmlEditorExtender><br />      
        <legend>If you want to save the template, name it: (Optional) </legend>
        <asp:TextBox ID ="nameTemplate" runat="server" Width="356px" Height="24px" Visible="true" ></asp:TextBox>
        <br /><br />
        <div align="center">
        <asp:Button ID="Button2" runat="server" Text="Send Mail" OnClick="SendMail"/> 
        <asp:Button ID="Button3" runat="server" Text="Save Template" OnClick="saveTemplate"/>
        <asp:Button ID="btnCancelEmail" runat="server" Text="Cancel"  CausesValidation="false" />
        </div>
    </blockquote>           
</asp:Panel>

<!-- Código añadido por Enrique Bravo -->
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender4" runat="server"
    PopupControlID="panelEmail" 
    TargetControlID="lnkEmail"
    CancelControlID="btnCancelEmail"
    BackgroundCssClass="modalBackGround" 
    DropShadow="true" ></ajaxToolkit:ModalPopupExtender>

                        <tr id="trEmail">
                            <td>
                                <asp:Image ID="Image1" runat="server" ImageUrl ="Images/share.png" width="22px" height="22px" />
                            </td>
                            <td align="left" valign="middle">
                                  <asp:LinkButton ID="lnkEmail" runat="server" Text="Email Contact" ></asp:LinkButton> 
                            </td>
                        </tr>

Class.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack){
loadlist();
         }
    }

    public void loadList()
    {
        if (!this.IsPostBack)
        {
            try
            {
                BO.Messages template = new BO.Messages();
                ddlTemplate.DataSource = template.GetAll();
                ddlTemplate.DataTextField = "Title";
                ddlTemplate.DataValueField = "Id";
                ddlTemplate.DataBind();
                ddlTemplate.SelectedIndexChanged += Template_Changed;
            }
            catch (Exception e)
            {
                e.ToString();
            }
        }
    }

    /// <summary>
    /// Select the correct Message if there has been one template selected
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Template_Changed(object sender, EventArgs e)
    {

        int countryId = int.Parse(ddlTemplate.SelectedItem.Value);
        if (countryId > 0)
        {
            BO.Messages texto = new BO.Messages();
            txtDetails.Text = texto.GetByID(countryId).Body;
            title.Text = texto.GetByID(countryId).Subject;

        }
    }

Answer 1

As the information provided here says:

A Postback is an action taken by an interactive webpage, when the entire page and its contents are sent to the server for processing some information and then, the server posts the same page back to the browser.

So whenever you click the button the page is sent back to the server, altered and sent back to the client, causing a refresh.

To avoid a refresh you can do one of two things:

1. Use an UpdatePanel control

2. Make the method Template_Changed a [WebMethod] and call it via ajax.

   $.ajax({ type: 'POST', url: '<%= ResolveUrl("~/Class.aspx/Template_Changed") %>', data: '{ templateId:' + JSON.stringify(value) + ' }', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (result) { /****FILL FORM HERE ***/}; });