Load specific dynamic user controls on postback

Question

Been bumping my head against this one for a week now so I figured I'd better call in the experts :) .

The problem is more an aesthetic one than an actual code problem but I suspect they might be related. In my program I have a series of user controls that are dynamically added to a web page. These user controls can contain pretty much anything (within reason), the ones I am working with now contain a button and a chart (generated via Javascript) but can get more complex. The dynamic controls are added through the "Page_Init" event and all render 100% correct. I have no problems in this regard.

The problem occurs when I have a postback in one of the controls. When a postback occurs the "Page_Init" events regenerates all the dynamic controls before executing the code in the postback. All normal according to the page life-cycle model. However, since the postback happens in only one of the controls, I would like it if only that control re-renders. As it is now all three the controls re-render which can get distracting for the user.

Is there a way to perhaps intercept the postback generated by the button and handle it via AJAX at the server? Telerik's "RadAjaxManager" does something very similar like this but sadly this component is not available to me and I don't need anything that complex. I know one suggestion is to write the control using AJAX and Webservices but this will be too difficult in my scenario seeing as the dynamic controls can contain static controls of their own.

So in short:

-> Have three functional dynamic controls with quite complex server-side code. Works correctly functionality wise. Cannot convert to pure Javascript/Web-service code.

-> When one of the controls do a postback, all three re-render. Gets distracting for the user especially if pop-ups are involved.

-> Need a way to re-render only the control that is being updated.

Thanks!

Thanks for the reply. I do have quite a few update panels but they did not solve the problem. It seems as if one of my Javascript delays was too long. Does not entirely solve the problem but helps. What I originally had in mind was something like the Dojo loader where parts of the web-page can be updated without others refreshing but it seems manually programming something like that is quite difficult. — GertV
It is not so difficult. Let me show an example. I will upload it as answer — Khazratbek

Khazratbek Khazratbek · Accepted Answer · 2016-01-13T07:05:28

Design page:

<asp:ScriptManager ID="MainScriptManager" runat="server" />
<div class="row text-center text-white">
    <h2>
        <asp:Literal ID="litTitle" runat="server" Text="Feedbacks" />
    </h2>
</div>
<div class="row">
    <div>
        <asp:UpdatePanel ID="updFeedbacks" runat="server">
            <ContentTemplate>
                <asp:Repeater ID="rptFeedbacks" runat="server">
                    <ItemTemplate>
                        <div class="myFeedback">
                            <span><%#Eval("username") %></span>
                            <div class="text-white">
                                <%#Eval("feedback") %>
                            </div>
                        </div>
                    </ItemTemplate>
                    <SeparatorTemplate>
                        <hr />
                    </SeparatorTemplate>
                </asp:Repeater>
                <br />
                <div class="text-center">
                    <asp:Button ID="btnShowMore" runat="server" CssClass="trasparentButton" Font-Size="11" Text="Show more feedbacks" OnClick="btnShowMore_Click" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

Code behind:

private static int FeedbacksNumber = 10;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        BindRepeater(FeedbacksNumber);
}

protected void BindRepeater(int rows)
{
    SqlConnection con = new SqlConnection(Utils.Connection);
    SqlCommand cmd = new SqlCommand("select columns from table where rowsnumber < @num", con);
    cmd.Parameters.Add("@num", SqlDbType.Int).Value = rows;
    con.Open();
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    sda.Fill(ds);
    rptFeedbacks.DataSource = ds;
    rptFeedbacks.DataBind();
    con.Close();
}

protected void btnShowMore_Click(object sender, EventArgs e)
{
    FeedbacksNumber += 10;
    BindRepeater(FeedbacksNumber);
}

Here when you click on Show more feedbacks button, 10 more feedbacks are being loaded. And it will not make a postback. It will update the repeater like a javascript, without postback and moving your cursor, or something else.

Load specific dynamic user controls on postback

1 Answers