I need to keep the button in usercontrol (.ascx) file. and i have given the AsyncPostBackTrigger controlid for the same button. but its showing "ERROR" like could not be found for the trigger in UpdatePanel. could any one help me?
this i have give controlid
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlYourAccount" runat="server" Style="display: none; height: 100%;
margin-left: 330px; margin-top: -230px;">
here is my design
</asp:Panel>
</<ContentTemplate>
</asp:UpdatePanel>
`
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
`
this Linkbutton i have kept in user control(for Top menu). while click on the menu the content should get update
<asp:LinkButton class="anchorstyle" ID="btn1" runat="server" Text="MenuName" />
in aspx page
<asp:LinkButton class="anchorstyle" ID="btn1" runat="server" Text="MenuName" OnClick="btn1_Click" />
in aspx.cs page add this event
protected void btn1_Click(object sender, EventArgs e)
{
//write your code here
}
then its working properly.
Related
When I try to execute a second xmlhttprequest in UpdatePanel on sharepoint 2013 in firefox before the first one is finished, I get whole page refresh.
First request status is Aborted.
Second request response is:
1|#||4|97|pageRedirect||%2f_login%2fdefault.aspx%3fReturnUrl%3d%252fsites%252ftest%252fPages%252fUpdatePanelTest.aspx|
This error can be reproduced with the attached code (clicking the button twice quickly produces the error).
This problem occurs only if I place Web Part with this control on Publishing page on Sharepoint 2013.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TestUpdatePanel.ascx.cs"
Inherits="Example.TestUpdatePanel" %><asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:CheckBoxList runat="server" ID="CheckboxList1" AutoPostBack="true">
<asp:ListItem Text="CheckBox1" Value="valueFromCheckBox1" />
<asp:ListItem Text="CheckBox2" Value="valueFromCheckBox2" />
<asp:ListItem Text="CheckBox3" Value="valueFromCheckBox3" />
<asp:ListItem Text="CheckBox4" Value="valueFromCheckBox4" />
<asp:ListItem Text="CheckBox5" Value="valueFromCheckBox5" />
</asp:CheckBoxList>
</ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CheckboxList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
<br />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</ContentTemplate></asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
CheckboxList1.SelectedIndexChanged += CheckboxList1_SelectedIndexChanged;
}
private void CheckboxList1_SelectedIndexChanged(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label3.Text = CheckboxList1.SelectedValue;
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = "Button1_Click";
}
protected void Button2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label2.Text = "Button2_Click";
}
Do you intentionally want to allow the user to submit a postback request while there is already a request going on? If this is unintentional, you may want to consider disabling user controls while a server sided method is running. This can be accomplished with the UpdateProgress control. The idea is that you can use this control to pop up a div that covers the entire application while a post back is occurring. It can be used like this:
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" >
<ProgressTemplate >
<div id="wait" style="width:100%; height:100%;
position:absolute; top:0; left:0; z-index:1000;background-color: #666699;
filter: alpha(opacity=80); text-align:center; vertical-align:middle;">
<div style="border:5px solid black; width:200px; height:50px;
background- color:White; top:50%; position:absolute;">
Saving changes. Please wait...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
By default the updatepanels won't work in SP 2013. You have to follow the below article where there is a fix:
http://msdn.microsoft.com/en-us/library/bb861877.aspx
I am using modal dialog of jQuery UI with my ASP.Net application.
The page contains UpdatePanel component for asynchronous postbacks.
aspx code
<script>
function ShowDialog() {
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('open');
}
function CloseDialog(){
$('#modal).dialog('close');
}
</script>
<asp:UpdatePanel ID="updatepanel" runat="server" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Repeater ID="repEducationHistory" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Literal ID="litField1" runat="server">
</asp:Literal>
</td>
<td><asp:Literal ID="litField1" runat="server">
</asp:Literal>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:LinkButton ID="btnAdd" runat="server" Text="Add new"
OnClick="BtnAdd_Click" />
<div id="modal" title="Add item" style="display:none;">
<div>
<label>Educational institution:</label>
<asp:TextBox ID="tbField1" runat="server"/>
<br />
<label>Country:</label>
<asp:DropDownList ID="tbField2" runat="server"
DataValueField="Id" DataTextField="Name" />
<br />
<asp:LinkButton ID="btnSave" runat="server"
Text="Save" OnClick="BtnSave_Click"></asp:LinkButton>
</div>
</div>
<asp:LinkButton ID="btnSave" runat="server" CausesValidation="true"
ValidationGroup="vgMpt" Text="Save" OnClick="BtnSaveUsrEdu_Click">
</asp:LinkButton>
cs code
protected void BtnAdd_Click(object sender, EventArgs e)
{
tbField1.Text=string.Empty;
ddlField2.SelectedIndex=0;
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "ShowDialog();", true);
}
protected void BtnSaveUsrEdu_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "CloseDialog();", true);
}
When button Add is clicked the codebehind prepares controls on dialog (putting there values or removing them, it depends on the fact if dialog is used to add item or to edit it) and then sends script to create and show dialog. When Save button is clicked the code behind (after omitted here routine of checking the data entry, storing it and rebinding the repeater) sends script to close the dialog. The problem is that the dialog is not closing. The JavaScript function CloseDialog is called but $('#modal).dialog('close'); does not do what is required to.
Any ideas how to solve this problem ?
The code below works well for me:
<asp:UpdatePanel ID="updatepanel" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" />
</Triggers>
<ContentTemplate>
<asp:LinkButton ID="btnAdd" runat="server" Text="Add new" OnClick="BtnAdd_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="modal" title="Add item" style="display: none;">
<asp:UpdatePanel runat="server" ID="DialogUpdatePanel">
<ContentTemplate>
<div>
<label>
Educational institution:
<asp:TextBox ID="tbField1" runat="server" />
</label>
<br />
<label>
Country:
<asp:DropDownList ID="tbField2" runat="server" DataValueField="Id" DataTextField="Name" />
</label>
<br />
<asp:LinkButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"></asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Code-behind:
protected void BtnAdd_Click(object sender, EventArgs e)
{
tbField1.Text = string.Empty;
ScriptManager.RegisterStartupScript(updatepanel, updatepanel.GetType(),
Guid.NewGuid().ToString(), "ShowDialog();", true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(DialogUpdatePanel, DialogUpdatePanel.GetType(),
Guid.NewGuid().ToString(), "CloseDialog();", true);
}
Solved it myself.
The script to show/close dialog was like that:
function ShowDialog() {
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('open');
}
function CloseDialog(){
$('#modal).dialog('close');
}
What I did is: add to close function the definition of dialog:
function CloseDialog(){
$('#modal').dialog({
autoOpen: false,
modal: true,
dialogClass: 'dialog',
resizable: false,
width: 500,
height: 400
});
$('#modal).dialog('close');
}
And now dialog is closing without problem.
BUT!!!
The contribution of Yuriy Rozhovetskiy was extremely valuable: adding UpdatePanel to the content of dialog's DIV solved a lot of other issues of updating the dialog from codebehind. I believe, the best solution for using jQuery UI dialog inside UpdatePanel is to add one more UpdatePanel inside dialog. Thanks, Yuriy !!!
Does anyone have a resource or provide a code sample on when not to display an UpdatePrgress Control when a certain button is clicked.
in your Markup:
<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="Initial page rendered."></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing...
</ProgressTemplate>
</asp:UpdateProgress>
in your code behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}
this should work, try it...
source: Introduction to the UpdateProgress Control
I have an UpdatePanel within it a textbox with a background color of yellow and a trigger for text-changed for the textbox and everything works fine except that the background color reverts to white when I write some text in the text box and then focus somewhere else.
What is causing this? Thanks.
Using asp.net 4.0
Here is the asp.net markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span>
<asp:TextBox ID="sticky" runat="server" AutoPostBack="true"
Text='<%# Bind("sticky") %>' TextMode="MultiLine"
OnTextChanged="cSticky" />
</span>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="sticky" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
Here is the css:
#StickyDiv textarea
{
height:170px;
width:185px;
resize:none;
margin-top:1px;
border:none;
font-family:Comic Sans MS;
font-size:1.2em;
padding:3px;
line-height:1.1em;
}
And here is the jQuery:
$(function () {
$("#StickyDiv textarea:even").css("background-color","#ffff95");
$("#StickyDiv textarea:odd").css("background-color", "#fe8ab9");
});
Your problem is that when you do a update in the ajax panel your jquery is not called. If the text is changed you update the box to yellow and not call the javascript because it is rendered outside of your panel. To fix this you can register the script in you codebehide like:
ScriptManager.RegisterClientScriptBlock(Page,typeof(string),"JavaScriptCall",script.ToString(), false);
I did in the folowing example
in ASPX file
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" BackColor="Yellow" AutoPostBack="true" OnTextChanged="textChanged"></asp:TextBox>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
In Codebehind File
protected void textChanged(object sender, EventArgs e)
{
TextBox1.BackColor = System.Drawing.Color.Yellow;
Label1.Text = TextBox1.Text;
}
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.