Develop Reference

Update UI controls outside the updatepanel in asp.net

I'm trying to update controls outisde the update panel with the ref. of below link . but its not working. i want to know what i'm missing.in my application can't use these labels inside the update panel.
http://msdn.microsoft.com/en-us/library/bb301423(v=vs.110).aspx
HTML
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Updatepaneltest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadingHandler);
function PageLoadingHandler(sender, args) {
var dataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = dataItems['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = dataItems['Label2'];
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
UpdatePanel content.
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</div>
</asp:Content>
code behind
protected void Page_Load(object sender, EventArgs e)
{
// ScriptManager ScriptManager1 = ScriptManager.GetCurrent(this.Page);
if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
}

Control updates inside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Control updates outside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
Later, write below lines in client side.
var pageInstance = Sys.WebForms.PageRequestManager.getInstance();
pageInstance.add_pageLoaded(UpdateLabelHandler);
function UpdateLabelHandler(sender, args)
{
var ControldataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = ControldataItems ['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = ControldataItems ['Label2'];
}
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
Hope this may help you.

AsyncPostBackTimeout not updating data in updatepanel

I wanted to update data inside update panel without postback.
I made following code on aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="30">
</asp:ScriptManager>
<asp:UpdatePanel ID="upPanel" runat="server">
<ContentTemplate>
<asp:Label ID="lblCount" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
for updating the label on every half a minute, i written following code on pageload:
protected void Page_Load(object sender, EventArgs e)
{
lblCount.Text = DateTime.Now.ToShortTimeString();
}
But its not updating the label even though i given
AsyncPostBackTimeout="30"
in script manager.
Is anything i am mistaking??
I want to update label inside the updatepanel without postback on certain time interval.
Edit:
<asp:UpdatePanel ID="upPanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblCount" runat="server"></asp:Label>
</ContentTemplate>.
</asp:UpdatePanel>

To update your your page every 30 seconds you can use a timer:
<head runat="server">
<title></title>
<script runat="server" type="text/c#">
protected void Timer1_Tick(object sender, EventArgs e)
{
lblCount.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="30">
</asp:ScriptManager>
<asp:Timer runat="server" id="Timer1" Interval="30000" OnTick="Timer1_Tick"></asp:Timer>
<asp:UpdatePanel ID="upPanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblCount" runat="server" Text="Page not refreshed yet."></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
As #Nipun Ambastha suggested add the AsyncPostBackTrigger trigger.
Without AsyncPostBackTrigger, the timer has to be placed inside the UpdatePanel:
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
}
<form id="form2" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager2">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" ID="Timer2" Interval="30000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." ID="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" ID="Label3"></asp:Label>
</form>

You are actually not using Async Trigger, for updating a panel you will need to declare Async Trigger.
Please check this url
http://msdn.microsoft.com/en-us/library/system.web.ui.asyncpostbacktrigger(v=vs.110).aspx
More Detailed
http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

ajaxToolkit:TabContainer confirm when adding tab

I want my ajaxToolkit:TabContainer to have a tabpanel that allows the user to add another tab. I only want it to postback when they have clicked the "+" tabpanel and no other.
I can't seem to stop the event bubbling in the Javascript:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function checkTab(sender, e) {
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") {
cancelBubble(e);
}
else {
if (!confirm('Are you sure?')) {
cancelBubble(e);
}
}
}
function cancelBubble(e) {
if (e) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" OnActiveTabChanged="MyTabContainer_OnActiveTabChanged"
AutoPostBack="true" OnClientActiveTabChanged="checkTab">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void MyTabContainer_OnActiveTabChanged(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
Thanks,
Alex

You can use return false; in JavaScript to stop a PostBack. So I think all you need is this:
function checkTab(sender, e)
{
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+")
{
return false;
}
else
{
return confirm('Are you sure?');
}
}

Add script below to your project and add reference on at at very bottom of page:
Sys.Extended.UI.TabPanel.prototype.raiseClick = function (eventArgs) {
var eh = this.get_events().getHandler("click");
if (eh) {
eh(this, eventArgs);
}
};
Sys.Extended.UI.TabPanel.prototype._header_onclick = function (e) {
e.preventDefault();
var eventArgs = new Sys.CancelEventArgs();
this.raiseClick(eventArgs);
if (eventArgs.get_cancel() === true)
return;
this.get_owner().set_activeTab(this);
this._setFocus(this);
};
Now we add capability to cancel click on particular tab on client. The sample of usage:
<script type="text/javascript">
function AddTabOnClientClick(sender, args) {
args.set_cancel(!confirm("Are you sure?"));
}
</script>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" AutoPostBack="true"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" OnClientClick="AddTabOnClientClick">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script src="Scripts/MyAjaxToolkitExtensions.js" type="text/javascript"></script>

Thanks to jadarnel27, this is the final solution I went for:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
<script type="text/javascript">
function addTab() {
if (confirm('Are you sure?')) {
document.getElementById('<%=AddTabButton.ClientID %>').click();
}
}
</script>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:Button ID = "AddTabButton" runat="server" OnClick="AddTabButton_OnClick" CssClass="DisplayNone" />
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true" OnClientClick="addTab">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void AddTabButton_OnClick(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}

How to get selected dropdownvalue in AjaxFileUpload onuploadComplete event?

<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test"%>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="height: 162px">
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="MCA" runat="server" Text="MCA" AutoPostBack="True"
oncheckedchanged="MCA_CheckedChanged" />
<br />
</div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Value="Sem1"></asp:ListItem>
<asp:ListItem Value="Sem2"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"
onselectedindexchanged="DropDownList2_SelectedIndexChanged"
ViewStateMode="Enabled">
<asp:ListItem Value="MCA101"></asp:ListItem>
<asp:ListItem Value="MCA103">MCA103</asp:ListItem>
</asp:DropDownList>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
OnUploadComplete="upload"/>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Event Code..
protected void upload(Object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string s = DropDownList1.SelectedValue;
string t = DropDownList2.SelectedValue;
string path= string path = Server.MapPath("~/MCA/" + s + "/" +t+ "/")+e.FileName
}
//Both s and t get the first value of Dropdownlist even if some other value selected and that's uploading is not done as per directort structure.
Both Dropdownlist have several values and postback property is true for both the list.
How to get the exact selected value of list ?

Issue is Request.Form["__VIEWSTATE"] = null when AjaxFileUpload OnUploadComplete event is called.
Fix for this issue (C# Code):
Set dropdown selection in session at page load.
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Form["__VIEWSTATE"] != null)
Session["Path"] = "//" + DropDownList1.SelectedValue + "//" + DropDownList2.SelectedValue + "//";
}
Use session value for the creation of filepath:
protected void upload(Object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string path = string.Empty;
if (Session["Path"] != null)
path = Server.MapPath("~//MCA" + (string)Session["Path"]) + e.FileName;
}

I believe you will need to add the drop down lists to the same update panel as the upload control.

Calling C# getter from UpdatePanel / javascript - never get updated data

I have this property in my code-behind.
public string LocationOptions
{
get { return Session["LocationOptions"].ToString(); }
set { Session["LocationOptions"] = value; }
}
On the front-end, I have this javascript.
<script type="text/javascript">
function pageLoad(sender, args) {
InitLocationsAutoComplete();
}
</script>
<asp:UpdatePanel ID="upScript" runat="server">
<ContentTemplate>
<script type="text/javascript">
function InitLocationsAutoComplete() {
var locationsJson = '<%= LocationOptions %>';
alert(locationsJson);
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
I'm setting a breakpoint on my getter and setter in the C# code.
I'm using MVP and the setter gets called from a presenter.
On first page load, things work as expected. The breakpoint on the setter gets hit first. Then the breakpoint on the getter. Finally, I get a javascript alert with the value I expect to see.
I'm running into problems on partial postbacks that are triggered by other update panels. On those, my setter breakpoint hits with a new value. My getter breakpoint gets hit next, and if I quick watch Session["LocationOptions"] I see the new value there. But when I get the javascript alert, it still alerts the initial value from the first page load.
If it still calls the property in C#, then I don't see why the updated value doesn't come through to the javascript. Why am I stuck with the initial value from first page load?

As far as I know, javascript in the partially updated content is not re-executed/re-evaluated. My understanding is that the partial update will essentially edit the DOM to update a part of the page, but this does not allow one to dynamically upate javascript on the page. You can use ScriptManager.RegisterClientScriptBlock on the server-side to register your updated javascript during the partial postback.

I've had the same issue in the past.
The issue is due to the fact that the dom is only partially updated, i've personally corrected this by registering the script in the ScriptManager.
An example of this is here: ScriptManager.RegisterClientScriptBlock Method (Control, Type, String, String, Boolean)
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_PreRender(object sender, EventArgs e)
{
string script = #"
function ToggleItem(id)
{
var elem = $get('div'+id);
if (elem)
{
if (elem.style.display != 'block')
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
";
ScriptManager.RegisterClientScriptBlock(
this,
typeof(Page),
"ToggleScript",
script,
true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ScriptManager RegisterClientScriptInclude</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
<br />
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true"
runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:XmlDataSource ID="XmlDataSource1"
DataFile="~/App_Data/Contacts.xml"
XPath="Contacts/Contact"
runat="server"/>
<asp:DataList ID="DataList1" DataSourceID="XmlDataSource1"
BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" CellPadding="3" GridLines="Horizontal"
runat="server">
<ItemTemplate>
<div style="font-size:larger; font-weight:bold; cursor:pointer;"
onclick='ToggleItem(<%# Eval("ID") %>);'>
<span><%# Eval("Name") %></span>
</div>
<div id='div<%# Eval("ID") %>'
style="display: block; visibility: visible;">
<span><%# Eval("Company") %></span>
<br />
<a href='<%# Eval("URL") %>'
target="_blank"
title='<%# Eval("Name", "Link to the {0} Web site") %>'>
<%# Eval("URL") %></a>
</asp:LinkButton>
<hr />
</div>
</ItemTemplate>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingItemStyle BackColor="#F7F7F7" />
<ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
i hope this helps.