I am working in C#.Net and Ajax Concepts. I am having 2 ModelPopup Extender in a page. I am also having 2 Buttons in that page. When i click the 1st Button 1 MP should be displayed and when i click the 2nd Button, 2nd MP should get displayed. This works fine for me for the first time. [i.e] When i click the 1st Button, 1st MP is displayed and When i click the 2nd Button, 2nd MP is displayed and once again if i click the 1st Button nothing happens.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="Button2">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button2" ToolTip="Location" runat="server" Text="Location(+)"
OnClientClick="LocClick();" />
<asp:Panel ID="Panel1" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="astvMyTree" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="divConsole" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel2"
TargetControlID="Button1">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button1" ToolTip="Product" runat="server" Text="Product(+)"
OnClientClick="ProdClick();" />
<asp:Panel ID="Panel2" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="ASTreeView1" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="div4" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I am just changing the back color of buttons in LocClick as well as ProdClick.
<script type="text/javascript">
function LocClick() {
var location = document.getElementById("<%= Button2.ClientID %>");
location.style.background = '#72BD66';
var product = document.getElementById("<%= Button1.ClientID %>");
product.style.background = '#065581';
var lastYear = document.getElementById('<%=chkLastYear.ClientID%>');
lastYear.checked = false;
}
How to fix this...
Related
Look in Gif and see the problem , when i type in textbox and search the result is fine after i click for other page the search condition lost
<head runat="server">
<title></title>
<link href="App_Themes/Theme1/CSS/Usual.css" rel="stylesheet" />
<link href="Table.css" rel="stylesheet" />
<style>
body
{
font-family: Poppins !important
}
input
{
font: unset !important
}
</style>
<script>
function UpdatePanel() {
__doPostBack("<%=TextBox1.ClientID%>", '')
}
</script>
<link href="App_Themes/Theme1/CSS/Bootstrap.css" rel="stylesheet" />
and body
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="table-b">
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<div class="tables">
<div class="table-search">
<asp:TextBox AutoCompleteType="None" ID="TextBox1" onkeyup="UpdatePanel()" AutoPostBack="false" OnTextChanged="TextBox1_TextChanged" CssClass="key" runat="server" placeholder="Search"></asp:TextBox>
<div class="line-1"></div>
<div class="line-0"></div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" RenderMode="Block" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="product_id">
<ItemTemplate>
<tr style="">
<td>
<asp:Label Text='<%# Eval("product_id") %>' runat="server" ID="product_idLabel" />
</td>
<td>
<asp:Label Text='<%# Eval("product_name") %>' runat="server" ID="product_nameLabel" />
</td>
<td>
<asp:Label Text='<%# Convert.ToInt32(Eval("list_price")).ToString("N0") %>' runat="server" ID="list_priceLabel" />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server" style="width: 100%; text-align: right">
<tr runat="server" class="thead">
<th runat="server">id</th>
<th runat="server">name</th>
<th runat="server">price</th>
</tr>
<tr runat="server" id="itemPlaceholder"></tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager runat="server" ID="DataPager1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
<asp:NumericPagerField></asp:NumericPagerField>
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"></asp:NextPreviousPagerField>
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:ProductConnectionString %>' SelectCommand="SELECT product_name, product_id, list_price FROM production.products"></asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</form>
and this is code behind
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
SqlDataSource1.SelectCommand = "SELECT product_name, product_id, list_price FROM production.products where product_name like '%" + TextBox1.Text + "%'";
SqlDataSource1.DataBind();
ListView1.DataBind();
}
I have planed to implement two pops in asp.net page. The First popup perform when the page button Click, and the Second popup perform when the first popup button click.
But When I Implement this in code, i got fist popup only. Can't got the second popup open.
ASPX Code-
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
function ShowModalPopup() {
$find("mp1").show();
return false;
}
function HideModalPopup() {
// alert("Yes");
$find("mp1").hide();
return false;
}
function ShowModalPopup1() {
$find("ModalPopupExtender1").show();
return false;
}
function HideModalPopup1() {
// alert("Yes");
$find("ModalPopupExtender1").hide();
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnPopup1" runat="server" Text="Fill Form in Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btnPopup1"
BehaviorID="modalPopupBehavior" CancelControlID="btnHide" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txt" runat="server" />
<asp:Label ID="Label2" Text="RED" runat="server" ForeColor="red" />
<asp:Button ID="Button2" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:CheckBox ID="CheckBox1" TextAlign="Left" Text="ssdd" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPopup1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
<!-- ModalPopupExtender 2 -->
<asp:Button ID="btnPopup2" runat="server" Text="Fill Form in Popup" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
TargetControlID="btnPopup2" BehaviorID="modalPopupBehavior" CancelControlID="btnHide1"
BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="Popup" align="center" Style="display: none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Label ID="Label1" Text="Blue" runat="server" ForeColor="Blue" />
<asp:Button ID="Button4" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:CheckBox ID="CheckBox2" TextAlign="Left" Text="ssdd" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPopup2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnHide1" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup1()" />
</asp:Panel>
<!-- ModalPopupExtender 2 -->
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
</body>
C# Code -
protected void btnSubmit_Click(object sender, EventArgs e)
{
Label2.Text = "Blue";
}
protected void btnClose_Click(object sender, EventArgs e)
{
}
This link might be of good use to you.
http://aspdotnetcodebook.blogspot.com.au/2009/03/how-to-open-modalpopup-inside.html
Also to have a modal pop up over another modal popup you need to set the z-index otherwise there are chances that the 2nd popup might hide behind the 1st. The following are the links which explains the same.
How to show a modal pop up above other modal pop up
http://blogs.msdn.com/b/codejunkie/archive/2009/06/23/multiple-modal-popups-and-z-index.aspx
http://tiredblogger.wordpress.com/2008/07/24/layering-modal-popups-using-css-z-index/
http://forums.asp.net/p/1280547/2458840.aspx#2458840
Hope this helps.
Please take a look on below url.
http://www.codeproject.com/Articles/546817/ASP-NET-Popup-Control-Displaying-as-multiple-neste
I have a webpage that is setup like so:
There is a ListView that has an item for each record in one of our SQL tables. Each of these items has a CollapsiblePanel in it that can be expanded to show more detail about the given record.
My Issue:
When I expand one panel and then wait for it to complete...everything is okay. However, if I try to expand multiple of those collapsiblepanels at once (meaning before the first panel is completely expanded)...only the last panel expands showing its data.
My Question:
Is it possible to have each of these panels expand asynchronously? Seems silly that I have to wait for one panel to extend before I can extend another.
My aspx:
I modified this aspx a little bit by removing unneeded code to make it less confusing.
<asp:UpdatePanel ID="UpdPnlBGList" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<div class="content-box">
<asp:Panel ID="pnlBGResult" runat="server">
<asp:ListView ID="lvSummary" runat="server" ItemPlaceholderID="placeholderBGList"
OnItemDataBound="lvSummary_ItemDataBound" OnItemCommand="lvSummary_ItemCommand">
<LayoutTemplate>
<table runat="server" id="tblList" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
<tr id="placeholderBGList" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>
<asp:UpdatePanel ID="UpdBgItemTemplate" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<div class="bgList">
<asp:Panel ID="pnlSummary" runat="server">
<table id="tblBgList" runat="server" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;
border-spacing: 0px;">
<tr>
<td class="imageColumn">
<asp:ImageButton ID="imgCollapsible" CssClass="first" ImageUrl="~/Images/branding/plus.gif"
runat="server" CommandName="ExpandCollapse" Style="cursor: pointer; padding-right: 5px;" />
</td>
<td width="600px">
<asp:Label ID="lblBGName" runat="server" Text='<%# Eval("BGName")%>' CssClass="bgName"></asp:Label>
<asp:Label ID="lblDatePosted" runat="server" CssClass="datePosted"></asp:Label>
</td>
<td colspan="2">
<div style="float: right;">
<asp:Label ID="lblAccountNumber" runat="server" CssClass="accountReview"></asp:Label>
<asp:Label ID="lblAccountNumberText" runat="server" CssClass="accountReview"></asp:Label>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td width="600px">
<asp:Label ID="lblBillToAddress" runat="server" Text='<%# Eval("BillToAddress")%>'
CssClass="billToAddress" Style="font-weight: bold;"></asp:Label>
</td>
<td>
<div style="float: right;">
<asp:ImageButton ID="imgViewAuthLetter" ImageUrl="~/Images/branding/document.jpeg"
CssClass="first" runat="server" OnClick="imgViewAuthLetter_Click" />
<asp:LinkButton ID="lnkAuthorizationLetter" runat="server" Text="View authorization letter"
class="link_button" OnClick="lnkAuthorizationLetter_Click" OnClientClick="dirtySuppress();"
OnPreRender="addTrigger_PreRender" />
</div>
</td>
<td width="70px" style="float: right;">
<div style="float: right;">
<asp:HyperLink ID="lnkExportImage" runat="server" ImageUrl="/Images/branding/export.jpg"
CssClass="hiperlinkExport" OnClick="dirtySuppress();" />
<asp:HyperLink ID="lnkExportText" runat="server" Text="Export" CssClass="hiperlinkExport"
OnClick="dirtySuppress(); precheckURL(this.href); return false;" />
</div>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0px;">
<asp:Panel Style="margin-left: 50px;" ID="pnlDetails" runat="server">
<of:AccountNumberListControl ID="accountNumberList" runat="server"></of:AccountNumberListControl>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlDetails"
CollapsedSize="0" Collapsed="True" ExpandControlID="imgCollapsible" CollapseControlID="imgCollapsible"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" ImageControlID="imgCollapsible"
ExpandedImage="~/Images/branding/minus.gif" CollapsedImage="~/Images/branding/plus.gif"
ExpandDirection="Vertical" />
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3" style="padding: 0px;">
<div class="itemSeperator" id="divItemSeperator" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:HiddenField ID="hdfAccountNumberListControlID" runat="server" Value="" />
<asp:HiddenField ID="hdfAccountNumerID" runat="server" Value="" />
</asp:Panel>
</div>
<of:CustomerSetupExportPopInControl ID="customerSetupExportPopIn" runat="server" />
</ContentTemplate>
My codebehind:
This is the code that is executed when you expand the panel. There are several controls that is populated.
private void ExpandBillingGroup(ListViewDataItem item)
{
Label accountNumberLabel;
Label accountNumberText;
HtmlControl itemSeperator;
AccountNumberListControl accountNumberList;
// set properties for fedex account number label and text.
accountNumberLabel = (Label)item.FindControl("lblAccountNumber");
accountNumberLabel.Text = "FedEx account number: ";
accountNumberLabel.CssClass = "fedExAccountNumberLabel";
accountNumberText = (Label)item.FindControl("lblAccountNumberText");
accountNumberText.Text = lvSummary.DataKeys[item.DisplayIndex].Values["FedExAccountNumber"].ToString();
accountNumberText.CssClass = "fedExAccountNumberText";
//set the properties for Export
var lnkExportImage = (HyperLink)item.FindControl("lnkExportImage");
lnkExportImage.Visible = true;
var lnkExportText = (HyperLink)item.FindControl("lnkExportText");
lnkExportText.Visible = true;
//When expanded populate Customer Setup Export control
customerSetupExportPopIn.BillingGroupID = lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString();
//When expanded populate AccountNumberlistControl
accountNumberList = (AccountNumberListControl)item.FindControl("accountNumberList");
if (accountNumberList != null)
{
//since we make the AccountNumberListControl not visible on collapse we have to make it visible when we expand
accountNumberList.Visible = true;
//Set the properties
accountNumberList.BillingGroupID = lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString();
accountNumberList.FedExAccountNumber = lvSummary.DataKeys[item.DisplayIndex].Values["FedExAccountNumber"].ToString();
accountNumberList.BillingGroupName = ((Label)lvSummary.Items[item.DisplayIndex].FindControl("lblBGName")).Text;
accountNumberList.BillToAddress = ((Label)lvSummary.Items[item.DisplayIndex].FindControl("lblBillToAddress")).Text;
accountNumberList.FirstItemNeedsToExpand = BillingGroupIsResolved;
accountNumberList.GetListOfAccountNumbers(lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString(), VendorID);
}
//set the properties for itemSepeartor
itemSeperator = (HtmlControl)item.FindControl("divItemSeperator");
itemSeperator.Attributes.Add("class", "itemSeperatorExpanded");
UpdatePanel upd = (UpdatePanel)item.FindControl("UpdBgItemTemplate");
upd.Update();
}
Thanks,
Holt
EDIT: Fixed grammar and title issues
I am working on a webform which has two UpdatePanels; one inside UserControl and other inside the main page. When the pager user-control (< 1 2 3 >) of Main page is invoked it shows the corresponding UpdateProgress of 'Latest News' Section but also shows the Progress Bar of 'Subscribe' User-control.
I tried to change the properties but it keeps on coming; if I keep UpdateMode="Conditional" for user control then progress bar goes in loop and show continuously.
How can I make changes to this code to show only corresponding progress bar. I have looked over 50 example but nun seems to be matching. I would appreciate if someone can help me to get this fixed.
<!-- LatestNewArea -->
<div class="LatestNewArea">
<asp:UpdatePanel ID="updLatestNews" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptLatestNews" runat="server" EnableViewState="False" onitemdatabound="rptLatestNews_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hylLatestNews" CssClass="chylLatestNews" runat="server" NavigateUrl=''>
<div class="LatestNewsWrapper">
<div class="LatestNewsDateBox">
<div class="LNYYYY">
<asp:Label ID="lblYYYY" runat="server" Text="2012"></asp:Label>
</div>
<div class="LNDDMM">
<asp:Label ID="lblDDMM" runat="server" Text="12/08"></asp:Label>
</div>
</div>
<div class="LatestNewsTitle">
<asp:Label ID="lblLatestNewsTitle" runat="server" Text="First News for the Website"></asp:Label>
</div>
<div class="LatestNewsHDate">
<asp:Label ID="Label1" runat="server" Text="Hijri: 15 Rajab 1433"></asp:Label>
</div>
<div class="LatestNewsDesc">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="LNHLine"> </div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
<!-- Pager -->
<div class="LatestNewsPagerWrapper">
<div class="LatestNewsPagerInnerWrapper">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="updLatestNews" >
<ProgressTemplate>
<div id="imgLoadingArticleList" class="imgLoadingArticleList">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/images/ajax-loader-bar2.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
</div>
</div>
<!-- Pager -->
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- LatestNewArea -->
User Control Page Code
<script type="text/javascript">
function onUpdating() {
// get the divImage
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
function onUpdated() {
// get the divImage
var panelProg = $get('divImage');
// set it to invisible
panelProg.style.display = 'none';
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0">
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="updSubscribe" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="onUpdating();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="false" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onUpdated();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</td>
</tr>
</table>
</td>
</tr>
</table>
I tried many solution but non of them worked in a proper way. Finally i decided to replace UpdatePanelAnimationExtender of user control with UpdateProgress as I was able to trap the initiating UpdatePanel for AsyPostback
For some reason i was not able to trap AsyPostback when i used UpdatePanelAnimationExtender
BELOW IS A WORKING CODE
// Function to hide control on update
function onUpdateOfSubscribe() {
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
//Code to track the initiating event so to associate updateprogress
var currentPostBackElement;
function pageLoad() {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
}
//On OnInitializeRequest
function OnInitializeRequest(sender, args) {
var manager = Sys.WebForms.PageRequestManager.getInstance();
currentPostBackElement = args.get_postBackElement().parentElement;
var cmdAuthoriseButton = '<%= btnSubscribe.ClientID %>';
if (cmdAuthoriseButton == args._postBackElement.id) {
// Show UpdateProgress for subscribe
onUpdateOfSubscribe();
}
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0" >
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubscribe" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updSubscribe" >
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</td>
</tr>
</table>
I made a pop control on the master page in asp.net 3.5
please see the following code:
Main.master aspx code:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server"
style="display:none; background-color:White; width:700;
border-width:2px; border-color:Black; border-style:solid;
padding:20px;">
<table width="100%" border="0" cellpadding="2" cellspacing="5">
<tr>
<td><asp:Label id="labMsg" runat="server" ForeColor="Red"EnableViewState="false" />
</td>
</tr>
<tr>
<td>
<strong>Login ID :</strong>
<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td><strong>Password :</strong>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnOk" runat="server" Text="Sign In" onclick="Login" />
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="defaultPanel" CssClass="Default_Panel" runat="server" Visible="true">
<ul><li><asp:LinkButton ID="lnkSignIn" class="last" runat="server" Visible="true" Text="sign in"></asp:LinkButton>
<asp:LinkButton ID="lnkSignOut" class="last" runat="server" Visible="false" Text="sign out"></asp:LinkButton>
</li>
</ul>
<!-- Login Pop Ajax Control Tool Kit -->
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1"
runat="server" TargetControlID="lnkSignIn"
DisplayModalPopupID="ModalPopupExtender1">
</ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
CancelControlID="btnClose" OkControlID="btnOk"
PopupControlID="Panel1"
TargetControlID="lnkSignIn">
</ajaxToolkit:ModalPopupExtender>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Main.master.cs code:
public void Login(object sender, EventArgs e)
{
// return "Login Successfull";
labMsg.Text = "Login Successfull";
}
Problem:
When login button is pressed[from Default.aspx or from any other child page] it don't hit the Login method on the master page. Help is appreciated.
I have managed to solve the problem here is the code:
Master.master:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="defaultPanel" CssClass="Default_Panel" runat="server" Visible="true">
<ul id="loginLinks">
<li><asp:LinkButton ID="lnkSignIn" class="last" runat="server" Visible="true" Text="sign in"></asp:LinkButton></li>
</ul>
<!-- Login Pop Ajax Control Tool Kit -->
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnClose" PopupControlID="pnlSignIn" TargetControlID="lnkSignIn"></ajaxToolkit:ModalPopupExtender>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlSignIn" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table width="100%" border="0" cellpadding="2" cellspacing="5">
<tr>
<td style="width: 35%; padding-top: 50px;">
</td>
<td>
<asp:Label ID="labMsg" runat="server" ForeColor="Red" EnableViewState="false" />
</td>
</tr>
<tr>
<td align="right" valign="middle">
<strong>Login ID :</strong>
</td>
<td>
<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" valign="middle">
<strong>Password :</strong>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnOk" runat="server" Text="Sign In" OnClick="btnOk_Click" />
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Note: 2 update panels now, removed confirmbuttonextender.
I really don't know why the login method wasn't hitting before and how come it's working now.
Master.master.cs:
protected void btnOk_Click(object sender, EventArgs e)
{
var name = txtLogin.Text;
var pwd = txtPassword.Text;
DataSet ds = new DataSet();
string userName = name;
string pwdBeforeConversion = pwd;
//Encryption of pasword
SHA1CryptoServiceProvider x = new SHA1CryptoServiceProvider();
byte[] data = Encoding.ASCII.GetBytes(pwdBeforeConversion);
data = x.ComputeHash(data);
//pass the data to service, and get a return as dataset
try
{
somelogic here
}
catch (Exception ex3)
{
if (ex3.Message == "InvalidUsernameOrPassword")
labMsg.Text = "sorry user name and password could not be found";
else if (ex3.Message == "EmailNotVerified")
labMsg.Text = "please contact ta; email is not verified";
else if (ex3.Message == "AccountDisabled")
labMsg.Text = "please contact ta; account is not verified";
else
labMsg.Text = "sorry we encounterd a techncal issue, please try logging in again";
ModalPopupExtender1.Show();
return;
}
}