Develop Reference

Add Items To ListBox In UpdatePanel

I have a Listbox that exists in an UpdatePanel on an ASP.NET webform. Also inside the UpdatePanel, exists a Button that adds a bunch of ListItem's to the Listbox, this PostBackTrigger as shown below:
<asp:UpdatePanel ID="updSection6" runat="server">
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnEditSectionStory6" />
</Triggers>
</asp:UpdatePanel>
I add items in the click event:
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
.....hundreds of other items
}
The items are added to the ListBox, however it is after the entire btnRunScan_Click method is run, rather than adding them as each event occurs (So the user can receive messages as the actions occur). Am I missing an attribute or something on the UpdatePanel?
TIA

To Add Items without refreshing page or prevent from calling the cyclic events use following code and eliminate postBackTrigger inside the Trigger.Use following code that is tested working for me.Also use the scriptManager to prevent from exception over to use the updatePanel
.aspx design file
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updSection6" runat="server">
<Triggers>
</Triggers>
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
.cs file
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
}
As other also mention you can also use jquery with ajax to code over the client side to do this one.

ASP.NET UpdatePanel dosn't work with Response.Write in Page_Load

I have that example:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
 
protected void Page_Load(object sender, EventArgs e)
{
// doesn work with:
Response.Write("eg.");
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " + DateTime.Now.ToString();
}
This works fine. When I click in the Button the Label updates without refreshing the page, but if I have Response.Write in the Page_Load event, when I click the button the UpdatePanel doesn't work, and I need the Page_Load.
How I can solve my problem? Thanks.

Don't use Response.Write() in your Page_Load function, as it will break the UpdatePanel.
In fact, using Response.Write() is often a bad idea, because you don't control where in the DOM the written content will end up. Instead, if you need some simple debug output, then use other means such as System.Diagnostics.Debug.WriteLine(). Or if you need to add something to the DOM, add a control such as Label and manipulate that.

How to set UpdatePanel to automatically update while registering AsyncPostBackTrigger programmatically?

I have a Button which will trigger an UpdatePanel, but it is in a different container so if I put my code like below :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearchFilter" />
</Triggers>
</asp:UpdatePanel>
There will be a runtime server error : "A control with ID 'btnSearchFilter' could not be found for the trigger in UpdatePanel 'uptxtQuickSearch'."
So I've to register it on the Page_load event with ScriptManager :
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
scriptManager.RegisterAsyncPostBackControl(btnSearchFilter);
but in this case, I still have to update the UpdatePanel manually by using Update() method on the end of btnSearchFilter_click event.
Is there any way to update the panel automatically while registering the trigger on the code-behind?

I've found a solution for this issue. It turns out that you don't really need to register the control using RegisterAsyncPostBackControl method.
you just need to add the trigger on Page_Init event and use the control.UniqueID if the control cannot be found on the runtime.
So the aspx will be like this :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
and in code-behind :
protected void Page_Init(object sender, EventArgs e)
{
uptxtQuickSearch.Triggers.Add(new AsyncPostBackTrigger() { ControlID = btnSearchFilter.UniqueID });
}

Textbox does not clear in firefox

txtName is the first control in the page. When the page loads initially, it is empty. If there is text in the textbox and the user clicks on Refresh, it is not clearing the text.
At debug, i can see the textbox being cleared, but on page it isnt!!!!.
This happens in Firefox. Works fine in IE.
I have tried , Keeping the textbox outside the updatepanel, enveloping another updatepanel for this textbox alone, Enabling the viewstate, and also removing the clientidmode property.
ASPX:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBack ControlID="txtName" EventName="TextChanged"/>
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtName" runat="server" OnTextChanged="txtName_TextChanged"
EnableviewState="false" ClientIDMode="Static">
</asp:TextBox>
//Some other controls
</ContentTemplate>
</asp:UpdatePanel>
C#:
protected void page_load()
{
if(!IsPostBack)
{
txtName.Text="";
UpdatePanel1.Update();
}
}

protected void page_load()
{
if(!IsPostBack)
{
UpdatePanel1.Update();
}
txtName.Text="";
}
Try this way

Please add txtName.Text=""; outside if condition. Try like this.
protected void page_load()
{
txtName.Text="";
if(!IsPostBack)
{
UpdatePanel1.Update();
}
}

An alternative solution is to set autocomplete=off on your textbox, which will work on FF.
If you do need autocompletion, you can wrap your code into a form. and reset it in the onLoad event
<form id="autoclearform">
//your textboxes
</form>
Now either add onload="autoclearForm.reset();" to your body or do it via javascript.
$(document).ready(function() {
autoclearForm.reset();
});

change masterpage image src from page in update panel C#

I have a master page that contains an image as follow:
<asp:Image ID="imgCompanyLogo" runat="server" ImageUrl="image path" />
and in a child page I want to edit the property ImageUrl as follow:
Image imgCompanyLogo = (Image)Page.Master.FindControl("imgCompanyLogo");
imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");
and it doesn't give me an exception, but it doesn't change anything.
Note: I have an UpdatePanel in the child page.

Since the image is sitting outside of the UpdatePanel, server side changes will not be executed on the image after a partial postback. Your only option is to inject JavaScript into the page and change the image URL.
Use the ScriptManager.RegisterStartupScript Method to inject JavaScript after the partial postback.
Something like the following will work for you:
C#
protected void btnPostback_Click(object sender, EventArgs e)
{
imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");
ScriptManager.RegisterStartupScript(btnPostback,this.GetType(), "myScript", "ChangeImage('" + ImageUrl + "');",false);
}
JavaScript
function ChangeImage(imgURL) {
//make sure the ID of the image is set correctly
document.getElementById('imgCompanyLogo').src = imgURL;
}

Wrap image by UpdatePanel with UpdateMode="Always"
Master Page:
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Image runat="server" ID="Image1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
public void SetImageUrl(string url)
{
Image1.ImageUrl = url;
}
Child Page:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button Text="Click Me" runat="server" OnClick="UpdateImage" />
</ContentTemplate>
</asp:UpdatePanel>
protected void UpdateImage(object sender, EventArgs e)
{
((Main)Master).SetImageUrl("~/Images/0306d95.jpg");
}
The code above works well for me.

Have a look at Sys.WebForms.PageRequestManager Class. Define handler in javascript and may change the image source.

If your code is being run after an async postback (per your UpdatePanel) then changes to anything outside the UpdatePanel will not be rendered. Content in the master page would definitely seem to qualify.
If this is what you're trying to do, this model won't really work. You will need to use some client script to effect changes to already-rendered content when working with this model.
An UpdatePanel is a construct to identify an area that's updated through ajax. The page is not actually reloaded. So an postback can never change content that's outside of the UpdatePanel (or control bound to that panel) that sourced it.
Here's a basic implementation (using jQuery). Add a hidden field to pass the new source to the client. This must be inside the UpdatePanel. Change this value from the server when you want the image to update with new_image_src.Value=ResolveUrl(...);
<asp:HiddenField ClientIdMode="Static" runat="server" id="new_image_src"
value="" EnableViewState="false">
Give your image a static id too to make life easier:
<asp:Image ClientIdMode="Static" runat="server" id="dynamic_image" ImageUrl="..." >
Add javascript to the page (should NOT be in the UpdatePanel):
function updateImage() {
var new_src=$('#new_image_src');
if (new_src) {
$('#dynamic_image').attr('src',new_src);
/// erase it - so it won't try to update on subsequent refreshes
new_src.val('');
}
}
$(document).ready(function() {
/// adds an event handler after page is refreshed from asp.net
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(updateImage);
});
This wouldn't be difficult to do without jquery either but seems more common than not these days.