Problem using UpdatePanel with master page in C #
My code:
<%@ Page Language="C#" %>
<script runat="server">
void button_Click(object sender, EventArgs e)
{
label.Text = "Refreshed by server side event handler at " + DateTime.Now + ".<br>Value provided:" + text.Text;
}
</script>
<html>
<head>
<title>How to update an UpdatePanel with JavaScript</title>
<script type="text/javascript">
function UpdPanelUpdate(id) {
var obj = document.getElementById("<%= text.ClientID %>");
obj.value = id;
__doPostBack("<%= button.ClientID %>", "");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<a href="javascript:UpdPanelUpdate('Value passed by javascript')">Update the Panel</a>
<asp:TextBox ID="text" runat="server" Style="display: none;"></asp:TextBox>
<asp:Button ID="button" runat="server" OnClick="button_Click" Style="display: none;" />
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="false">
<contenttemplate>
<asp:Label ID="label" runat="server"></asp:Label>
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
</triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This works great, but when I use it with Masterpage, the link doesn't work ... No error, but nothing happens ...
Any idea?
Thanks!
a source to share
In your JavaScript, try using Unique instead of ClientID:
function UpdPanelUpdate(id) {
var obj = document.getElementById("<%= text.UniqueID%>");
obj.value = id;
__doPostBack("<%= button.UniqueID%>", "");
}
Let me know if this works.
I suspect what's going on with the ID of the textbox is no longer what you expect. The ID is originally "text", however, as soon as you move this page, the main page changes. Since the controls are now contained on the master page, their IDs are effectively changed to show this relationship. So instead of the text field there will now be something like ctl00 $ cphBody $ text - where ctl100 is the homepage prefix and cphBody is the value assigned to this page by the ContentPlaceHolderID, respectively.
Of course, from the code behind you can do this.text.Text = "new value" and access it directly. It's great. But try using FindControl and you will notice that things get confusing. The easiest way to understand what I am describing is to do the following pages on this page using the home page:
- Set a breakpoint on page load
- Bring up your immediate window (CTRL + ALT + I)
- Enter it in :? this.text.ID (you should see the text)
- Enter ? this.text.ClientID (you should see ctl00_cphBody_text)
- Enter ? this.text.UniqueID (you should see ctl00 $ cphBody $ text)
- Now check the results obtained for steps 3-5 using FindControl. Use? This.FindControl ("text") and? This.FindControl ("ctl00_cphBody_text") and? This.FindControl ("ctl00 $ cphBody $ text") - all but the last one must return null.
To understand this, I suggest reading this article , in particular the section titled "FindControl, JavaScript, and naming containers".
EDIT: Actually, I can't test the function at the moment, but I'm wondering if what I wrote about FindControl applies to JavaScript, control access. Based on this article , it seems the ClientID is suggested by UniqueID. So it might not work.
a source to share
Have you ensured that the ScriptManager is correctly included on the main page? You may find this link helpful; Using the ASP.NET UpdatePanel Control with Master Pages
a source to share