Pop up Panel, Postback problem - c#

I have a panel as a pop up
<asp:Panel ID="CreateGroupPanel" runat="server" BackImageUrl="~/Light-Gray-Suede1.jpg"
CssClass="style10" Visible="True"
style="position: absolute; left: 214px; top: 1262px; width: 588px; height: 467px">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" CssClass="style11" Text="Group Name*"
style="position: absolute; left: 63px; top: 92px; width: 88px; height: 19px; background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label4" runat="server" CssClass="style12" Text="Members*"
style="position: absolute; left: 67px; top: 278px; width: 66px; height: 19px; background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="style9"
Text="Groups | + Create group"
style="background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label6" runat="server" CssClass="style13"
style="background-image: url('Light-Gray-Suede1.jpg'); position: absolute; left: 63px; top: 130px; width: 80px; height: 19px;"
Text="Add user(s)*"></asp:Label>
<asp:TextBox ID="GroupName" runat="server" CssClass="style109"
style="position: absolute; left: 170px; top: 91px; width: 135px; height: 22px"></asp:TextBox>
<asp:Button ID="Create" runat="server" CssClass="style106"
onclick="Create_Click"
style="background-image: url('Light-Gray-Suede1.jpg')"
Text="Create Group" />
<asp:Button ID="Cancel" runat="server" CssClass="style107" Text="Cancel"
onclick="Cancel_Click"
style="background-image: url('Light-Gray-Suede1.jpg')" />
<asp:Button ID="Add" runat="server" CssClass="style108" OnClientClick="Add_Click"
style="background-image: url('Light-Gray-Suede1.jpg')"
Text="Add" />
<asp:ListBox ID="ListBoxMembers" runat="server" CssClass="style105"></asp:ListBox>
<asp:ListBox ID="ListBoxREmoved" runat="server" CssClass="style104"></asp:ListBox>
<asp:Button ID="Button1" runat="server" CssClass="style103"
onclick="Button1_Click" Text="Remove>>" />
<asp:Listbox ID="ListBoxAddMembers" runat="server" CssClass="style102"
DataSourceID="SurelyKnown" DataTextField="FirstName" DataValueField="FirstName"></asp:ListBox>
<asp:SqlDataSource ID="SurelyKnown" runat="server"
ConnectionString="<%$ ConnectionStrings:surelyknownConnectionString %>"
ProviderName="<%$ ConnectionStrings:surelyknownConnectionString.ProviderName %>"
SelectCommand="SELECT FirstName FROM tbl_user"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
When i click add button inside the panel to add values from list box to the text box, the panel gets post back because of the add button click and the pop up is closed because of that.(but when I again click the button to open popup the Add method is performed and the value is added) how to add values to text box from the list box without the pop up being closed

Try setting ChildrenAsTrigger="false" for the update panel and specifying explicit triggers.

If you haven't already, I would put the Panel and the ModalPopupExtender (assuming that you're using AJAX Toolkit) in an UpdatePanel, and as Bala R suggested try setting ChildrenAsTrigger to false.
Using an update panel, even if the button click event still causes the popup to close, you can reopen it in the button click event, and it will appear seamless to the user since it's all being done via Ajax.

Related

close iframe from another page after submit code behind

I have an a web application which have a button that will open an iframe form windows.
open.aspx is the button click
supervisor.aspx is the page open using iframe
the open.aspx
<div style="vertical-align: middle; text-align: center; left: 500px; width: 122px; position: absolute; top: 560px; height: 50px; z-index: 126; right: 889px; font-size: 50pt; font-family: Calibri; font-weight: bold;" id="uncheckbutton">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="UNCHECK" />
//this is the onclick button to open the iframe
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<iframe style=" width:400px; height: 150px;" id="irm1" src="Uncheck popup.aspx" runat="server"> </iframe>
<asp:button Top="100px" id="button2" runat="server" text="CLOSE" />
</asp:Panel>
and this is the supervisor.aspx(the iframe)
<asp:TextBox ID="inputid" runat="server" Font-Size="14px" ></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Uncheck" OnClick="btnCheck_Click" />
if the user enter the correct username, i want the iframe to automatically close.
this is my supervisor.aspx.cs
protected void btnCheck_Click(object sender,EventArgs e)
{
string uncheck = inputid.Text;
bool supervisor = Cls.GetUncheckSupervisor(uncheck);
if (supervisor==true)
{
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "Close", "window.close()",
.true);
}
else
{
Show("Wrong ID!");
}
if the supervisor is true, how can I automatically closed the iframe? for now I use a button click to close and I want to avoid less clicking.
I have try using javascript but the iframe still won't close although the function works.
I following this link How to close window after iframe form submits and also Close iFrame from another webpage + asp.net
thanks
I got guide from Yongqing Yu ( https://forums.asp.net/members/Yongqing%20Yu.aspx ) from asp.net that suggest me to create a js method on the iframe page, call the parent layer of the iframe page, then hide the ModalPopupExtender control and panel control.
Here is the thread
https://forums.asp.net/p/2162174/6287081.aspx?Re+Close+iframe+from+another+page+in+code+behind

Show asp.net Wizard Control SideBar on top instead of on side

I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.

Textchange Event not firing in update panel with ToolkitScriptManager using asp.net

here is my aspx code
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txt_newPayment" runat="server" Style="text-align: center" onblur="if(this.value=='')this.value=this.defaultValue;" value="0" onfocus="if(this.value==this.defaultValue)this.value='';" class="form-control"
Font-Bold="True" Font-Size="XX-Large" Height="50px" ontextchanged="txt_newPayment_TextChanged">0</asp:TextBox>
<asp:Label ID="Label5" runat="server" Text="Change: " Style="text-align: center;
font-size: 20px; color: black" Font-Bold="True"></asp:Label>
<asp:Label ID="lblChange" runat="server" Text="N/A" Style="text-align: center; font-size: 20px; color: green" Font-Bold="True"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txt_newPayment" EventName ="TextChanged"/>
</Triggers>
</asp:UpdatePanel>
the very problem is this code is not firing the textchange event in my c#
protected void txt_newPayment_TextChanged(object sender, EventArgs e)
{
}
It seems that, your code looks good and all the required tags were placed for update panel issue, but one small problem AutoPostBack="True" was missed in the above Textbox control. Just add this attributes to the textbox control it will surely trigger the event.
Hope it was useful,kindly share your thoughts or feedbacks
thanks
karthik

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

Can't update a second update panel

I have 3 updatepanels on my page and I want 2 of them to update when an event is fired. In one of the update panels I have an asp ReoderList.
<asp:UpdatePanel ID="upMain" UpdateMode="Conditional" runat="server" style="left: 0px; top: 0px; min-height: 100px; width: 495px; overflow: auto;">
<ContentTemplate>
<div class="reorderListDemo" style="position: relative; left: -41px; width: 490px; overflow: auto;">
<ajax:ReorderList ID="rlAlerts" Style="min-height: 100px; padding: 0px 6px 0px 0px;" Width="480px" runat="server" PostBackOnReorder="false" CallbackCssStyle="callbackStyle" DragHandleAlignment="Left" DataKeyField="ItemID" SortOrderField="Priority" OnItemReorder="rlAlerts_ItemReorder">
<ItemTemplate>
<%--set the class to inactiveAlert if the active flag is set to false--%>
<div id="alertItem<%# Eval("ItemID")%>" class="<%# Convert.ToBoolean(Eval("Active")) ? "" : "inactiveAlert" %>" onclick="updateAlertPreview('<%# Eval("ItemID")%>','<%# Eval("Priority")%>','<%# Eval("Title") %>','<%# Eval("Description") %>', '<%# Eval("StartDate") %>', '<%# Eval("EndDate") %>', '<%# Eval("Image") %>');">
<div style="position: relative; float: left; left: 10px; padding-top: 6px; overflow: hidden; width: 180px; height: 17px;">
<asp:Label ID="Label4" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' />
</div>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
</ReorderTemplate>
<DragHandleTemplate>
<div class="dragHandle">
</div>
</DragHandleTemplate>
</ajax:ReorderList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />
<asp:AsyncPostBackTrigger ControlID="ckbxShowInactive" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
Currently this update panel will update will either the items are reordered or the checkbox state changes.
Now I have this second updatePanel that isn't updating when the list is reordered.
<asp:UpdatePanel ID="UpdatePanelAlertOrderNotification" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lblOrderChangedNotification" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />
</Triggers>
</asp:UpdatePanel>
Here is my code behind:
protected void rlAlerts_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
.....
Session["AlertOrderChangedNotification"] = Resources.LocalizedText.Alert_Order_Changed;
lblOrderChangedNotification.Text = "AWESOME";
//lblOrderChangedNotification.DataBind();
//UpdatePanelAlertOrderNotification.Update();
}
I've stepped through the code and I can't figure out why it isn't working.
Things I have tired:
I have tired :
to set UpdatePanelAlertOrderNotification's UpdateMode to always.
to have UpdatePanelAlertOrderNotification's UpdateMode to Conditional, remove its triggers and have the code behind function update the
updatepanel directly.
to store the text in the session and when the page post fires to check if there is text in the session. I am able to step over this code in the pageLoad
function and it still doesn't do anything. (Tried with both lines commented out and then with only 1, then with none of them commented out.)
protected void Page_Load(object sender, EventArgs e)
{
if (Session["AlertOrderChangedNotification"] != null)
{
lblOrderChangedNotification.Text = Session["AlertOrderChangedNotification"] as string;
//lblOrderChangedNotification.DataBind();
//UpdatePanelAlertOrderNotification.Update();
}
}
I don't know if I'm having an issue because I have two update panels that have the same trigger (Even though
I tried removing it from UpdatePanelAlertOrderNotification and have it set to always.)
Changs:
So I tried to add a new button and get the updatepanel to update. This works. If I switch the triggers back to the reorder list it doesn't work. So My question is, Can I have 2 different updatePanels with the same trigger? IF I can't I should be able to have the broken one update by calling UpdatePanelAlertOrderNotification.Update()?? Ideas?
<div style="position: absolute; top: 195px; right: 10px; height: 100px; width: 120px; overflow: hidden;">
<asp:UpdatePanel ID="UpdatePanelAlertOrderNotification" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lblOrderChangedNotification" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<%--<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />--%>
<asp:AsyncPostBackTrigger ControlID="btnUpdateBrokenUpdatePanel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<div style="position: relative; top: 25px; left: 10px;">
<asp:Button ID="btnUpdateBrokenUpdatePanel" runat="server" CssClass="redButton" Width="300px" Height="25px" Text="Update Broken UPdatePanel" OnClick="btnUpdateBrokenUpdatePanel_Click" />
</div>
Any help would be awesome.
Thanks Brad
I'm guessing that you are having an issue with the update panels not getting proper notice, I would setup the wrapping one with a conditional trigger, and then have it call the update method on both of the other ones.
One thing you want to make sure of is that your code that actually updates the display of those items is executed as well.
The problem that you have is that the control rlAlerts is in the content template of the first update panel and when you define the asynchronous trigger in the 2nd updatepanel, it doesnt know about rlAlerts because it has been prepended with naming container from 1st updatepanel.
Try one of these approaches:
Take rlAlerts outside of the updatepanel, if that is possible
In the code behind for ItemReorder event handler to explicitly call UpdatePanelAlertOrderNotification.Update(). SOund like you have tried and it doesnt work, which is strange
Explicitly register the trigger from code behind for the 2nd updatepanel on prerender:
UpdatePanelAlertOrderNotification.Triggers.Add(new AsyncPostBackTrigger()
{ControlID = rlAlerts .UniqueID, EventName = "ItemReorder"});

Categories

Resources