I have an ASCX-Control which indecates an Timer, a Label and an updatepanel.
My Timer is not in the Updatepanel.
Every 5 seconds the timer is ticking and read data out of mysql-DB to count the number of new messages and write the number in an label.
In my ASPX Page I embedded the ASCX-Control. The Control is outside of an updatepanel in my ASPX-Page. When the timer in the ASCX-Control is Ticking, the Page is doing an Postback. The problem is, we lose the focus of the current control.
Heres the ASCX-Control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="badgeIcon.ascx.vb" Inherits="Test.badgeIcon" %>
<link href="css/badgeIcon.css" type="text/css" rel="stylesheet" />
<asp:UpdatePanel ID="upMsg" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divIconMsg" runat="server">
<asp:ImageButton ID="iconMsg" runat="server" ImageUrl="~/Resources/iconErinnerung.svg"></asp:ImageButton>
<div id="divMsgCount" runat="server" Visible="false">
<asp:Literal ID="cntMsg" runat="server" Text='0' />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="tiTimer" runat="server" Interval="5000"></asp:Timer>
ASPX-Page indicates ASCX-Control:
<asp:UpdatePanel ID="upSuche" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="suche" runat="server">
<div id="divImgSuche" runat="server">
<asp:ImageButton ID="imgSuche" runat="server" ImageUrl="~/Resources/IconSuche.svg"></asp:ImageButton>
</div>
<asp:TextBox ID="tbSuche" runat="server" placeholder="Suche"></asp:TextBox>
<div id="divImgSucheClear" runat="server">
<asp:ImageButton ID="imgSucheClear" runat="server" ImageUrl="~/Resources/btnclose.svg"></asp:ImageButton>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
// ASCX-Control with Timer
<uc1:badgeIcon runat="server" id="badgeIcon" />
tbSuche in ASPX-Page loses the focus.
Hope you can help me, thanks.
Related
I am working on a web application (IIS) targeting .NET 4.0 using Visual Studio 2015.
I have an .aspx that contains 4 usercontrols (.ascx). When one of the usercontrols posts back the main .aspx AND the other three usercontrols also do a postback.
I'm looking for a way to prevent the other usercontrols from doing a postback when one of them does.
I've tried putting each of the usercontrols within an updatepanel (code below). I've tried putting an updatepanel within each usercontrol. I've tried changing the ChildrenAsTriggers and UpdateMode properties. I've tried creating a Click event in each usercontrol that's raised when the items within the usercontrol post back (example on just one of the usercontrols below).
No matter what, the page and all four usercontrols all do a postback every time one of them does.
Main .ASPX:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%# Register TagPrefix="uc1" TagName="Components" Src="Components.ascx" %>
<%# Register TagPrefix="uc2" TagName="Options" Src="Options.ascx" %>
<%# Register TagPrefix="uc3" TagName="Settings" Src="Settings.ascx" %>
<%# Register TagPrefix="uc4" TagName="Menu" Src="Menu.ascx" %>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"></cc1:ToolkitScriptManager>
<asp:Panel ID="pnlComponents" runat="server">
<asp:UpdatePanel ID="updpnlComponents" runat="server">
<ContentTemplate>
<uc1:Components id="Components" runat="server"></uc1:Components>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlOptions" runat="server">
<asp:UpdatePanel ID="updpnlOptions" runat="server">
<ContentTemplate>
<uc2:Options id="Options" runat="server" CssClass="jQTrackChanges"></uc2:Options>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlSettings" runat="server">
<asp:UpdatePanel ID="updpnlSettings" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Settings" EventName="Click" />
</Triggers>
<ContentTemplate>
<uc3:Settings id="Settings" runat="server" CssClass="jQTrackChanges"></uc3:Settings>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlMenu" runat="server">
<asp:UpdatePanel ID="updpnlMenu" runat="server">
<ContentTemplate>
<uc4:Menu id="Menu" runat="server" CssClass="jQTrackChanges"></uc4:Menu>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Settings.ascx.vb:
Private Sub chkIn_CheckedChanged(sender As Object, e As EventArgs) Handles chkIn.CheckedChanged
RaiseEvent Click(Me, e)
End Sub
Private Sub chkOut_CheckedChanged(sender As Object, e As EventArgs) Handles chkOut.CheckedChanged
RaiseEvent Click(Me, e)
End Sub
Public Event Click As EventHandler
Edit - adding AutoPostBack=false and UpdateMode=Conditional has no effect. All four usercontrols still post back when one does.
Updated main .ASPX:
<asp:Panel ID="pnlOptions" runat="server" AutoPostBack="false">
<asp:UpdatePanel ID="updpnlOptions" runat="server" UpdateMode="Conditional" AutoPostBack="false">
<ContentTemplate>
<uc2:Options id="Options" runat="server" AutoPostBack="false" CssClass="jQTrackChanges"></uc2:Options>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlSettings" runat="server" AutoPostBack="false">
<asp:UpdatePanel ID="updpnlSettings" runat="server" UpdateMode="Conditional" AutoPostBack="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Settings" EventName="Click" />
</Triggers>
<ContentTemplate>
<uc3:Settings id="Settings" runat="server" AutoPostBack="false" CssClass="jQTrackChanges"></uc3:Settings>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlMenu" runat="server" AutoPostBack="false">
<asp:UpdatePanel ID="updpnlMenu" runat="server" UpdateMode="Conditional" AutoPostBack="false">
<ContentTemplate>
<uc4:Menu id="Menu" runat="server" AutoPostBack="false" CssClass="jQTrackChanges"></uc4:Menu>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Please use autopostback property from properties window.change it's default behavior true or false and try again.
We eventually gave up and used Javascript to replace as much of the postback activity as possible to minimize the number of postbacks that happen.
I have 2 user control. 1 User control inside other user control
User Control 2
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Uc2.ascx.cs" Inherits="Wrapsons.WebApp.UserControls.UcSeason" %>
<asp:Button ID="BtnTest" runat="server" OnClick="BtnTest_OnClick" Text="Test"/>
User Control 1
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Uc1.ascx.cs" Inherits="Wrapsons.WebApp.UserControls.UcSeason" %>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadWindow ID="RadWindow" runat="server">
<ContentTemplate>
<uc1:Uc2 ID="Uc2" runat="server" />
</ContentTemplate>
</telerik:RadWindow>
</ContentTemplate>
</asp:UpdatePanel>
In Test.aspx Uc1 is used
When I click on Test Button, RadWindow is closed.
Is there any way to avoid the postback?
Thank you in advance!
Here is how to use AJAX properly with the ContentTemplate: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html
and here is your snippet, modified:
<telerik:RadWindow ID="RadWindow" runat="server">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<uc1:uc2 id="Uc2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</telerik:RadWindow>
Also, go through this one if you need to open/close the window from your server code: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-opening-from-server.html
I have a web application where I'm trying to use a user control with an UpdatePanel so that the control can be updated on the web page using a partial postback.
I have defined the ScriptManager in the Master page for the site. It is place outside of the ContentPlaceHolder but inside the form tag for the body as represented below:
<head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<form runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
In the content page I have some HTML that using inline server tags to bind to data and a user control that contains the UpdatePanel as represented below:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="ClientDetail.aspx.cs" Inherits="ClientDetail" Async="true" %>
<%# Register src="../controls/ListSelectionControl.ascx" tagname="ListSelectionControl" tagprefix="lsc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<link href="<%= ResolveClientUrl("~/css/clientdetail.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div>
Client: <%= this.CurrentClient.Id %> - <%= this.CurrentClient.Name %>
</div>
<div>
<lsc:ListSelectionControl ID="ItemsListSelectionControl" runat="server" />
</div>
</asp:Content>
The UpdatePanel in the user control includes a couple of listboxes and buttons to move items from one list to another. The buttons are registered as AsyncPostbackTriggers and are marked as CauseValidation="false" to prevent the validators in other parts of the page from firing. The UpdatePanel is represented below:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ListSelectionControl.ascx.cs" Inherits="ListSelectionControl" %>
<div>
<asp:UpdatePanel ID="udpListSelection" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnRemove" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnAddAll" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnRemoveAll" EventName="Click" />
</Triggers>
<ContentTemplate>
<div>
<asp:ListBox ID="lstAvailableItems" runat="server" SelectionMode="Multiple" Rows="15" />
</div>
<div>
<asp:Button ID="btnAdd" CausesValidation="false" runat="server" OnClick="AddItems" Text="Add >" />
<asp:Button ID="btnRemove" CausesValidation="false" runat="server" OnClick="RemoveItems" Text="< Remove" />
<asp:Button ID="btnAddAll" CausesValidation="false" runat="server" OnClick="AddAllItems" Text="Add All >" />
<asp:Button ID="btnRemoveAll" CausesValidation="false" runat="server" OnClick="RemoveAllItems" Text="< Remove All" />
</div>
<div>
<asp:ListBox ID="lstSelectedItems" runat="server" SelectionMode="Multiple" Rows="15" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The code behind on the buttons simply manages the exchange of the data between the list boxes and I don't believe it's relevant here.
The problem that I'm having is that when the partial postback occurs (breakpointing the code in the Master page and analysing the IsInAsyncPostback property determines that it is a partial postback) the page is processing the inline ASP server code and failing because the CurrentClient object is not being re-populated. I'm looking to understand why this is happening and why the partial postback is not simply updating my UpdatePanel as I expected?
Thank you for your assistance.
Richard
I regretfully have to inform you of some bad news... update panels have a lot of issues inside of UserControls... hopefully you can find some sort of work around.
i'm kinda new in web programming,
i'm trying to design a search page.
i want to creating few radio buttons where each click on a radio button will show a div
contains the related search div's.
and from there to do the query to the database(not related to the post)
how can i do that ?
tried to search for it , and didn't get good answer.
i want that the change of the page will be in server side and not the client side.
p.s.
i have been working with ajax control kit so far..
thanks for the help.
You just need an UpdatePanel, radio buttons and a MultiView control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ...
<asp:RadioButton ...
</div>
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1">
<asp:View ID="vwFirst" runat="server">
</asp:View>
<asp:View ID="vwSecond" runat="server">
</asp:View>
...
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
When the selected radio button changed you just set the View related to be active,
mvAll.SetActiveView(ViewIDYouNeed);
You can accomplish this with Panels and an Update Panel.
<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" />
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdo1" />
<asp:AsyncPostBackTrigger ControlID="rdo2" />
</Triggers>
</asp:UpdatePanel>
You would then handle setting the Visible property of the panels in your ShowDivs method in your code behind.
Or, you could use jquery/javascript to accomplish this.
<input type="radio" onClick="ShowDiv(1)" />
function ShowDiv(id) {
HideDivs();
$(id).show('slow');
}
I have UserControl and within that control i have asp:ListView. Inside the ListView i have a asp:LinkButton. When i click on the LinkButton the control raises full postback, no matter if the UserControl is inside UpdatePanel or is not.
UserControl:
<asp:ListView ID="lvImages" runat="server" OnItemCommand="lvImages_ItemCommand">
<ItemTemplate>
<div>
<asp:Image runat="server" ID="imgImageThumb" ImageUrl='<%#Eval("Image") %>' GenerateEmptyAlternateText="true" />
<asp:LinkButton runat="server" ID="lbtnImageAdd" CommandName="Add" CommandArgument='<%#Container.DisplayIndex %>'
CausesValidation="false" Text="Add" />
</div>
<ItemTemplate>
</asp:ListView>
Page:
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<cuc:UserControl ID="cucUserControl" runat=server/>
</ContentTemplate>
</asp:UpdatePanel>
You need to set the properties to let the update panel know what to trigger off of. Try setting ChildrenAsTrigger=true.