ASP.NET UpdatePanel - inline variable - asp.net

I have a server-side variable which is assigned a value in PreRender. For the sake of simplicity, let's imagine I'm doing this:
protected string test;
protected void Page_PreRender(object sender, EventArgs e)
{
test = Guid.NewGuid().ToString();
}
In my markup, the variable is then referred to within an UpdatePanel, like so:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Perform postback" />
<script type="text/javascript">
Sys.Application.add_load(function () {
alert('<%=test%>');
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
On first load of the page, the JavaScript alert function gives me a random value, as expected. However, on any subsequent postback, the original value of the Guid is retained.
Can anybody explain why this is so, and offer a solution? I'm fairly sure I can achieve the required behaviour by putting the value of 'test' in a hidden field, for example, but ideally I wouldn't have to sink to those depths. Unfortunately replacing the UpdatePanel with something lighter isn't really an option.

I've found a solution to this, and nor is it quite as dirty as I'd feared. I declare a JS variable outside of the function:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Perform postback" />
<script type="text/javascript">
var test;
Sys.Application.add_load(function () {
alert(test);
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
In my code-behind, I assign the JS variable a value in the Sys.Application.add_init method, like so:
protected void Page_PreRender(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(UpdatePanelTest), "startupScripts", "Sys.Application.add_init(function() {test='" + Guid.NewGuid().ToString() + "';});", true);
}
VoilĂ , a different Guid is then displayed on first load and every postback.

Related

ASP.NET UpdatePanel in UserControl doesn't trigger Click event

I have set the following in my ascx file :
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="from_dispo_to_affich" runat="server" OnClick="from_dispo_to_affich_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
My problem is that the OnClick event doesn't trigger.
You want to make a javascript function call right?
Change OnClick to OnClientClick. And put () after your function.
OnClientClick="from_dispo_to_affich_Click()"
Otherwise put this event in your codebehind
protected void from_dispo_to_affich_Click(object sender, EventArgs e)
{
// do something
}

All UpdatePanels on page updating on __doPostBack

I am experiencing off behaviour when trying to update an UpdatePanel via JavaScript when multiple UpdatePanels are on the page.
Will try to keep it short:
I'm already setting the UpdateMode to Conditional
I am passing in the correct ClientID of the UpdatePanel into the __EventTarget
In the code-behind, I am successfully able to find the target control
But for some reason, the OnLoad of every UpdatePanel on the page is fired.
Below is a snippet of code - any idea why this is happening?
Ascx:
<div class="updatePanelWrapper">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" RenderMode="Inline" OnLoad="UpdatePanel1Load"
runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="updatePanelWrapper">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" RenderMode="Inline" OnLoad="UpdatePanel2Load"
runat="server">
<ContentTemplate>
<div>
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
CodeBehind:
protected void UpdatePanel1Load(object sender, EventArgs e)
{
UpdatePanelLoad(sender, e);
}
protected void UpdatePanel2Load(object sender, EventArgs e)
{
UpdatePanelLoad(sender, e);
}
protected void UpdatePanelLoad(object sender, EventArgs e)
{
// if only a async postback then load the control
if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
// Some Logic ...
}
}
JavaScript (where I'm triggering the ASYNC PostBack):
var updatePanelWrappers = $(".updatePanelWrapper");
var availableWrapper = updatePanelWrappers[0];
var updatePanelElement = $(availableWrapper).children()[0];
var updatePanelId = $(updatePanelElement).attr("id");
window.__doPostBack(updatePanelId, "Some Arguments...");
With an UpdatePanel callback the page still goes through most of its lifecycle; which includes all of the Load events.

How to update a control outside of an updatepanel?

I am going to show some text in a TextBox, which is located outside of an updatepanel, after checking a CheckBox but I cannot make it work. please help me out ?
Here is my code:
<asp:UpdatePanel runat="server" ID="uplMaster">
<ContentTemplate>
<asp:CheckBox ID="cbShowText" runat="server" Text="Show Some Text" AutoPostBack="true"
OnCheckedChanged="cbShowText_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="txtBox" Text="Empty" runat="server" />
Code Behind:
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
txtBox.Text = "Some Text";
}
Thanks in advance :D
P.S. As you might have guessed, I have resembled my problem and that is why I don't want to put the TextBox in the UpdatePanel
I put the TextBox in another UpdatePanel and then called the Update method:
Here is my new code:
<asp:UpdatePanel runat="server" ID="uplMaster" UpdateMode="Always">
<ContentTemplate>
<asp:CheckBox ID="cbShowText" runat="server" Text="Show Some Text" AutoPostBack="true"
OnCheckedChanged="cbShowText_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="uplDetail" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtBox" Text="Empty" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
txtBox.Text = "Some Text";
uplDetail.Update();
}
Hope this helps
The textbox has to be in update panel also.
*Edit:
I am sorry I didn't read your question properly. Perhaps write a javascript function, and call the function from codebehind?
I know its been a while since this was asked, but here is what I did. Like #bla said write a javascript function and call it from code behind.
So in your checked changed call this. The changeText is a javascript function on your page in the header or in a script file.
protected void cbShowText_CheckedChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Show Different Text", "changeText();", true);
}
Sample Javascript. Just gets called when checked changed event fires from code behind.
<script type="text/javascript">
function changeText() {
var txt= document.getElementById('<%= txtBox.ClientID %>');
var chk = document.getElementById('<%= cbShowText.ClientID %>');
if (chk.checked === true) {
txt.Text = "Something";
} else {
txt.Text = "Somethingelse";
}
}
</script>
Hope this helps someone.

UpdatePanel wrapped around a user control

I have a user control which contains some buttons and a placeholder. Those buttons cause controls to be added/removed from placeholder. Everything works fine.
Now I want to put this user control in a page, and wrap it in an updatepanel like so:
<asp:UpdatePanel ChildrenAsTriggers="true" ID="UpdatePanelFoo" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<grid:tablegrid ID="tablegrid_chapters" runat="server" SomeProperty="bar" />
</ContentTemplate>
</asp:UpdatePanel>
When I run the page, it's still doing a full postback when I hit one of the buttons inside the user control. What am I doing wrong, and how can I remedy this?
Update:
protected void Page_Init()
{
ScriptManager scr = ScriptManager.GetCurrent(this.Page);
Response.Write("EnablePartialRendering: " + scr.EnablePartialRendering);
}
Outputs "EnablePartialRendering: true"
Make sure you have EnablePartialRendering=true on your ScriptManager in the page.
Update
It looks like your UserControl has no events to be looking for...you have 2 options here. Move the UpdatePanel inside the UserControl .ascx so it can see the button events as children to rig up or add an event for it to see, to do that try something like this:
public event EventHandler Click;
void btn_del_Click(object sender, EventArgs e)
{
if (NumberOfRowControls > 0)
{
var rowToWhack = panel_rows.Controls.Children().Single(x => x.ID == "myrow" + (NumberOfRowControls - 1));
panel_rows.Controls.Remove(rowToWhack);
NumberOfRowControls--;
}
if(Click != null) Click(this, e);
}
void btn_add_Click(object sender, EventArgs e)
{
var row = NewRow(NumberOfRowControls);
panel_rows.Controls.Add(row);
if(Click != null) Click(this, e);
}
And update the UpdatePanel to be looking for it:
<asp:UpdatePanel ID="UpdatePanelFoo" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<grid:tablegrid ID="tablegrid_chapters" runat="server" SomeProperty="bar" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tablegrid_chapters" EventName="Click">
</Triggers>
</asp:UpdatePanel>
Make sure you add a ScriptManager as well to the page, otherwise there's no UpdatePanel functionality.

jQuery's $() function always returns 'undefined' with AJAX

i've noticed that popup shows BEFORE text gets updated in the textbox, i guess js gets called before the page gets rendered ... that would explain the 'undefined' popup ... how do i make sure js gets called AFTER the page is rendered?
rewriting to make it as simple as possible:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtRcaNotes" runat="server" TextMode="MultiLine" Width="800px"></asp:TextBox><br />
<asp:Button ID="btnDoneWithRcs" runat="server" OnClick="btnDoneWithRcs_Click" Text="Action Completed / Update Notes" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(
function(){doStuff();}
);
function doStuff()
{
$(document).ready(function() {
$('txtRcaNotes').hide();
alert($('txtRcaNotes').attr('id'));
});
}
</script>
</body>
Code Behind:
protected void btnDoneWithRcs_Click(object sender, EventArgs e)
{
txtRcaNotes.Text += "asdfadf";
}
TEXTBOX DOESN'T GET HIDDEN, ALERT() RETURNS 'UNDEFINED'
You're just missing your id selector syntax. Try:
$('#<%= txtRcaNotes.ClientID %>').hide();
alert($('#<%= txtRcaNotes.ClientID %>').attr('id'));
Note the addition "#" prepended before each selector.
One thing you could try is using Firebug, or some other DOM inspector and check the actual element IDs that are being generated by ASP.NET before and after your AJAX call and see if they are the same.

Resources