I have this TextBox:
<asp:TextBox id="locSelectedCameraGroupName" runat="server" ></asp:TextBox>
I have this back end code:
protected void btnCameraGroup_ServerClick(object sender, EventArgs e)
{
locSelectedCameraGroupName.Text = "test string!";
}
This method is called after clicking a button:
<asp:linkbutton id="btnCameraGroup" runat="server" onclick="btnCameraGroup_ServerClick" onclientclick="ShowCameraGroupPopup()"
style="font-size: 1.2em; text-decoration: none; cursor: pointer; background-color:grey; ">
<!-- TODO: Make button have round corners...css? -->
</asp:linkbutton>
However, the text does not update. This is a user control. The line is reached (according to my debugger). When I move the line to my page load, it works. Is there something wrong I am doing?
The following method ShowCameraGroupPopup just shows/hides some tags I don't think it has much to do with the issue, but here it is anyways:
function ShowCameraGroupPopup() {
$('#<%=waitIcon.ClientID%>').show();
$('#<%=divMainContent.ClientID%>').hide();
$("#divCameraGroupPopup").modal("show");
return true;
}
This is the flow after clicking the link button:
Page_Load hit (is post back)
btnCameraGroup_ServerClick hit
Tab name = Second tab (this is the info I want, but for some reason the
text isn't updated)
I needed an UpdatePanel (and ContentTemplate) around the TextBox with a Triggers (AsyncPostBackTrigger) as so:
<asp:UpdatePanel id="groupNamePanel" runat="server" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnCameraGroup" />
</Triggers>
<ContentTemplate>
<asp:TextBox id="locSelectedCameraGroupName" runat="server" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
If you have Page_Load() event in your codes, change Page_Load() content like below:
private void Page_Load()
{
if (!Page.IsPostBack)
{
//copy previous page load codes here
}
}
Related
I have an ajax tabcontainer in an updatepanel with all tabpages set visible until you want to add a tabpanel based on the dropdownlist selected value
CODE:
<cc1:TabContainer ID="tabControlParameters" runat="server" CssClass="ajax__tab_xp"
ScrollBars="Both" ActiveTabIndex="15" UseVerticalStripPlacement="True">
<%--EnvironmentTab --%>
<cc1:TabPanel ID="pnlEnvironment" HeaderText="Environment" runat="server" Visible="false">
<ContentTemplate>
//somecontent
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlDatabase" HeaderText="Environment" runat="server" Visible="false">
<ContentTemplate>
//somecontent
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlFirstError" HeaderText="Environment" runat="server" Visible="false">
<ContentTemplate>
//somecontent
</ContentTemplate>
</cc1:TabPanel>
With a button add which is inside the Updatepanel and has a correct async trigger assigned to it.
From C# codebehind I've made a loop to check if the dropdownlist selectedvalue = panel_headertext if so make it visible
CODE:
protected void btnAddParameters_Click(object sender, EventArgs e)
{
String Parameter = ddlParameterTypes.SelectedValue.ToString();
AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)tabControlParameters;
foreach (object obj in container.Controls)
{
if (obj is AjaxControlToolkit.TabPanel)
{
AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
if (tabPanel.HeaderText == ddlParameterTypes.SelectedValue)
{
tabPanel.Visible = true;
tabPanel = tabControlParameters.ActiveTab;
container.ActiveTab = tabPanel;
}
}
}
}
Now this works perfectly if the updatepanel trigger is set to fullPostback but it's set to async postback then it only works on the first click even though the event is fired every time I'm clicking on the button. Am I missing something obvious here?
Petar
You have the same value in HeaderText for each of your TabPanels. I think it'll work if you correct the HeaderText attributes.
i am trying to rebind my Dropdown upon button click, in particular if Block but it doesn't rebind, i mean that it should reload the drop down, kinda refresh and first item should be selected, i am doing this but not getting rebinded
Code:(It si inside buttong click event)
if (NotAssignedConductors.Length > 0)
{
string[] NotAssignedConductorsArray = NotAssignedConductors.Split(':');
foreach (string str in NotAssignedConductorsArray)
{
ResultLabel.ResultLabelAttributes(str, ProjectUserControls.Enums.ResultLabel_Color.Red);
}
FillDropDownListDevices();
}
Method being called:
public void FillDropDownListDevices()
{
DropDownListDevices.DataSource = ManageTransport.ManageConductorDevices.GetDevices();
DropDownListDevices.DataTextField = "TerminalSNO";
DropDownListDevices.DataValueField = "DeviceID";
DropDownListDevices.DataBind();
DropDownListDevices.Items.Insert(0, new ListItem("None", "-1"));
}
Button:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownListDevices" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownListDevices_SelectedIndexChanged" CssClass="form-control">
</asp:DropDownList>
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnCreate" EventName="click" />
</Triggers>
</asp:updatePanel>
There are many possibilities
If you are using update panel make sure you trigger update-panel to update on button click
check your page_load/page_loadComplete event and make sure you are not binding drop-down again .
check your browser console it throws any error on button click?
Create Post back trigger on update panel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownListDevices" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownListDevices_SelectedIndexChanged" CssClass="form-control">
</asp:DropDownList>
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:updatePanel>
Put your first time binding method on Postback
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//means no postback..page loaded first time
// Put your first time Binding method here
}
}
I am working on asp.net web application.
In one Page I have two asp buttons.
I want to display them in one condition otherwise I don't want to display them.
So I'm trying to do the same like this. But Its not working.
I can't find the reason behind it. Please tell me where is the issue.
To Hide Buttons
if (!IsPostBack)
{
ButtonReplaceId.Style.Add("display", "none");
ButtonAssociateRules.Style.Add("display", "none");
}
To display buttons
protected void ApplyAssociation(object sender, EventArgs e)
{
//Some piece of code
if(a==0)
{
ButtonAssociateRules.Style.Add("display", "block");
ButtonReplaceId.Style.Add("display", "block");
}
}
aspx for buttons
<div style ="padding-left:400px;">
<asp:Button ID="ButtonAssociateRules" runat="server" OnClick="AssociateMultipleRulesButtonClick"
CssClass="search_button_in_vm_intersection" Text="Associate Multiple Rules"
OnClientClick="return OnClientClickAssociateRewardRuleFile();" />
<asp:Button ID="ButtonReplaceId" runat="server" OnClick="ApplyReplaceIfRuleIntersects"
CssClass="search_button_in_vm_intersection" Text="Replace Previous Rules"
OnClientClick="return OnClientClickReplaceRewardRuleFile();" />
</div>
aspx of button for OnClick event ApplyAssociation()
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Table runat="server" CssClass="rule_file_whole" BorderWidth="0" Style="padding-top: 30px;">
<asp:TableRow ID="MerchantRowAssociation" HorizontalAlign="Center">
<asp:TableCell>
<div style="text-align: center">
<asp:Button ID="AssociationMerchant" Text="Apply Association" runat="server" OnClick="ApplyAssociation"
CssClass="search_button_in_vm_associate1 " OnClientClick="return checkValidation()" />
</div>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ContentTemplate>
</asp:UpdatePanel>
Seeing as you are using a conditional update panel, you can try either of these after putting the buttons inside an update panel.
protected void ApplyAssociation(object sender, EventArgs e)
{
//Some piece of code
if (a == 0)
{
ButtonAssociateRules.Style["visibility"] = "hidden";
ButtonReplaceId.Style["visibility"] = "hidden";
myUpdatePanel.Update();
}
}
protected void ApplyAssociation(object sender, EventArgs e)
{
//Some piece of code
if (a == 0)
{
ButtonAssociateRules.Visible = false;
ButtonReplaceId.Visible = false;
myUpdatePanel.Update();
}
}
Here's an example of your buttons inside an update panel.
<asp:UpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="padding-left:400px;">
<asp:Button ID="ButtonAssociateRules" runat="server" OnClick="AssociateMultipleRulesButtonClick"
CssClass="search_button_in_vm_intersection" Text="Associate Multiple Rules"
OnClientClick="return OnClientClickAssociateRewardRuleFile();" />
<asp:Button ID="ButtonReplaceId" runat="server" OnClick="ApplyReplaceIfRuleIntersects"
CssClass="search_button_in_vm_intersection" Text="Replace Previous Rules"
OnClientClick="return OnClientClickReplaceRewardRuleFile();" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
You can simple use the Visible property of Button which is more straight forward and clean.
ButtonReplaceId.Visible = false;
If this property is false, the server control is not rendered. You
should take this into account when organizing the layout of your page.
If a container control is not rendered, any controls that it contains
will not be rendered even if you set the Visible property of an
individual control to true. In that case, the individual control
returns false for the Visible property even if you have explicitly set
it to true. (That is, if the Visible property of the parent control is
set to false, the child control inherits that setting and the setting
takes precedence over any local setting.) MSDN.
You are trying to change the state of control in ajax call that is not in current UpdatePanel. Put the buttons in the same UpdatePanel then you will be able to change the state.
ButtonReplaceId.Visible = false;
ButtonAssociateRules.Visible = false;
I have come across an interesting problem when trying to clone a template panel in my ajax tabcontainer control.
The idea is that i have a custom control on the first tab that lists some things, and to add a new thing you click the new button on the custom control, which raises an event in the control / page that contains the tabcontainer. That control / page then goes about cloning the hidden tabpanel and adding the clone to the tabcontainer.
with this markup I get what I need from both the first tab (containing the list) and any subsequent tabs (templated by the hidden tabpanel ready for cloning) ...
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
<ContentTemplate>
<cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TemplatePanel" runat="server" Visible="false">
<HeaderTemplate>
<span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" />
</HeaderTemplate>
<ContentTemplate>
Some content for my panel
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Ok now lets assume that on the first panel in my custom control i have a button that raises the "MyEvent" event which in turn calls the method "CreateTabFromTemplate".
Now what I want to do is copy the hidden panel "TemplatePanel" and add it to the tab container.
In my code behind, the method code for adding the new tab panel to my tab container works something like this ...
protected void CreateTabFromTemplate(object sender, EventArgs e)
{
// create a new tab panel
TabPanel newPanel = new TabPanel();
// instantiate the hidden content template from the hidden note panel in the new panel
ui_tpNoteCreator.ContentTemplate.InstantiateIn(newPanel);
// add the panel to the available tabs and select it
TabContainer1.Tabs.Add(newPanel);
TabContainer1.ActiveTab = newPanel;
}
All looking good so far ... but i missed something ... I haven't templated the new tabpanels header ... it seems that all I can do is set the text.
Following this example : http://forums.asp.net/t/1108611.aspx/1 I can do what i'm trying to do but I don't want to write a class that defines my header template I want to instantiate an instance of my markup version and pass that instance to my new panel.
I'm not convinced this can be done ... is this a bug with the control or did i miss something ?!?!
Any ideas?
It turns out i was going about it the wrong way ...
Essentially theres a difference between assigning templates and the databinding process, it's still not perfect because of the data im trying to pass in to my tab templates but here's the basic principal ...
Markup :
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
<ContentTemplate>
<cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TemplatePanel" runat="server" Visible="false">
<HeaderTemplate>
<span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" />
</HeaderTemplate>
<ContentTemplate>
Some content for my panel
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Code behind :
protected void CreateTabFromTemplate(object sender, EventArgs e)
{
// create a new tab panel
TabPanel newPanel = new TabPanel();
newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate;
newPanel.ContentTemplate = TemplatePanel.ContentTemplate;
// add the panel to the available tabs and select it
TabContainer1.Tabs.Add(newPanel);
TabContainer1.ActiveTab = newPanel;
}
protected void TabContainer_DataBinding(object sender, EventArgs e)
{
foreach(TabPanel panel in TabContainer.Tabs)
{
//identify if this is the correct tab
if(correctTab)
{
// this will find a control anywhere on the panel (eg in both header and content templates)
Label label = panel.FindControl("ControlID") as Label;
label.Text = "Some Business Object Value";
}
}
}
I just tested the following which works as far as I can tell.
Markup:
<asp:TabContainer ID="TabContainer1" runat="server" ViewStateMode="Enabled">
<asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
<ContentTemplate>
<asp:Button ID="btnAddPanel" runat="server" Text="Add Panel" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TemplatePanel" runat="server" Visible ="false">
<HeaderTemplate>
<span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="X" />
</HeaderTemplate>
<ContentTemplate>
<p>Test Content</p>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Code behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.btnAddPanel.Click += new EventHandler(btnAddPanel_Click);
}
void btnAddPanel_Click(object sender, EventArgs e)
{
TabPanel newPanel = new TabPanel();
newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate;
TemplatePanel.ContentTemplate.InstantiateIn(newPanel);
TabContainer1.Tabs.Add(newPanel);
TabContainer1.ActiveTab = newPanel;
}
}
I'm trying to get my hovermenuextenders to do some lazy loading. I have avatars across the site that when hovered over should pull back various things (images, recent posts, post count, etc) For obvious reasons I don't want to do this for all avatars on the page_load.
Using the following code I'm able to get the hover event to trigger a postback to the server asynchronously (breakpoint is hit onmouseover). However, the commands in the postback don't seem to be reflected after execution is done. The loading image/label stay in the hover panel. Any help is appreciated!
EDIT: I just realized that the very last avatar rendered on the page works properly but none of the ones above it do. Any ideas what might be causing this strange behavior?
<script language="javascript" type="text/javascript">
function OnHover(image) {
__doPostBack('<%= this.imageHoverTrigger.UniqueID %>', '');
}
</script>
<!-- DUMMY Hover Trigger -->
<input id="imageHoverTrigger" runat="server" style="display:none;"
type="button" onserverclick="imageHoverTrigger_Click" />
<!-- User Avatar -->
<div style="border: solid 1px #AAA; padding:2px; background-color:#fff;">
<asp:ImageButton ID="UserImg" runat="server" />
</div>
<!-- Hover tooltip disabled by default
(Explicitly enabled if needed)-->
<ajax:HoverMenuExtender ID="UserInfoHoverMenu" Enabled="false" runat="server"
OffsetX="-1"
OffsetY="3"
TargetControlID="UserImg"
PopupControlID="UserInfoPanel" dyn
HoverCssClass="userInfoHover"
PopupPosition="Bottom">
</ajax:HoverMenuExtender>
<!-- User Profile Info -->
<asp:Panel ID="UserInfoHover" runat="server" CssClass="userInfoPopupMenu">
<asp:UpdatePanel ID="UserInfoUpdatePanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Image ID="loadingImg" runat="server" ImageUrl="~/Design/images/ajax-loader-transp.gif" />
<asp:Label ID="loadingLbl" runat="server" Text="LOADING..." ></asp:Label>
<asp:Panel ID="UserInfo" runat="server" Visible="false">
<b><asp:Label ID="UserNameLbl" runat="server"></asp:Label><br /></b>
<span style="font-size:.8em">
<asp:Label ID="UserCityLbl" runat="server" Visible="false"></asp:Label> <asp:Label ID="UserStateLbl" runat="server" Visible="false"></asp:Label>
</span>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
And the code-behind:
protected void Page_Load(object sender, EventArgs e)
{
UserImg.Attributes.Add("onmouseover", "javascript:OnHover(this)");
}
protected void imageHoverTrigger_Click(object sender, EventArgs args)
{
// Hide loading image/label
loadingLbl.Visible = false;
loadingImg.Visible = false;
//TODO: Set user data here
UserInfo.Visible = true;
}
Figured it out:
My Page_Load event hookup should've been:
UserImg.Attributes.Add("onmouseover", "javascript:OnHover('" + this.imageHoverTrigger.UniqueID + "','" + this.hiddenLbl.ClientID + "')");
UserImg.Attributes.Add("onmouseout", "javascript:ClearTimer()");
and the javascript function should've been:
var hoverTimer;
// Called on the hover of the user image
function OnHover(trigger, hiddenTxt) {
var field = document.getElementById(hiddenTxt);
// Only post if this hover hasn't been done before
if (field == null || field.innerHTML == "false") {
hoverTimer = setTimeout(function() { ShowInfo(trigger) }, 500);
}
}
// Clears timeout onmouseout
function ClearTimer() {
clearTimeout(hoverTimer);
}
// Retrieves user info from server
function ShowInfo(trigger) {
__doPostBack(trigger, '');
}
I also added a hidden field on the form in order to know when the hover has been executed. The code behind sets the hidden field to true and my javascript checks for the value of the hidden field each time it executes. This stops the code from doing round trips each time the user hovers over the image.