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.
i am using a popup control extender.but i am getting only index of selected value from radiobutton list.I want to get the text
Below is my source code
<div class="FloatRight">
<asp:TextBox ID="txtTeam" runat="server" Width="150px" autocomplete="off"></asp:TextBox>
<br />
<asp:Panel ID="panel" runat="server">
<div style="border: 1px outset white; width: 100px">
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<asp:RadioButtonList ID="rbteam" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbteam_SelectedIndexChanged">
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
<cc1:PopupControlExtender ID="txtTeam_PopupControlExtender" runat="server" Enabled="True"
and this is server side
protected void rbteam_SelectedIndexChanged(object sender, EventArgs e) {
if (!string.IsNullOrEmpty(rbteam.SelectedValue))
{
txtTeam_PopupControlExtender.Commit(rbteam.SelectedValue);
}
else
{
txtTeam_PopupControlExtender.Cancel();
}
rbteam.ClearSelection();
}
txtTeam_PopupControlExtender.Commit(rbteam.SelectedItem.Text);
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;
}