I have my page set up as follows. I know there is something wrong about what I'm doing, and any advice, or other solutions or a fix for this one is greatly appreciated...
Content.aspx
<script type="text/javascript">
// I have omitted alot of the javascript, but you get the idea...
// When a user clicks the context menu of an item, it calls this function passing in the value of the menu id$('<%= MenuID.ClientID %>').value = objectID;
__doPostBack('<%= MenuID.ClientID %>','');
</script>
<divid="MenuElement">
<IMM:MenuTreeid="MenuTree_List"runat="server"/>
</div>
<divid="DetailsElement"style="float:right;"><asp:UpdatePanelID="UpdatePanel_DetailsPanel"RenderMode="Inline"runat="server"UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTriggerControlID="MenuID"EventName="ValueChanged"/>
</Triggers>
<ContentTemplate>
<asp:HiddenFieldID="MenuID"runat="server"Value="0"OnValueChanged="UpdateMenuID"/>
<asp:PlaceHolderID="GeneralHolder"runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Content.aspx.cs
protectedstring _MenuItemID ="0";private System.Web.UI.Control MyControl;
protectedvoid UpdateMenuID(object sender,EventArgs e){
this.MyControl = LoadControl("~/Controls/PageDetails.ascx");((Immersive.iScribe.Controls.Content)this.MyControl).MenuItemID = MenuID.Value.ToString();
GeneralHolder.Controls.Add(this.MyControl);}
PageDetails.ascx
<asp:UpdatePanelID="UpdatePanel_Details"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:PanelID="Details"style="float:left;"runat="server">
<!-- Text boxes to hold the information -->
<asp:ButtonID="Details_SaveButton"Text="Save"OnClick="Details_Save"CssClass="Button"runat="server"/>
</asp:Panel>
</ContentTemplate></asp:UpdatePanel>
PageDetails.ascx.cs
publicstring MenuItemID{
get {return _MenuItemID; }set { _MenuItemID =value; }}
protectedvoid Page_Load(object sender,EventArgs e){
if (_MenuItemID !="0")
{
//Load the informationMenuItem_Load();
}
}
protectedvoid Details_Save(object sender,EventArgs e){
//Save the details}
***********************************************************
So basically, it works fine, I can click a context item, which loads up the control with the value, and everything looks good. However, when I change the values in the user control, and click save, the page posts(using Firefox debug) but doesn't update the update panel. If I then click save again, the whole content of the updatepanel disappears.
Any ideas?? It's really frustration as my AJAX isn't that experienced, and I need this to work! :o)
Thanks in advance,
Mick
Call the Update method of the updatepanel in codebehind. Do it in every server side event where the up's content probably changing (for example: in Details_Save)
I put UpdatePanel_Details.Update(); in the codebehind of Details_Save, but nothing happens. still no update, and on the second click of save, the entire content inside that update panel disappears.
I have been thinking about it, and would this be plausible.
the context menu sets the hidden value, which then causes an update to the update panel which loads the user control. So on the main page, I have an update panel, which then loads a user control, which in itself, has a user control. what I get confused about, is if I click save, I am refreshing the user controls update panel, which shoudl work fine. My thought is that on the update, it is losing hte value of the menuID. would this be right?
THanks,
Mick
It seems that the "menuid" is not stored in viewstate/session, so every postback/asyncbostback you need to get it from the hidden field. Maybe in some case this step is missing, step by step debugging should help.
To maybe ask a silly question, where would I make that check for the hidden field on every postback/asyncpostback?
I think the problem is that
OnValueChanged="UpdateMenuID" hiddenfield event runsafterthe page (and the control) load event, so in the page load event the MenuID is still "0"
?
The course of the events and page structure is as follows:
Left Hand Div
MenuTree
End Div
Right Hand Div
Update Panel: Mode=Conditional
Hidden Field: ID=MenuID; Value = 0; OnValueChanged=UpdateMenuID
PlaceHolder
Triggers
AsyncTrigger: ControlID=MenuID; EventName=ValueChanged
End UpdatePanel
End Div
When a user clicks a context menu item, the javascript changes the value of the hidden field and calls __doPostBack('<%= MenuID.ClientID %>', '')
This then calls the UpdateMenuID function in codebehind.
In that function I then dynamically load the usercontrol into the placeholder. The user control structure is as follows:
Update Panel: Mode=Conditional
Textboxes etc
Button: onclick="Save_Data"
End UpdatePanel
The user control has a public property of MenuID
So back to my UpdateMenuID function I did the following:
Get the value of the hidden field
((MyUserControlClass).this.MyControl).MenuID = HiddenField.Value
Placeholder.Controls.Add(this.MyControl)
This works fine, it loads the control, passes the correct id, and loads the corresponding data.
The Page_Load of my user control is as follows:
protected void Page_Load(object sender, EventArgs e)
{
LoadMenuItem(_MenuID);
}
protected void Save_Data(object sender, EventArgs e)
{
Call Update method;
Update Label on user control.Text = "Saved";
}
When I click the save button, the user control posts, but the update panel is not refreshed. If I then click the button again, the whole control disappears. I have tried adding
UserControlsUpdatePanelID.Update();
but this does not work either.
There has been mention of viewstate, btu how would this tie in with that, and/or affect the control disappearing> I think more is going on here I don't understnad, perhaps in the way the the updatepanels are set up. Obviously depending on the value clicked in the context menu, would load a different control.
If I take out the parent page update panel and just run the user control, it works fine.
Thanks for any help,
Mick
mickyjtwin:
In that function I then dynamically load the usercontrol into the placeholder. The user control structure is as follows:
That could be a problem! You need to add that dynamically loaded usercontroleachtime to the palecholder when you postback your page.
The following won't work (I think):
- you click your tree, postback, during that postback you add dynamically the usercontrol in codebehind in UpdateMenuID method and the usercontrol shown on the page.
- now you click the save button of your recently displayed usercontrol, postback, in codebehind UpdateMenuID method is notcalled this time. If this true, that is bad, because your control is not part of the page, and your page logic fails.
One final thoughts:
You could make more robust your page, when you not call __doPostBack('<%= MenuID.ClientID %>', '') or similar, instead put a dummy button near the hidden field, and call the click event of the button (search the forum for this solution). This is the recommended way to trigger an updatepanel refresh from javascript.
Ok, after alot of debugging, and breakpoints, I now know why the control is disappears as per the previous post. Yes, the control is not being loaded again, but I do not understand how I would do this and make it work.
I have since revised it to the following to simplify and demonstrate.
PARENT PAGE.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server"
ScriptMode="release"
EnablePartialRendering="true">
</asp:ScriptManager>
<div>
<asp:Button ID="ContextItem" runat="server" OnClick="ContextItem_Click" Text="Click ME!" />
</div>
<div>
<asp:UpdatePanel ID="ParentUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="ControlHolder" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ContextItem" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
PARENT PAGE.aspx.cs
protected void ContextItem_Click(object sender, EventArgs e)
{
ControlHolder.Controls.Clear();
this.MyControl = LoadControl("~/Controls/AJAXTestControl.ascx");
ControlHolder.Controls.Add(this.MyControl);
}
AJAXTestControl.ascx
<asp:UpdatePanel ID="ParentUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="ResultsPanel" runat="server" Visible="False">
<asp:Literal ID="Results" runat="server" />
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server">
<asp:TextBox ID="SomeText" runat="server" />
<asp:Button ID="SaveButton" runat="server" Text="Save" OnClick="SaveButton_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel
AJAXTestControl.ascx.cs
protected void SaveButton_Click(object sender, EventArgs e)
{
ResultsPanel.Visible = true;
Results.Text = SomeText.Text;
}
********************
Obviously when I click the context button, the control loads fine. FANTASTIC! However, on a subsequent save, the control disappears. If I just load the control into the page load, I have no problems at all. Obviously it is because I am dynamically adding the control on a button click. The question I have, which is killing me, is how should I manage the loading of the control, and subsequent postbacks, so when a user clicks the save button, the usercontrol is still there, and the results panel is displayed!
Thanks in advance, I really need a solution or help understanding this!
Mick
At first I see two possible way:
a) In ContextItem_Click you save in the viewstate that the control is loaded the first time. Later in the page_load you check the viewstate whether the control was loaded before, and simply add the control again. (Anyway page_init is the recommended event to loading dynamic controls)
b) This is the better one I think. Don't load dynamically the usercontrol, instead add your control always in page_load, or add simply statically in the updatepanel. Of course modify the usercontrol to render nothing/empty when the context is not set yet.
