[Solved] Best practice for userControl

[Mathieu]

Hi,
Im looking for the best working practice for loading dynamically two userControl, lets called them uc1, uc2 in one page called pageContainer

Im building a simple registration process in two step.

In  my pageContainer, at run-time, i want to load the userControl uc1

Once the uc1 is filled and submitted, i want to unload the uc1 and then load the uc2.

Thanks for any advice!

Mat

[Giuseppe]

Hello Mathieu,

We would suggest you to review this example here to get you started -- it demonstrates how to load user controls dynamically in a straightforward and simple way with the RadAjaxPanel control. You can also use the RadAjaxManager for the same purpose -- you will need to ajax-enable a standard asp:panel and then load the user controls within.

Hope this helps.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Thanks for the prompt response!

There something  i dont get in the example you sent me.

Where's is the click of the login is handle?

I see this in the declaration of the button login click:
OnClick="CallbackButton1_Click"

Where is the CallbackButton1_Click function?

Thanks
Mat

[Giuseppe]

Hi Mathieu,

You can find all online examples in the installation package of the Prometheus suite. However, we have attached the necessary files for this example for your convenience as well.


Kind regards,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Great, thanks for the code!

I my case, i cant use the radAjaxPanel.

So if we start from the demo we have, i added a radAjaxManager:

 <div class="panelContainer">
                <div class="tabsContainer">
                    <!-- tabs start -->
                    <asp:LinkButton ID="lbLogin" runat="server" CssClass="tabButton"><img src="Images/btnLogin.gif" style="width: 71px; height: 72px;" alt="Login" /></asp:LinkButton>
                    <asp:LinkButton ID="lbTasks" runat="server" CssClass="tabButton"><img src="Images/btnTasks.gif" style="width: 71px; height: 72px;" alt="Tasks" /></asp:LinkButton>
                    <asp:LinkButton ID="lbSearch" runat="server" CssClass="tabButton"><img src="Images/btnSearch.gif" style="width: 71px; height: 72px;" alt="Search" /></asp:LinkButton>
                    <!-- tabs end -->
                </div>
                <div class="contentContainer">
                    <div class="panelContent">
                        <asp:Panel ID="Panel1" runat="server" Style="font: normal 12px Arial, Verdana, Sans-serif;
                            color: #a6a896;">
                        </asp:Panel>
                    </div>
                </div>
                <div class="controlsContainer">
                </div>
            </div>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

In the Page_Load, i added the following to capture the click event of the button login:

UserControl userControl = (UserControl)this.LoadControl(controlName);

HtmlButton btn1 = (HtmlButton)userControl.FindControl("btnLogin");
RadAjaxManager1.AjaxSettings.AddAjaxSetting(btn1, Panel1);

The asp:panel never refresh, but the new userControl is loaded propaly in the codenehind.

Am i doiing something wrong ?

[Giuseppe]

Hi Mathieu,

We tried to reproduce the problem you are experiencing but our efforts were not successful -- please review the modified application that uses RadAjaxManager to achieve the desired functionality.

Hope this helps.


Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Thanks for your reply.

Strangely, i couldnt get it to works with my solution.

I was able to refresh the panel by doiing the following:

<div class="centerMain" >
                <div class="main">
                    <img src="images/tabOnLeft.png" />
                    <div style="background-image:url(images/tabOnMid.png);height:26px;color:#FFF" >
                        <div style="font-size:12px;line-height:26px" id="title" runat="server"><asp:Literal ID="Literal15" runat="server" Text="<%$ Resources: registration, signupProcess %>" /></div>
                    </div>
                    <img src="images/tabOnRight.png" />
                    <div class="bgContainer990" >
                        <div class="bg990">
                            <asp:UpdatePanel ChildrenAsTriggers="false" ID="UpdatePanel1"  UpdateMode="Conditional" runat="server">
                                <ContentTemplate>
                                    <asp:Panel id="Panel1" runat="server"></asp:Panel>
                                </ContentTemplate>
                             </asp:UpdatePanel>
                        </div>
                    </div>
                </div>
            </div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

In the code-behind i do:

updatePanel1.Update();

to refresh the content of the panel.


Side question:
Is the position of the radAjaxManager in the code can influence its behavior or the behavior of other controls?

Thanks

[Giuseppe]

Hello Mathieu,

You do not need to wrap the updated content within a ASP.NET AJAX UpdatePanel -- the AjaxManager control will take care of the ajaxification on its own. Please review the sample attached in our previous reply and you will notice that we have not declared any UpdatePanels explicitly.

Hope this helps.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Hi Manuel,
Thanks for getting to the bottom of this!

I dont get how the login button doesnt do a postback (page flickering)
In your example, what takes care of ajaxify the button login?
In my case, if i remove the update panel, my button, in my usercontrol loaded in the panel, is doiing a postback.

Thanks

[Giuseppe]

Hi Mathieu,

The controls are ajaxified in the code-behind in the sample we provided:

            RadAjaxManager1.AjaxSettings.AddAjaxSetting(lbLogin, Panel1);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(lbSearch, Panel1);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(lbTasks, Panel1);

However, you can use the design-time functionality as well to set up the same control relations.


Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Hi Manuel,

Im not talking about the label up top.
I want to know how the click of the button login in the userControl LoginCS is handle.

Thanks!

[Giuseppe]

Hello Mathieu,

Now I think I understand what do you mean -- the ajaxification of the Panel itself (where the user controls are loaded) is a side-effect of the current implementation of the RadAjaxManager Prometheus control that is based on the ASP.NET AJAX framework -- it is a result of the fact that we have specified an ajax setting that the panel should be updated on ajax request (i.e. it is not only updated on ajax requests but now triggers ajax requests on its own).

Hope this sheds some light on the situation.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathieu]

Ok, i get it now thanks for getting to the bottom of this!

In the example yout sent me, is there any way possible to retain the text enter in the password field when  the button clcik is press?

I have experience the same thing in other project with html checkbox and radiobutton, once an ajax request is done, it lost its selected value.

Thanks
 

[Giuseppe]

Hello Mathieu,

If we understand you correctly the observed behavior is by design -- password fields do not preserve their values over postback due to security concerns and the control would behave exactly in the same way with regular postbacks (you can set EnableAjax="false" for the AjaxManager to test that).

Let us know if we are missing something out.


All the best,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center