c# asp UpdatePanel.Update() not working with jQuery's get

Question

Got a simple test case and not sure why the code is not behaving the same way when calling the url using jQuery's get method.

Code behind:

protected UpdatePanel UpdPanel;
protected PlaceHolder PlHolder;

protected virtual void Page_Load(object sender, EventArgs e)
{
    PlHolder.Controls.Clear();
    var count = Request.QueryString["count"];

    AddControl(string.IsNullOrEmpty(count) ? 10 : Convert.ToInt32(count));
}

public void AddControl(int count)
{
    for (var i = 0; i < count; i++)
    {
        var control = (TestList)Page.LoadControl("~/List/TestList.ascx");

        control.TextBoxText = string.Format("{0} - test", i);
        PlHolder.Controls.Add(control);
    }

    UpdPanel.Update();
}

Markup:

<asp:UpdatePanel runat="server" ID="UpdPanel" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:PlaceHolder runat="server" ID="PlHolder"></asp:PlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>

Javascript:

<script type="text/javascript">
    $(function() {
        var link = $('.link'),
            url = window.location.href.replace("#", "") + "default.aspx?count=20";

        link.on('click', function() {
            $.get(url);
        });            
    });        
</script>

If I use url http://localhost:54645/default?count=20 directly in browser the UpdatePanel.Update() is working fine, but using the jQuery's get it doesn't do anything.

The page life cycle events are triggered in a same way and there are no differences (at least I think so).

Also tried using $.post() with no change.

Any help appreciated.

Answer 1

you need to put an asp:button INSIDE the panel.

UpdatePanel actually do a full post-back, and the page in the client knows to update the relevant part, so you need to keep this in mind in you Page_Load method.