asp.net model popup extender - asp.net

I am using ajax model popup extender in my asp.net page. From my page , on click of Save button , i popup panel using model popup extender.
If i cause postback from model popup , my backend (asp.net) form controls are coming front (ie) in the panel.
Here is my code snippet,
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up_Save" runat="server">
<ContentTemplate>
<div>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="center" colspan="4">
<asp:Button ID="btn_Save" runat="server" Text="Save" Width="15%" OnClick="btn_Save_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender ID="BarrierRelayPopup" runat="server" PopupControlID="PopUp_Panel" TargetControlID="hiddenfield" CancelControlID="btn_Cancel_PopUp">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hiddenfield" runat="server" />
<asp:Panel runat="server" ID="PopUp_Panel" Width="50%" Height="30%" BackColor="Gainsboro" BorderStyle="Groove" >
<asp:UpdatePanel runat="server" ID="PopUp">
<ContentTemplate>
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_Heading" runat="server" Text="Select Relay and Barrier :"></asp:Label>
</td>
</tr>
<tr>
<td>
<B_R:Barrier_Relay ID="Barrier_Relay" runat="server"/>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_OK" runat="server" Width="60px" Text="OK" OnClick="btn_OK_Click" /> <asp:Button ID="btn_Cancel_PopUp" runat="server" Width="60px" Text="Cancel" OnClick="btn_Cancel_PopUp_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Can anybody help me in this.

If I understand you right I think what you want to do is wrap the controls inside the modal in an updatepanel. This will prevent the modal from closing if you need to do a postback from within the popup.

Related

Server side events not firing the first time when asp validator used into the page

I am created a page with update panel and used Asp.net validation controls to be
validated the page is making an issue is "i am straightly going to submit the page
and page gets validated properly then, i am going to click/select any controls on
the page is not get post back"
The below code i am used
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="divMyDataManualEntry" runat="server">
<table cellpadding="3" cellspacing="0" border="0" width="100%">
<td style="width: 5%;" valign="top">
<asp:Label ID="lblGeo" Font-Bold="true" runat="server" Text="Geography"></asp:Label><span
class="redtext">*</span>
</td>
<td valign="top" style="width: 15%">
<asp:DropDownList ID="ddlgeo" TabIndex="1" runat="server" CssClass="textbox" Width="100%"
OnSelectedIndexChanged="ddlgeo_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ddlgeo"
ValidationGroup="Submit" InitialValue="-1" ErrorMessage="Select Geography"></asp:RequiredFieldValidator>
</td>
</tr> </table>
<table width="100%" id="BtnContainer" runat="server">
<tr>
<td align="center">
<asp:Button ID="btnSubmit" runat="server" OnClientClick="javascript:return IsValidated();"
ValidationGroup="Submit" CssClass="Keybutton" TabIndex="14" Text="Submit" OnClick="btnSubmit_Click" />
<asp:Button ID="btnreset" runat="server" Text="Reset" CssClass="Keybutton" TabIndex="15"
OnClick="btnReset_click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Display a modal popup using AJAX

I have designed a modal popup in ASP.net. The task is when I click my button, it has to display a modal popup box. I used AJAX extender control kit also. Below is my coding.
Approval.aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:Button ID="ApproveButton" runat="server" Text="Approve" />
<ajaxToolkit:ModalPopupExtender ID ="mp1" runat="server" PopupControlID="Panel1"
TargetControlID="ApproveButton" CancelControlID="CancelButton">
</ajaxToolkit:ModalPopupExtender>
<!--Modal Panel "Panel1"-->
<asp:Panel ID="Panel1" runat="server" Height="170px" Width="506px">
<table style="width: 100%; height: 164px;">
<tr>
<td>
<asp:Label ID="ReasonLabel" runat="server" Text="Reason for Approval"></asp:Label>
</td>
<td>
<asp:TextBox ID="ReasonTextBox" runat="server" Height="126px"
TextMode="MultiLine" Width="336px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="OkButton" runat="server" Text="Ok" Width="66px" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<!--Modal Panel-->
</div>
The problem is, the Popup window is just blinking once when I clicked the button. It is not displaying the popup permanently.

Multiple Ajax Collapsers in one page causes on to close

Ok so currently I have a ajax collapser for "advance search" options. Then I went to add a top bar for navigation which user can show/hide using ajax collapser aswell. By default that collapser is open and the search is closed. Now when i go to click to open the search options it closes the navigation panel.. I can't seem to figure out why it's doing that...Any help is more than appreciated.
<asp:UpdatePanel ID="upNorth" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlNavigation" runat="server" Width="100%">
<div style="float:left;">
<asp:Menu ID="NavOptions" CssClass="toolbar" runat="server" Orientation="Horizontal"
</asp:Menu>
</div>
<div style="float:right; margin-right:20px;">
<asp:Menu ID="NavActions" CssClass="toolbar" runat="server" Orientation="Horizontal"
</asp:Menu>
</div>
</asp:Panel>
<div id="CollapseBar" runat="server" class="bar"><asp:Image ID="iBar" runat="server" ImageUrl="../img/bar.jpg" /></div>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"
TargetControlID="pnlNavigation"
CollapsedSize="0"
Collapsed="false"
ExpandControlID="iBar"
CollapseControlID="iBar"
AutoCollapse="False"
AutoExpand="False"
SuppressPostBack="true"
ScrollContents="false"
ExpandDirection="Vertical"></ajaxToolkit:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
<div id="content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers></Triggers>
<ContentTemplate>
<table>
<tr>
<td><asp:TextBox ID="txtSearch" runat="server" /></td>
<td><asp:Button ID="btnSearch" runat="server" Text="Buscar" CssClass="buttons" /></td>
</tr>
</table>
<asp:LinkButton ID="lbShowBusqueda" runat="server" Text="Advanced Options" />
<asp:Image ID="imgCollapse" runat="server" ImageUrl="../img/down.png" />
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<td>Lastname</td>
<td><asp:TextBox ID="txtLastName" runat="server" /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
Collapsed="True"
ExpandControlID="lbShowBusqueda"
CollapseControlID="lbShowBusqueda"
AutoCollapse="False"
AutoExpand="False"
ImageControlID="imgCollapse"
ExpandedImage="../img/up.png"
CollapsedImage="../img/down.png"
ExpandDirection="Vertical"></ajaxToolkit:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
never mind it seems I had to specify expandsize so it stays open...weird but it works..

asp.net ajax Partial rendering not working

I'm trying to do some ajax code but am failing miserably,the code below works
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
But if i was to change the code like below,partial rendering of the page doesn't work
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Could someone please look into the code and tell me if im doing something wrong
UpdatePanel generates a div. So put you table inside and it should be fine
OK Code #1
<tr>
<td>
<div />
</td>
</tr>
Wrong Code #2
<table>
<div>
<tr>
<td>
</td>
</tr>
</div>
</table>
What you should do (put the whole table inside the UpdatePanel)
<div>
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>

Couldn't find updatepanel inside hidden div

I have an Updatepanel inside hidden Div, but I am getting "Could not find UpdatePanel with ID 'ctl00_ContentPlaceHolder_ctl04_UpdatePanel1'. I am trying to show and hide this panel from code behind. Thanks for any help. Here is my code.
<div id="div1" runat="server" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
you can only manipulate the the code inside the ContentTemplate from the updatepanel's postbacks, so the "div1"s display property can't be changed by the updatepanel's postbacks.
you could move the div inside the updatepanel and then it should work
I'd try this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" id="div1" runat="server" style="display:none">
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
<asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the client id of div1 will no longer be div1 (unless your using .net 4 in which case you can specify that it is'div1') you can fix this a variety of ways but basically you just need to add a little bit of javascript to the page that associates the actual WebControl.ClientID with 'div1'.

Resources