Ajax Modal Popup Extender Mark Up on Child Page - c#

I've been researching for hours a demo of the AJAX Modal Popup Extender markup in a child page.
I'm trying to implement an ASP.NET LinkButton on the parent page in a Gridview column to fire the modal (the child page) and keep the UI markup separate.
Can someone please provide a code demo of this?

Put iframe inside panel and set src to your file:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="PanelX" TargetControlID="YourButtonID"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
<iframe style=" width: 410px; height: 190px;" src="YourChildPage.aspx" runat="server"></iframe>
<br/>
<asp:Button ID="btnClose" runat="server" ClientIDMode="Static" style="display:none"/>
</asp:Panel>

Related

"<!" character combination in ASP.NET textbox prevents postback

So this is very strange, and I haven't been able to find anything about it while searching.
I have an ASP.NET webforms app, and I am using the AJAX Control Toolkit's Modal Popup extender. Inside of this popup, I have a multi line textbox and some buttons. Both are ASP control. I have found that after entering the character combination "
Here is a picture of the dialog:
The dialog that won't work
And here is the markup for it:
<div id="notes" style="display: none">
<asp:UpdatePanel id="upnlNotesHeader" runat="server" class="logHeader">
<ContentTemplate>
<asp:Label ID="lblNotes" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<div class="logBody" style="height:200px">
<asp:UpdatePanel ID="upnlNotes" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hdnNotesJswo" runat="server" />
<asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" MaxLength="4000" Font-Names="Arial" Rows="12" Columns="62" style="margin: 5px 0 0 5px"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="logBtns">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnSaveNotes" runat="server" Text="Save" CssClass="logBtn" OnClick="btnSaveNotes_Click" />
<asp:Button ID="btnCancelNotes" runat="server" Text="Cancel" CssClass="logBtn" OnClick="btnCancelNotes_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Does anyone know why this is happening?
The problem comes from the request validation performed by ASP.NET when submitting the page. You can turn it off at the page level like this:
<%# Page ValidateRequest="false" ... %>
An alternative, if you want to keep the validation, is to encode the content of the fields before submitting the form to the server, and decode it in code-behind.

AJAX rating control inside update panel leads to reload the complete page

I have used AJAX Rating control for star rating. I am trying to achieve rating without page postback, therefore I placed inside update panel but still page is used to reload.
Below is aspx page code:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<cc2:Rating ID="Rating1" AutoPostBack="true" OnChanged="OnRatingChanged" runat="server"
StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar">
</cc2:Rating>
<div style="text-align: left; padding-right: 2px;">
<asp:Label ID="lblRatingStatus" runat="server" Text=""></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Change update mode of updatepanel from conditional to always and set ChildrenAsTriggers="True". Should work in your case.
Let me know if it doesn't work.

very simple c# submit button

I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.

ASP.NET Form Fields Not POSTing from colorbox

I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:
<form id="myform" runat="server" clientidmode="Static" method="post">
<asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
<asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/eCommerce.js" />
</Scripts>
</asp:ScriptManager>
<div style="width: 940px; margin-left: auto; margin-right: auto;">
<div align="left">
TOP OF THE PAGE
<asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
BOTTOM OF THE PAGE
</div>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
</script>
</form>
Here is some of the code from my main default page that uses the master page:
<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">
<asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
<asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<div class="add_product">
<div class="add_product_menu text_12_bold">
<asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
<asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static"
onchange="addProduct()">
</asp:DropDownList>
</div>
</div>
</asp:Panel>
<div class="clear"></div>
<!--- HERE IS THE COLORBOX POPUP CONTENT --->
<div style="display: none; visibility: hidden;">
<div id="inline_login">
<p><strong>User Login Details Go Here</strong></p>
User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
<input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />
</div>
</div>
</asp:Panel>
<asp:Label ID="xmlContent" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.
Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.
Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:
jQuery('#inline_login').appendTo('form');
Hope it helps someone else!
I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.
Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.
$(document).bind('cbox_complete', function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content
$(document).ready(function () {
$('#login-trigger').click(function () {
$.colorbox({
inline: true,
href: "#login-form",
close: "×",
onOpen: function () { $('#login-content').css({ display: 'block' }); },
onClosed: function () { $('#login-content').css({ display: 'none' }); }
});
return false;
});

How to automatically hide a modal popup control?

I have a model pop extender control like:
<cc1:ModalPopupExtender ID="basketPopUp" runat="server"
PopupControlID="Panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG"
TargetControlID="Panel1">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="PopupBody">
<b>Test</b>
<br />
</div>
</asp:Panel>
What i want is to show the popup for 5 seconds and HIDE it AUTOMATICALLY after this period of time.
I've tried this, but, running on the server side, of course it is not working:
public void showAndHidePopUp()
{
basketPopUp.Show();
System.Threading.Thread.Sleep(5000);
basketPopUp.Hide();
}
Do you know how to hide it in a proper way?
Thanks.
Edit:
For announcementes i've decided to use jGrowl-> http://www.stanlemon.net/projects/jgrowl.html
and not ModalPopUp Extender.
Try using a javascript timer, let the client handle it:
http://www.mcfedries.com/JavaScript/timer.asp
http://www.w3schools.com/js/js_timing.asp

Categories