Develop Reference

CheckBoxlist Updating a dropdowlist in UpdatePanel no longer PostBack

I need to Update a Dropdowlist according to the selected value(s) in a CheckBoxList avoiding the page to reload, I am using an UpdatePanel.
The dropdwonlist should always have an AutoPostback, it should always trigger my "SearchEvent"
I used an UpdatePanel and an AsyncPostBackTrigger on my CheckBoxlist to call the function in code behind to refresh the dropdowlist.
It works only one time. After the first call, I cannot trigger the CheckBoxlist SelectedIndexChanged, instead I get the error :
"Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 404"
My dropdownlist also lose the PostBack, nothing happens.
The View ASPX :
<td>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:CheckBoxList ID="IsActiveFilterCheck" runat="server" AutoPostBack="true" AppendDataBoundItems="true" CausesValidation="False">
<asp:ListItem Text="Active" Value="1" />
<asp:ListItem Text="Closed" Value="0" />
</asp:CheckBoxList>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="IsActiveFilterCheck" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<br /><br />
<asp:DropDownList ID="StatusFilterList" runat="server" DataTextField="Name" DataValueField="Id">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
My code behind :
private void Page_Load(object sender, System.EventArgs e)
{
RegisterCallbacks();
if (!IsPostBack)
{
Initialize();
}
}
override protected void OnInit(EventArgs e)
{
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
CheckProfil();
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.SearchButton.ServerClick += new System.EventHandler(this.SearchButton_ServerClick);
this.StatusFilterList.SelectedIndexChanged += new System.EventHandler(this.SearchButton_ServerClick);
this.IsActiveFilterCheck.SelectedIndexChanged += new System.EventHandler(this.IsActiveFilterCheck_Changed);
this.Load += new System.EventHandler(this.Page_Load);
}
protected void IsActiveFilterCheck_Changed(object sender, EventArgs e)
{
// Update the Status Filter List
StatusFilterList.Items.Clear();
if (IsActiveFilterCheck.Items.Cast<ListItem>().Where(li => li.Selected).ToList().Count != 1)
{
BindListInsertAll(StatusFilterList, ExpectedStatusCollection.Instance.GetAll());
}
else
{
IList statusSelected = ExpectedStatusCollection.Instance
.GetAll().Cast<ExpectedStatusDo>()
.Where(exp => IsActiveFilterCheck.SelectedValue == "1" ? exp.Id != 5 && exp.Id != 6 : exp.Id == 5 || exp.Id == 6)
.ToList(); // Only Dead and Signed
// Update the Status
BindListInsertAll(StatusFilterList, statusSelected);
}
UpdatePanel1.Update();
//FindByFilter();
}
When I change the IsActiveFilterCheck checkboxlist I should update only the StatusFilterList as shown in the function IsActiveFilterCheck_Changed, without reloading the full page.
This StatusFilterList should always be able to call/Trigger the event SearchButton_ServerClick
Right now It works only one time when the IsActiveFilterCheck is fired my dropdowlist is updated but after when I click anywhere I get the error and I can't trigger the IsActiveFilterCheck

Take a look to this :
AsyncPostBackTrigger works only the first time
People usually recreates the trigger to work after first time.

Updating CSS of Controls in different files via CodeBehind

I have this AJAX button that I want to update some CSS. The problem is that the controls I want it to update are in a different file and can't be moved out of that file.
This is the panel whose CSS I want to update, which is located in the Site.master file:
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="Panel2" runat="server" updatemode="Always">
<ContentTemplate>
<div id="updateThis" runat="server"><p>Test text</p></div>
</ContentTemplate>
</asp:UpdatePanel>
This is the button, located in the Items.ascx file:
<asp:UpdateProgress runat="server" ID="PageUpdateProgress">
<ProgressTemplate>
<img class="ajax-loader" src="/Images/ajax-loader.gif" alt="Loading..." />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="Panel3" runat="server" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" OnClick="UpdateButton"
OnClientClick="hideButton()" Text="Update"
class="update" ID="UpdateButton" name="UpdateButton"
type="submit" ></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
This is the Items.ascx.cs method that is UpdateButton
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.Controls[0].FindControl("updateThis");
div.Style.Add("color", "#ff0000");
}
When I click the button it doesn't end up working correctly. As of right now, with the AJAX UpdateProgress template, it shows the loading GIF and then the GIF disappears and the text never changes color.
EDIT
Hopefully this will give a better idea of where things might be going wrong:
THIS WORKS
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.FindControl("updateThis");
div.Style.Add("color", "#ff0000");
UpdateButton.Text = "Done!";
}
I had #updateThis in the FindControl() method. Don't be like me!

You should add the runat="server" attribute to the div control, to make it visible in code-behind:
<div id="updateThis" runat="server"><p>Test text</p></div>
You can also remove Controls[0] in the event handler (but it works if you keep it, according to my tests):
protected void UpdateButton(object sender, EventArgs e)
{
var masterPage = this.Page.Master;
var updatePanel = masterPage.FindControl("Panel2");
var div = (HtmlGenericControl)updatePanel.FindControl("updateThis");
div.Style.Add("color", "#ff0000");
}

async button in listview

so basically im in a process of creating my unit project which is an eCommerce website. one of the feature that important is a watch list (ex: watch list in ebay)
now i already finish in designing and succeed in adding/removing db record but what bothers me is that the page is the delay/ page posting back for each item saved/clicked. i tried adding an update panel but there is a still delay when we click the button.
below is my copy of the code
Design
<listview>
<itemTemplate>
......
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkSaved" class="btn-icon btn-white btn-star btn-radius" runat="server" CausesValidation="false" CommandName="ToggleSave">
<span></span>
<asp:Label ID="lblSaved" runat="server" Text="Save Activity" AssociatedControlID="lnkSaved"></asp:Label>
</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkSaved" />
</Triggers>
</asp:UpdatePanel>
.......
</itemtemplate>
</listview>
CodeBehind
protected void ListViewActivities_ItemCommand(object sender, ListViewCommandEventArgs e)
{
HiddenField hdnisSaved = e.Item.FindControl("hdnisSaved") as HiddenField;
HiddenField hdnActivityID = e.Item.FindControl("hdnActivityID") as HiddenField;
LinkButton lnkSaved = e.Item.FindControl("lnkSaved") as LinkButton;
Label lblSaved= e.Item.FindControl("lblSaved") as Label;
Guid userID = new MembershipHelper().GetProviderUserKey(WebSecurity.CurrentUserId);
if (Convert.ToBoolean(hdnisSaved.Value))
{
lnkSaved.Attributes.CssStyle.Clear();
if(Convert.toboolean(hdnisSaved.Value))
{
lnkSaved.Attributes.Add("Class", "btn-icon btn-white btn-radius btn-star");
lblSaved.Text ="Save";
}
else
{
lnkSaved.Attributes.Add("Class", "btn-icon btn-white btn-radius btn-starred");
lblSaved.Text ="Saved";
}
new CustomerDAC().ToggleSave(userID, Convert.ToInt32(hdnActivityID.Value,hdnisSaved.Value));
}
}
could you guys give me a direction, what should i do so a user will have a smooth experience(async prefered) when clicking this button.

You probably want to perform the action on the client side (browser side) in javascript/jquery and then sync the changes in the background, so that the user's perception is immediate but the slow part (http roundtrip to the server and persisting the data to DB) happens in the "background".

image button doesn't work correctly in datalist

i have an image button in datalist to open a new page to send mail, but when i click on it for the first time , it doesn't work , it works when click for the second time , i use update panel inside datalist . here's the code
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="ImgBtnMail" runat="server" ImageUrl="../../../../Icons/Send-Email.jpg"
Width="22" Height="18" CommandName="DoMail"
CommandArgument='<%#DataBinder.Eval(((System.Web.UI.WebControls.DataListItem)(Container)).DataItem, "AdID")%>' />
</ContentTemplate>
</asp:UpdatePanel>
and the code behind :
protected void DLAds_ItemCommand(object source, DataListCommandEventArgs e)
{
if(e.CommandName=="DoMail")
{
string TargetPage = "window.open('SendMail.aspx?',null,'height=150, width=150,left=500 ,top=300 ,status= no, resizable= no, scrollbars=no, toolbar=no,location=no,menubar=no ');";
ImageButton MailBtn = (ImageButton)e.Item.FindControl("ImgBtnMail");
MailBtn.Attributes.Add("onclick", TargetPage);
}
}

With the example code you've posted, you'd be better off assigning the OnCommand event handler directly to the button.
<asp:ImageButton ID="ImageButton1" runat="server" OnCommand="ImageButton1_Command" ...>
And in your code:
protected void ImageButton1_Command(object sender, EventArgs e)
{
string targetPage = "..."
((ImageButton)sender).Attributes.Add("onclick", targetPage);
}

Set UpdateMode="Conditional" in the UpdatePanel and Update your UpdatePanel in the CodeBehind like below:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
protected void ImageButton1_Command(object sender, EventArgs e)
{
up1.Update();
string targetPage = "..."
((ImageButton)sender).Attributes.Add("onclick", targetPage);
}

Firing an event from an ascx control in order to update some controls in the container

I am firing an event from an ascx control in order to update some controls in the container to which the ascx control belongs.
The ascx control is displayed via a modal popup extender. When I click a button inside the ascx, I fire an event to which the container containing the ascx control is subscribes.
The event delegate is fired and the expected logic is run in the container's code behind, the problem is that any changes made to controls inside not the container aren't updated despite the event logic having been processed. The expected changes are not reflected on the page when the results of the postback is rendered.
Are there any pitfalls I should know of?
The markup for the container
<asp:Panel ID="panelTreeViewAttributesTitle" runat="server">
<asp:Label ID="someLabel" runat="server" Text="Hello Governor" />
<asp:LinkButton ID="LinkButtonEdit" runat="server" Text="(Edit)" />
<ajax:ModalPopupExtender BackgroundCssClass="modalBackground" Enabled="True"
ID="btnEdit_ModalPopupExtender" PopupControlID="modalPanel" runat="server"
TargetControlID="LinkButtonEdit" />
</asp:Panel>
<asp:Panel ID="modalPanel" runat="server" CssClass="modalPopUp" Style="display: none">
<xxx:customControl runat="server" ID="myCustomControl" />
</asp:Panel>
The code behind for the container
protected void Page_Load(object sender, EventArgs e)
{
myCustomControl.Updated += eventCaptured;
if (IsPostBack) return;
...
}
void eventCaptured(object sender, EventArgs e)
{
someLabel.Text = "Goodbye Governor";
}
The custom control
<script type="text/javascript">
function Update() {
var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
if (ajaxManager != null)
ajaxManager.ajaxRequest("");
}
</script>
<asp:Panel ID="panelEditPanel" runat="server">
<asp:Label ID="lblCMA" runat="server" Text="Call me Arnooold." />
</asp:Panel>
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClientClick="Update()" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
The custom control's code behind
public event EventHandler Updated;
protected void AjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
//Some DB backend logic
UpdateFinished();
}
private void UpdateFinished()
{
if (Updated == null) return;
Updated(this, null);
}

Maybe the button click is causing a partial post back instead of a normal, full-page post back. If this is the case, the entire life cycle would run on the server side (including your event handler) but only part of the HTML would be updated on the client side when the response comes back to the browser. "someLabel" could be outside the region that gets updated on the client side.