I am working on AJAX update panels for the first time with some success. I have a <div> that I want to update when a button (that has postback disabled on it) is clicked.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="False">
<ContentTemplate>
<div style="float: left; height: auto; width: 23%;">
<div style="font-size: 20px; padding-top: 11px; border-bottom: solid 1px #dddddd;">
Your Logo
</div>
<br />
<div class="resultsinnerbox" style="padding-top: 15px; width: 85%; font-size: 12px;">
<asp:Literal ID="litLogo" runat="server"></asp:Literal>
<div style="margin-left: 4.5%; margin-right: 4.5%;">
<asp:Literal ID="litLogoDetails" runat="server"></asp:Literal>
<span class="fileupload">Upload</span>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Upon the click of the button will do the following
litLogoDetails.Text = "Hello"
'UpdatePanel1.Update()
However even with the UpdatePanel commented out or not the button always updates the panel.
How is that so? when UpdatePanel1 is Conditional. Also, how is it knowing to update 'UpdatePanel1' when the button is pressed and the UpdatePanel1.Update() is commented out.
I need to understand how this is working before I can continue.
Thanks for you help.
Related
In my ASP.NET web project, i am using a web user control in a web form to generate insert/update/delete operations for the data in the web form.
<asp:UpdatePanel runat="server" ID="ctlUcusUpdatePanel">
<ContentTemplate>
<uc1:UcusBilgileriEditor runat="server" ID="ctlUcusBilgileriEditor" />
<%-- Here I have a grid to display data--%>
</ContentTemplate>
</asp:UpdatePanel>
Here is my user control:
<asp:UpdatePanel ID="ctlEditorUpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="ctlEditorContentPanel" Visible="false">
<div class="panel panel-primary" id="ctlUcusBilgiModal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; width: 100%; display: none">
<div class="panel-heading">
<div class="panel-title">
<hzg:HZGLiteral runat="server" ID="ctlModalTitle"></hzg:HZGLiteral>
</div>
</div>
<div class="panel-body" style="padding: 20px 20px 2px 2px;">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Genel</li>
<li class="">Uçuş Detayları</li>
<li class="">Açıklamalar</li>
</ul>
<div class=tab-content>
<div class="form-group col-sm-1">
<label class="control-label" for="<%= ctlFlightMoveType.ClientID %>">
<asp:Literal runat="server" ID="ctlFLightMoveLiteral" meta:resourcekey="ctlFlightMoveTypeLiteral" />
</label>
<hzg:HZGRadioButtonList ID="ctlFlightMoveType"
AutoPostBack="true"
CellPadding="3"
RepeatColumns="5"
RepeatDirection="Vertical"
TextAlign="Right"
runat="server"
DataValueField="INISMI"
EnumType="HZG.Core.Model.Enums.FlightMove"
OnSelectedIndexChanged="ctlFlightMoveType_SelectedIndexChanged">
</hzg:HZGRadioButtonList>
</div>
</div>
</div>
<div class="panel-footer" style="text-align: right">
<hzg:HZGButton ID="ctlSaveButton" runat="server" ButtonDesign="success" ButtonSize="small" Text="Kaydet" OnClick="ctlSaveButton_Click" meta:resourcekey="ctlSaveButton" RolePermission="Admin,PowerUser,User" />
<hzg:HZGButton ID="ctlDeleteButton" runat="server" ButtonDesign="danger" ButtonSize="small" Text="Delete" OnClick="ctlDelete_Click" meta:resourcekey="ctlDeleteButton" OnClientClick='<%$ Resources:GlobalResource, AreYouSure%>' RolePermission="Admin,PowerUser,User" />
<hzg:HZGButton ID="ctlCloseButton" runat="server" ButtonDesign="primary" ButtonSize="small" Text="İptal" OnClick="ctlCloseButton_Click" meta:resourcekey="ctlCloseButton" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
When I click on a radiobutton in my RadiButtonList, ctlFlightMoveType_SelectedIndexChanged event is triggered; and when this happens, i want only my user control to postback but my web form postback and the user control is closed.
I dont want the webform to postback, i want only user control. How can i do this?
Please, read the AJAX overview, you can also read up about ScriptManager and UpdatePanel. Using UpdatePanel you can achieve the feature described in your question.
On your user control update panel make sure you have childrenastriggers=true. And on the script manager declaration (in your main page) make sure you have enablepartialupdates selected.
If it's still forcing a full post back, chances are you have some iffy html somewhere on the page.
I want to use ajax panel extender such that on click of ExpandControlID or CollapseControlID should call a method.
Can somebody tell me how to do that?
Add New Panel :
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
<div style="background-image:url('green_bg.gif'); height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 0 0">
Alert Panel
</div>
<div style="float:left; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
Step2 :
Add Your Panel Which is to be Hide and Show on Click
<asp:Panel ID="panel 5" runat="server" >
</asp:Panel>
Step 3 :
Below your panel , Add CollapsiblePanelExtender
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="pnlClick" Collapsed="true" ExpandControlID="pnlClick" TextLabelID="lblMessage"
CollapsedText="Show" ExpandedText="Hide" ImageControlID="imgArrows"
CollapsedImage="~/Client/Images/CollapseExpand/downarrow.jpg" ExpandedImage="~/Client/Images/CollapseExpand/uparrow.jpg" ExpandDirection="Vertical" TargetControlID="Panel5" ScrollContents="false">
</cc1:CollapsiblePanelExtender>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Step : 4
Add your CSS
Eg:
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:10%;
}
</style>
I inserted a required field validator in my inserttemplate of my listview. The validator is suppose to check if a value was selected in the listbox when a user clicks insert. It does what is suppose to do however, I have a search button outside the listview that displays the listview columns and when that is clicked the required field validator is triggered. I only want it to trigger when the insert button is clicked within the listview. Is this possible?
Search Button located in ContentTemplate
<div style="padding-top: 5em; text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; width:100%">
<b style="padding-right: .5em">FormSection </b>
<asp:TextBox ID="SectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">SubSection</b>
<asp:TextBox ID="SubSectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">Section Item</b>
<asp:TextBox ID="SectionItemSearchBox" runat="server"></asp:TextBox>
<asp:Button ID="SearchButton" Height="30px" runat="server" Text="Search" OnClick="SearchButton_Click" />
</div>
Required Field Validator located in content template in the listview's insert template
<span style="color:red">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Required Field!" ControlToValidate="formsection"></asp:RequiredFieldValidator>
</span>
<div style="height: auto; width: 250px; overflow: auto; border: solid; border-color: ActiveBorder" >
<asp:ListBox ID="formsection" runat="server" DataSourceID="FormSectionDataSource" DataTextField="FormSection" DataValueField="FormSectionID" AppendDataBoundItems="True" SelectedValue='<%# Bind("FormSectionID") %>' Height="150px">
<asp:ListItem Selected="True" Value=""><- please select -></asp:ListItem>
</asp:ListBox>
</div>
I figured it out, in the code behind I used.
SearchButton.CausesValidation = false;
When the button is clicked it does not trigger the validation.
It is obvious that the control and the extender are in the same update panel. Yet, a "An extender can't be in a different UpdatePanel than the control it extends" error occurs.
NOTE: The user control is declared within an UpdatePanel on the page using it. That makes the UpdatePanel in the user control "nested".
The following code is in the Asp.Net UserControl:
<asp:TemplateField HeaderStyle-Width="0px">
<ItemTemplate>
<asp:UpdatePanel ID="hoverMenuUpdatePanel" runat="server">
<ContentTemplate>
<ajaxtoolkit:HoverMenuExtender ID="extensionActionHoverMenuExtender" runat="server"
PopupControlID="extensionActionHoverMenu" PopupPosition="Left" HoverCssClass="popupHover"
TargetControlID="extensionActionHoverMenu" OffsetX="5" PopDelay="50" />
<asp:Panel ID="extensionActionHoverMenu" runat="server" CssClass="modalDialogPanel"
Style="display: none; height: 200px; width: 300px; padding: 5px;">
<div style="border-color: #3A362C; padding: 2px; border-right-style: solid; border-right-width: thin;
float: left;">
<div class="title">
Reserve Extension:  
<asp:Label ID="extensionToReserveLabel" runat="server" Text='<%# Eval("ConsolidatedPhoneExtensionPK") %>' />
</div>
<div id="userType" style="border-style: solid; border-width: 1px; padding: 5px; height: 80px;
width: 200px; background-color: #E2DDBA; margin-bottom: 8px;">
User Type:
<asp:RadioButtonList ID="reservedUserTypeRadioButtonList" runat="server">
<asp:ListItem Selected="true" Text="999/988" Value="Employee" />
<asp:ListItem Text="Other" Value="Other" />
</asp:RadioButtonList>
</div>
<div>
Employee No:<asp:TextBox ID="reserveEmployeeNo" runat="server" OnTextChanged="reserveEmployeeNo_TextChanged"
AutoPostBack="true" />
<asp:Label ID="employeeNameDisplayLabel" runat="server" />
<asp:Label ID="reserveUserMessageAreaLabel" runat="server" />
</div>
</div>
<div>
<div>
<asp:Button ID="selectButton" runat="server" Text="View" CommandName="Select" Width="75px" />
</div>
<div>
<asp:Button ID="reserveButton" runat="server" Text="Reserve" CommandName="Reserve"
CommandArgument='<%# Eval("ConsolidatedPhoneExtensionPK") %>' Width="75px" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reserveEmployeeNo" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
Create a panel with an ID of "popup" (it can be anthing you like though). In this panel place any buttons or what ever you want, this will be your popup menu. Set your PopupControlID to "popup".
Your TargetControlID should be the ID of the panel you want the manu to popup in (extensionActionHoverMenu?).
PopupControlID and TargetControlID are the same. Your TargetControlID should be some other form element.
HoverMenu Sample:
TargetControlID - The control that the extender is targeting. When
the mouse cursor is over this control,
the hover menu popup will be
displayed.
PopupControlID - The ID of the control to display when mouse is over
the target control. In this case, it's
just a simple panel with two links:
Sometimes it's not about the updatepanel but about other items of the toolkit.
I got this message while using the FilteredTextBoxExtender. The control defined int the TargetControlID was in a different updatepanel.
I have an application developed in asp.net which set innerhtml of div. I am creating an html string to show googlemap. It works fine. But when I put my div inside update panel. it doesnt show googlemap in div. Here is my aspx file code:
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="map_canvas" runat="server" style="width: 100%; height: 1500px; margin-bottom: 2px;
text-align: center;">
<asp:Panel ID="Panel1" runat="server">
<%--Place holder to fill with javascript by server side code--%>
<asp:Literal ID="js" runat="server"></asp:Literal>
<%--Place for google to show your MAP--%>
<div id="Div1" style="width: 100%; height: 728px; margin-bottom: 2px;">
</div>
<br />
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnShow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
here is my button click event.
protected void btnShow_Click(object sender, EventArgs e)
{
// works fine without update panel.
map_canvas.InnerHtml = showMapWithPoints();
}
Hai Asif,
May be you should take a look at this.....
http://www.reimers.dk/blogs/jacob_reimers_weblog/archive/2008/11/23/an-example-using-updatepanels-and-google-maps.aspx
When you do:
map_canvas.InnerHtml = showMapWithPoints();
You are overwriting everything, including all your server side controls, within that div.
Are you doing anything that requires those controls to be available such as you 'js' and 'div1' controls?