update panel not working - asp.net

i am having two list box which perform add remove item functionality which are controlled by four buttons and o each button click there happen to be post back but i don't want it to be flicker for which i am using update panel like this but it still made post back wats wrong with this explain me this
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
</ContentTemplate>
</asp:UpdatePanel>

I wrote a quick example that does work. You do not need your buttons in the UpdatePanel. You only need the ListBox since they are the only controls being refresh. Setup the Trigger for the UpdatePanel will cause the refreshes to occur without the 'flicker'.
aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonRemove" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonAddAll" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonRemoveAll" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
cs (codebehind) code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ListBox1.Items.Add(new ListItem("Test1", "1"));
ListBox1.Items.Add(new ListItem("Test2", "2"));
ListBox1.Items.Add(new ListItem("Test3", "3"));
ListBox1.Items.Add(new ListItem("Test4", "4"));
ListBox1.Items.Add(new ListItem("Test5", "5"));
}
}
protected void ButtonRemove_Click(object sender, EventArgs e)
{
if (ListBox2.SelectedItem != null)
{
ListBox1.Items.Add(ListBox2.SelectedItem);
ListBox2.Items.RemoveAt(ListBox2.SelectedIndex);
ListBox2.ClearSelection();
ListBox1.ClearSelection();
}
}
protected void ButtonAdd_Click(object sender, EventArgs e)
{
if (ListBox1.SelectedItem != null)
{
ListBox2.Items.Add(ListBox1.SelectedItem);
ListBox1.Items.RemoveAt(ListBox1.SelectedIndex);
ListBox1.ClearSelection();
ListBox2.ClearSelection();
}
}
I have tested this and it does work. I only implemented 2 of the Buttons to present a complete example.

Add the asp:ListBox to the ContentTemplate of your asp:UpdatePanel, or add a new asp:UpdatePanel and add it to its ContentTemplate. The control won't be updated using an asynchronous postback if it's not placed within an asp:UpdatePanel.
With the following code snippets the newly added listBox will be updated with new content using an asynchronous postback:
Page.aspx:
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px" /><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonAddAll" runat="server" Text=">>>" OnClick="ButtonAddAll_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text="<<<" OnClick="ButtonRemoveAll_Click"
Width="50px" />
<asp:ListBox runat="server" ID="listBox"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
Sample event handler in the code-behind file, Page.aspx.cs:
protected void ButtonAddAll_Click(object sender, EventArgs e)
{
listBox.DataSource = new List<string>() { "Test" };
listBox.DataBind();
}

<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px" /><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonAddAll" runat="server" Text=">>>" OnClick="ButtonAddAll_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text="<<<" OnClick="ButtonRemoveAll_Click"
Width="50px" />
<asp:ListBox runat="server" ID="listBox"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>

Related

opening modalpopup with gridview delete

I am trying to open a modal popup window when user clicks on the delete image button. when I click on the delete image button, I want the user to go to grdShoppingCart_RowDeleting when Ok is clicked. I am not sure what I am doing wrong. Below is my gridview code:
<asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting" >
<Columns>
<!-- other clumns here-->
<asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" AlternateText="Click To delete" CommandName="Delete"/>
<asp:Panel ID="pnlPopUp" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Are you sure you want to delete this item?</p>
</div>
</asp:Panel>
<div>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Yes" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="imgbtnDelete"
PopupControlID="pnlPopUp"
BackgroundCssClass="modalBackground"
CancelControlID="CancelButton"
DropShadow="true"
PopupDragHandleControlID="pnlDragPopUp" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int cartId = (int)grdShoppingCart.DataKeys[e.RowIndex]["CartID"];
ShoppingCartData scd = new ShoppingCartData();
scd.DeleteShoppingCartData(cartId);
}
These are the changes that I did to fix the code. I passed the CartID to the code behind
<div >
<p style="display:flex;align-items:center;justify-content:space-between;width:220px;">
<asp:Button ID="OkButton" runat="server" Text="Remove" CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
and these are the changes I did in code behind:
protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
// Get current grid view row
GridViewRow row = grdShoppingCart.Rows[e.RowIndex];
// Get command argument from button, also you could use another approach to get parameters
Button btn = (Button)row.FindControl("OkButton");
int cartId = Convert.ToInt32(btn.CommandArgument);
label1.Text = "The row is going to be deleted: " + cartId;
}
that did the trick.

Asp.net UpdateProgressBar Control Not Displaying data dynamically

I have a aspx is like shown below
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:UpdatePanel runat="server" ID="panel">
<ContentTemplate>
<asp:Button runat="server" id="bt" text="partial postback" OnClick="E" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" text="full postback" OnClick="J" />
<asp:UpdateProgress runat="server" ID="progress" DynamicLayout="true" AssociatedUpdatePanelID="panel">
<ProgressTemplate>
<div class="divWaiting">
<asp:Label ID="lbl" runat="server" Text="OK" />
<asp:Image ID="imgWait" runat="server" ImageAlign="Middle" ImageUrl="images/indicator.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
On Code Behind I have a function to update my label after making the thread sleep for 3 seconds
public void E(Object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label lbl = (Label)progress.FindControl("lbl");
if (lbl.ToString()!= null)
{
lbl.Text = "SomeThing";
}
update = true;
}

Asp.net custom ajax file uploader

I develop custom file uploader.
<asp:FileUpload runat="server" ID="fuUpload" />
<asp:UpdatePanel runat="server" >
<ContentTemplate>
<asp:Button ID="btnUpload" runat="server" Text="Upload" CausesValidation="false"
OnClick="btnUpload_Click" />
<div>
<asp:Label ID="lblError" runat="server" Visible="false" ForeColor="Red" /></div>
<asp:Repeater ID="rptAttachments" runat="server" OnItemCommand="Uploader_ItemCommand">
<ItemTemplate>
<div>
<a href='<%#GetUrl(....) %>'><%#Eval("Filename") %></a> <b>
<asp:LinkButton ID="lnkDelete" runat="server" Text="Удалить" CommandName="DeleteAttachment" CommandArgument='<%#Eval("FileName") %>' /></b>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="rptAttachments" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
protected void btnUpload_Click(object sender, EventArgs e)
{
//fuUpload.HasFile == false
if (fuUpload.HasFile && fuUpload.PostedFile != null
&& fuUpload.PostedFile.ContentLength > 0)
{
}
}
I wonder why fuUpload.HasFile always equls null.
Try these things.
Put <asp:FileUpload runat="server" ID="fuUpload" /> inside UpdatePanel
Set btnUpload trigger like this. <asp:PostBackTrigger ControlID="btnUpload" />

confused about update panel

In my form I have a label and button control.
By default the label is visible. When a user clicks on the button I have made the label to visible false.
For simple button it is working, but when I add an updatePanel to button the event is getting fired but the label is not getting to visible false. Just try this, and please can anybody tell me why this is happening and the solution for this.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:fileupload ID="Fileupload1" runat="server"></asp:fileupload>
<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
<asp:UpdatePanel ID="up" runat ="server" >
<ContentTemplate >
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("hello");
Label1.Visible = false;
}
From the looks of it you need to wrap your label within the update panel as well.
Try
<asp:fileupload ID="Fileupload1" runat="server"></asp:fileupload>
<asp:UpdatePanel ID="up" runat ="server" >
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
An update panel will update a section of your page. Your label wasn't included within the updatepanel so would never get updated with your new value.
I suggest that you only wrap the label with the UpdatePanel and set the UpdateMode to "Conditional".
<asp:UpdatePanel ID="up" runat ="server" UpdateMode="Coditional" >
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
Regards.

Losing Button.Click events after first partial postback in UpdatePanel

I have a Page that has a single instance of a UserControl that itself has a single UpdatePanel. Inside the UpdatePanel are several Button controls. The Click event for these controls are wired up in the code-behind, in the Init event of the UserControl.
I get the Click event for the first button I push, every time, no problem. After that, I only get Click events for one button (SearchButton) - the rest are ignored. I have included the code for the control below - for sake of brevity, I have excluded the click event handler methods, but they are all of the standard "void Button_Click(object sender, EventArgs e)" variety. Any ideas?
<asp:UpdatePanel ID="PickerUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Container" runat="server">
<div>
<asp:TextBox ID="PickerResults" runat="server" style="margin-right: 3px;" SkinID="Plain" />
<asp:Image
ID="LaunchPopup" runat="server" ImageUrl="~/images/icons/user_manage.png"
ImageAlign="Top" BorderColor="#294254" BorderStyle="Dotted" BorderWidth="1px"
Height="20px" Width="20px" style="cursor: pointer;" />
</div>
<asp:Panel ID="PickerPanel" runat="server" DefaultButton="OKButton" CssClass="popupDialog" style="height: 227px; width: 400px; padding: 5px; display: none;">
<asp:Panel runat="server" id="ContactPickerSearchParams" style="margin-bottom: 3px;" DefaultButton="SearchButton">
Search: <asp:TextBox ID="SearchTerms" runat="server" style="margin-right: 3px;" Width="266px" SkinID="Plain" />
<asp:Button ID="SearchButton" runat="server" Text="Go" Width="60px" SkinID="Plain" />
</asp:Panel>
<asp:ListBox ID="SearchResults" runat="server" Height="150px" Width="100%" SelectionMode="Multiple" style="margin-bottom: 3px;" />
<asp:Button ID="AddButton" runat="server" Text="Add >>" style="margin-right: 3px;" Width="60px" SkinID="Plain" />
<asp:TextBox ID="ChosenPeople" runat="server" Width="325px" SkinID="Plain" />
<div style="float: left;">
<asp:Button ID="AddNewContact" runat="server" SkinID="Plain" Width="150px" Text="New Contact" />
</div>
<div style="text-align: right;">
<asp:Button ID="OKButton" runat="server" Text="Ok" SkinID="Plain" Width="100px" />
</div>
<input id="SelectedContacts" runat="server" visible="false" />
</asp:Panel>
<ajax:PopupControlExtender ID="PickerPopEx" runat="server" PopupControlID="PickerPanel" TargetControlID="LaunchPopup" Position="Bottom" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AddNewContact" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
public partial class ContactPicker : System.Web.UI.UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
SearchButton.Click += new EventHandler(SearchButton_Click);
AddButton.Click += new EventHandler(AddButton_Click);
OKButton.Click += new EventHandler(OKButton_Click);
}
// Other code left out
}
It seems that adding UseSubmitBehavior="false" to the button definitions has solved my problem. Still don't know why that first button click worked at all.
The most likely reason for this would be the client IDs that .Net generates for its controls changing. These are dynamically assigned and could change between postbacks / partial postbacks.
If controls are being added to the panel dynamically, the ID of your button could be different between postbacks causing .Net to be unable to tie the click event to the correct event handler in your code.
In my case, i had a LinkButton within a dgPatients_ItemDataBound event handler that used the PostBackUrl property.
The moment i changed the LinkButton to a HyperLink, the problem went away.

Resources