ASP updatepanel doesn't refresh ajax tabpage - c#

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.

Related

How to hide and display asp:buttons in asp.net from code behind?

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;

Get data from modalpopupextender's panel

I have a GridView and a column in GridView which has a linkButton that opens a modalpopupextender on click. I am able to bind data in popextender panel but now i want to retrieve data from that panel.
I am getting data from each GridRow like:
foreach (GridViewRow row in MyGridView.Rows)
{
Label Date = (Label)row.Cells[0].FindControl("DateId");
string date = Date.Text;
//Code to get linkButton(asp:ModalpopUpextender) and data from
//asp:panel of ModalpopUpextender
}
I have searched around for answers but wasn't able to find a solution to my problem.
Thanks in advance.
Assuming you are having a setup like this
<ajaxToolKit:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" Width="95%" />
</ContentTemplate>
</asp:UpdatePanel>
You might try finding your panel first and then drill down to the required control.I would suggest putting this code in the row editing event
gridViewTest_RowEditing(object sender, GridViewEditEventArgs e)
{
gridViewTest.EditIndex=e.NewEditIndex;
Panel myPanel = (Panel)gridViewTest.Rows(gridViewTest.EditIndex).FindControl("pnlPopup");
Label myLabel = (Label)myPanel.Findcontrol("lblCustomerDetail");
}
//then do stuff with the label.
Thanks Abide for the useful post...finally i found the solution...
Panel.FindControl("ControlId");
does not work fine because somtimes panel is not added to the page.
we can use this code.It works fine.
foreach( Control cntrl in Panel.Controls )
{
if(cntrl.ID == "RequiredConteolId")
{
//your application code goes here...
}
}

Cloning AJAX TabPanels

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;
}
}

UpdatePanel inside Repeater

In my UserControl, Im trying to update a updatepanel that is inside a repeater like this:
HTML-Markup
<asp:UpdatePanel ID="updDocumentQuickView" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="repFolders" runat="server" OnItemDataBound="repFolders_OnItemDataBound" OnItemCommand="repFolders_OnItemCommand">
<ItemTemplate>
<asp:LinkButton ID="lnkFolder" runat="server"></asp:LinkButton>
<asp:UpdatePanel ID="updFiles" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="repFiles" runat="server" OnItemDataBound="repFiles_OnItemDataBound">
<ItemTemplate>
<%# Container.DataItem %>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
C#-code
protected void repFolders_OnItemCommand(object sender, CommandEventArgs e)
{
int intRow = -1;
ScriptManager myScriptManager = (ScriptManager)Page.Master.FindControl("myScriptManager");
Match myMatch = Regex.Match(myScriptManager.AsyncPostBackSourceElementID, "repFolders.ctl([0-9]*).lnkFolder");
if (myMatch != null)
intRow = Convert.ToInt32(myMatch.Groups[1].Value);
if (intRow > -1)
{
RepeaterItem myItem = repFolders.Items[intRow];
Repeater repFiles = (Repeater)myItem.FindControl("repFiles");
UpdatePanel updFiles = (UpdatePanel)myItem.FindControl("updFiles");
string[] arr1 = new string[] {
"array item 1",
"array item 2",
"array item 3",
"array item 4",
"array item 5" };
repFiles.DataSource = arr1;
repFiles.DataBind();
updFiles.Update();
}
}
The end result I get is that updDocumentQuickView is the UpdatePanel that gets updated, and not updFiles. If i wrap an UpdatePanel around lnkFolder, then that UpdatePanel gets updated, with the same C# code. Ive checked what kind of data that are sent back with fiddler, and the wrong UpdatePanel is sent. Im getting the correct RepeaterItem, and both repFiles and updFiles are found. What do I miss to get the right UpdatePanel to get updated?
UPDATE
Hawxby solution solved the problem with updDocumentQuickView getting updated, thanks for that. But im still having problems with updFiles sending nothing back. Some further testing, with putting literals inside updFiles and working, tells me that theres something with repFiles that isnt returned. repFiles does have data that is bounded.
FINAL SOLUTION
repFiles.Visible were set to false in repFolders_OnItemDataBound, no wonder it didnt show.
It's likely because you have to explicitly set the async bindings
<asp:UpdatePanel ID="updDocumentQuickView" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="repFolders" EventName="repFolders_OnItemCommand" />
</Triggers>
</asp:UpdatePanel>

Full postback triggered by LinkButton inside GridView inside UpdatePanel

I have a GridView inside of a UpdatePanel. In a template field is a button I use for marking items. Functionally, this works fine, but the button always triggers a full page postback instead of a partial postback. How do I get the button to trigger a partial postback?
<asp:ScriptManager ID="ContentScriptManager" runat="server" />
<asp:UpdatePanel ID="ContentUpdatePanel" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:GridView ID="OrderGrid" runat="server" AllowPaging="false" AllowSorting="false"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="MarkAsCompleteButton" runat="server" Text="MarkAsComplete"
CommandName="MarkAsComplete" CommandArgument='<%# Eval("Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="LoadDate" HeaderText="Load Date" />
<asp:BoundField DataField="EmployeeCutOffDate" HeaderText="Cut Off Date" />
<asp:BoundField DataField="IsComplete" HeaderText="Is Completed" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
You need to register each and every LinkButton as an AsyncPostBackTrigger. After each row is bound in your GridView, you'll need to search for the LinkButton and register it through code-behind as follows:
protected void OrderGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
LinkButton lb = e.Row.FindControl("MarkAsCompleteButton") as LinkButton;
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(lb);
}
This also requires that ClientIDMode="AutoID" be set for the LinkButton, as mentioned here (thanks to Răzvan Panda for pointing this out).
It's probably not advised but you can make everything on the GridView work asynchronously by excluding the EventName on the AsyncPostBackTrigger so e.g.
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OrderGrid" />
</Triggers>
This will make the RowCommand event and any other event on the GridView fire asynchronously. Note as well that when you make ClientIDMode="Static" on the GridView it will cause a full postback.
My grid view is in conditional mode.
protected void gvAgendamentoExclui_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow) {
LinkButton lnk = e.Row.FindControl("LinkButton2") as LinkButton;
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = lnk.UniqueID;
trigger.EventName = "Click";
UpdatePanel2.Triggers.Add(trigger);
}
}
And in the click event of the linkbutton I put:
protected void LinkButton2_Click(object sender, EventArgs e)
{
UpdatePanel2.Update();
}
Put the following element inside system.web element in web.config file
<xhtmlConformance mode="Transitional"/>
MSDN specifies that the UpdatePanel.ChildrenAsTriggers property "[g]ets or sets a value that indicates whether postbacks from immediate child controls of an UpdatePanel control update the panel's content" (see http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.childrenastriggers.aspx).
Since your LinkButton does not appear to be an "immediate child control," then I would recommend configuring your LinkButton as an explicit AsyncPostBackTrigger.
Below your </ContentTemplate> tag, try adding this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="MarkAsCompleteButton" EventName="Click" />
</Triggers>
I had an issue where I had one form working fine (page1), another doing whole post backs (page2). Turned out when I made the 2nd page, I had done a bit too much cut/paste, and it still had a javascript call in the form definition.
< form id="form1" runat="server" onsubmit="return checkstuff();">
But checkstuff was not defined in page 2.
deleted the onsubmit, and the partial posts started working.
In the working page - page 1, checkstuff was defined, but was just a stub, which did nothing more than return true. Just for grins, I put an alert in checkstuff, and sure enough, it is called for all submits, partial or not. And, if I changed the stub to just return false, nothing happened at all.
Point in all this, the javascript is still exercised, as if a full page is being submitted. So double check your client side scripts.
this may be old but my solution was to put an update panel inside the itemTemplate and one outside the gridview as well.
the trigger should be the gridview and the outside trigger should be the gridview and PageIndexChanging. Try that.
You need to register each controls for each RowState.
1: Register your controls for RowState = Alternate and Normal)
2: Register your controls for RowState = Edit
3: ...
ASPX:
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton runat="server" ID="Btn1"
CommandName="Edit" CommandArgument='<%# Container.DataItemIndex + ";" + Eval("idinterlocuteur") %>'><i class="fa fa-pencil-square-o"></i></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="Btn2" runat="server" CommandName="Update" CommandArgument='<%# Container.DataItemIndex + ";" + Eval("idinterlocuteur") %>'><i class="fa fa-check"></i></asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
Code behind :
protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow
&& (e.Row.RowState == DataControlRowState.Normal
|| e.Row.RowState == DataControlRowState.Alternate))
{
LinkButton Btn1 = e.Row.FindControl("Btn1 ") as LinkButton;
ScriptManager.GetCurrent(this.Parent.Page).RegisterAsyncPostBackControl(Btn1 );
}
if (e.Row.RowType == DataControlRowType.DataRow
&& e.Row.RowState == DataControlRowState.Edit)
{
LinkButton Btn2 = e.Row.FindControl("Btn2 ") as LinkButton;
ScriptManager.GetCurrent(this.Parent.Page).RegisterAsyncPostBackControl(Btn2 );
}
}

Categories