I'm new to ASP.NET and I'm trying to get this Ajax ModalPopupExtender working. This is an example i found on the net, but nothing happens when btnpopup is clicked.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalTestProject._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:Button ID="btnpopup" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup"
CancelControlID="btnCancelpopup" EnableViewState="true" DropShadow="true" />
<asp:Panel ID="pnlpopup" runat="server" Width="400px">
test
<asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>
</form>
</body>
</html>
You are missing the PopupControlID="pnlpopup"
Try using ToolkitScriptManager instead of ScriptManager:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="atk" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<style type="text/css" media="screen">
#import url("../css/Main.css");
</style>
<script type='text/javascript' src="../js/jquery-1.7.1.min.js"></script>
</head>
<body class="template">
<form id="form1" runat="server">
<atk:ToolkitScriptManager ID="ScriptManager1"
runat="server" EnableScriptGlobalization="True">
</atk:ToolkitScriptManager>
Make sure your project references 'AjaxControlToolkit.dll'
Make sure your web.confog contains the following section:
<controls>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
...
</controls>
Try wrapping the entire thing in an UpdatePanel like so:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnpopup" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup"
CancelControlID="btnCancelpopup" EnableViewState="true" />
<asp:Panel ID="pnlpopup" runat="server">
test
<asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have never ever ever been able to make the popup extender work! Never, regardless of how simple or basic the page or example is, period!
Even this most basic example will not work! Yes, the tool kit is installed! When the button is pressed, nothing happens!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:Button ID="btnpopup" runat="server" Text="Button" />
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup"
CancelControlID="btnCancelpopup" EnableViewState="true" DropShadow="true" />
<asp:Panel ID="pnlpopup" runat="server" Width="400px">
test
<asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>
</form>
</body>
</html>
I've wasted more time with this thing then anyone ever should spend! I've made my own custom popup extender which works flawlessly!
I think you are missing the Register directive. You should add something like
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
after the
`<%# Page ... %>' directive
I have the same problem, and I have ScriptManager inherited from Master page.
Everything doesn't work, if I reverse the control, which means PopUpControlID=btnpopup and TargetControlID=pnlpopup, then it would work, and with DropShadow=True, the btnpopup would have a dropshadow effect. I wonder why the reverse logic for modalpopup works for button and not for panel?
Please note that inherited ScriptManager from Master Page won't work, if you put a single ScriptManager on your page itself, it will work fine.
Cheers!
You can show the popup panel with javascript. I'm not sure if there's any other way, but this works like a charm. I used it for a comment control I created.
function show_panel() {
$find('popup_panel').show();
return false;
}
The control to fire the event:
<input id="btnReply" type="button" class='comment-reply' onclick="show_panel();"
value="reply" runat="server" />
And lastly, the popup extender and the popup panel. Just change the cc1 prefix to whatever you're using, eg. asp, ajaxtoolkit, etc.
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
CancelControlID="CancelButton" BehaviorID="popup_panel"
TargetControlID="Hidden1" PopupControlID="PopupReplyPanel"
BackgroundCssClass="modalBackground" DropShadow="true" >
</cc1:ModalPopupExtender>
<asp:Panel ID="PopupReplyPanel" class="popup-panel" runat="server">
<div class="popup-panel">
Your popup panel
<span class="ok-cancel-btns">
<input id="Hidden1" type="hidden" runat="server"/>
<asp:Button ID="okButton" runat="server" Text="Post Comment" />
<input id="CancelButton" type="button" value="Cancel" />
</span>
</div>
</asp:Panel>
Here's the styles I used, you'll obviously need to change some of them to suit your needs.
<style>
/*Modal Popup Styles*/
.modalBackground{background-color:black;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
.popup-panel{padding:5px 5px 20px 5px;background-color:#f7f3ef;}
.ok-cancel-btns{padding-top:10px;float:right;}
.ok-cancel-btns input{margin-left:10px;text-align:right;}
</style>
Related
before i was using ScriptManager in the master page. and when i was running main page i had not any problem.
now i have decided to add combo box to main page , so i should add ToolkitScriptManager to the master page.
because of error , i removed ScriptManager of the master page but now my main page has completely post back and slow, how i can have both of them in the master page without error.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlProjectDocument" runat="server" Height="16px" AppendDataBoundItems="True"
Width="212px" onselectedindexchanged="ddlProjectDocument_SelectedIndexChanged"
AutoPostBack="True" onload="ddlProjectDocument_Load"
style="font-family: 'Courier New', Courier, monospace" >
<asp:ListItem Selected="True" Value="0">(select a value)</asp:ListItem>
</asp:DropDownList>
<br />
<ajaxtoolkit:ComboBox ID="ComboBox1" runat="server" onload="ComboBox1_Load"
AutoCompleteMode="Suggest"
style="font-family: 'Courier New', Courier, monospace" >
</ajaxtoolkit:ComboBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ddlProjectDocument" />
</Triggers>
</asp:UpdatePanel>
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterAdmin.master.cs" Inherits="MasterAdmin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 40%;
font-size:large;
}
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxtoolkit:toolkitscriptmanager ID="ToolkitScriptManager1" runat="server">
</ajaxtoolkit:toolkitscriptmanager>
1.Use <asp:toolkitscriptmanager> in master page instead of <scriptmanager>.
2.Remove <asp:toolkitscriptmanager> from your content pages as only one script manager can exist at an instance.
Hope this helps.
I want to use ajax ModelpopupExtender control in my .aspx page in visual studio 2010. When user clicks any button,It should open popup like facebook opens popup to show photos. That means pop up should get opened in such a way that it should disable the background until closed button is clicked of that popup. How to open page or panel or any other thing in that popup. Please mention clear steps. I dont have even bit of idea how to do this?
Thanks in advance...
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Model PopUp Extender With MouseOver Example</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function MouseHover()
{
$find("modelPopupExtender1").show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="toolKitScriptManager1"
runat="server">
</ajaxToolkit:ToolkitScriptManager>
<p style="background-color: #9999FF; width: 95%;">
Example of using a ModalPopupExtender with with Mouse Over
<br/></p><br/>
Hover over the hyperlink
<asp:HyperLink ID="HyperLink1" runat="server"
onmouseover="MouseHover();"
Font-Underline="True" ForeColor="Blue">
<b>Mouse Over Here to Open PopUp</b>
</asp:HyperLink> to open pop up
<ajaxToolkit:ModalPopupExtender runat="server"
BehaviorID="modelPopupExtender1"
TargetControlID="HyperLink1"
PopupControlID="popUpPanel"
OkControlID="btnOk"
BackgroundCssClass="modalBackground" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server"
CssClass="confirm-dialog">
<div class="inner">
<h2>
Thanks For Visiting This Site</h2>
<div class="base">
<asp:Button ID="btnOk" runat="server" Text="Ok"/>
<asp:LinkButton ID="LinkButton1" runat="server"
CssClass="close"
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
</div></div>
</asp:Panel>
</div>
</form>
</body>
</html>
BackgroundCssClass="modalBackground" did you notice this line this is where you define the css for the background.
I think this should work.
Reference
Using this code, I can get a very cheesy red lettered message.
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage="Please enter your name!" runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
Is there some way for me to have a green icon (I have that image so I imagine I just have to reference it) sort of fade into existence beside the control?
Thanks a bunch. :)
You set the ErrorMessage property to a link to an image
e.g. ErrorMessage='<img src="error.gif">'
See this MSDN article.
You can do this
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
BorderStyle="None" ControlToValidate="TextBox1" CssClass="newStyle1"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
.newStyle1
{
background-image: url('Pic.png');
width: 500px;
height: 300px;
}
So basically just don't have any text for the error message and set the css property in the validation controls to have a css class.
TGIF,
I have a website I'm developing which is using ASP.NET masterpage/sitemap/content pages setup. I hate the "blinking" the site does when navigating between content pages using the asp:menu control. Any suggestions on how to use jQuery ajax instead of AJAX.NET updatepanels? I've used updatepanels in the past and I hate it; clunky and bloated.
Here's the code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="styles/master.css" rel="stylesheet" type="text/css" />
<title>Impeccable Construction Service</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />
</Scripts>
</cc1:ToolkitScriptManager>
<div id="main">
<div class="header">
<asp:Image ID="HeaderLogo" runat="server" ImageUrl="images/header-logo.png" />
<asp:Image ID="SubHeader" runat="server" ImageUrl="images/sub-header.png" />
</div>
<div class="navbar">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:Menu ID="NavMenu" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1"
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="4" DynamicHorizontalOffset="1"
StaticSubMenuIndent="1px" DynamicPopOutImageUrl="images/right-arrow.gif" StaticPopOutImageUrl="images/drop-arrow.gif"
CssClass="NavMenu" Height="30px">
<StaticMenuItemStyle ItemSpacing="10" CssClass="staticMenuItemStyle" />
<StaticHoverStyle CssClass="staticHoverStyle" />
<StaticSelectedStyle CssClass="staticMenuItemSelectedStyle" />
<DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="menuItemMouseOver" />
<DynamicMenuStyle CssClass="menuItem" />
<DynamicSelectedStyle CssClass="menuItemSelected" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url" TextField="title"
ToolTipField="description" />
</DataBindings>
</asp:Menu>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" RenderCurrentNodeAsLink="true"
PathSeparator=" >> " CssClass="currentNodeStyle">
<PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
<CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
<NodeStyle ForeColor="#7C6F57" CssClass="currentNodeStyle" />
<RootNodeStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
</asp:SiteMapPath>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<h4>
Rivera Design Studio
</h4>
</div>
</div>
</form>
</body>
</html>
You could use the SuperFish plugin for jQuery in conjunction with your SiteMap and Menu. Here's a similar question.
Are your content pages static or dynamic? If they are static you can always perform a get and swap out the content like so:
function GetNewContent(contentSource)
{
$.get(contentSource, function(content){
$('#contentArea').html(content);
});
}
where contentSource is your URL of the content you wish to retrieve. You could get rid of your Asp menu and go for simple asp:repeater and feed it with your data.
To be honest, the site map is over engineered and pretty inflexible when compared to simple jQuery nav solutions where you build out your menus with ul/ li tags. It is easier to roll your own data structure and pump it down to the client for jQuery to manipulate.
http://docs.jquery.com/Ajax/jQuery.getJSON
$.getJSON(myAction, { Data: myData }, function(data) {
// process data return on callback
});
I have problem with my UserControl. It has inside the UpdatePanel, but it must be placed inside the tag to get worked (otherwise, the PostBack is not asynchronous)
The problem is, if I put that UserControl in e.g. Default.aspx page, the error appears
"A page can have only one server-side Form tag"
how to cope with that ?
[edit]
the UserControl.ascx code:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="PodmiotyZwolnioneCtrl.ascx.cs" Inherits="FormularzPodatkowy.PodmiotyZwolnioneCtrl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<link href="AjaxStyle.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<div>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
the WebForm1.aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="FormularzPodatkowy.WebForm1" %>
<%# Register src="PodmiotyZwolnioneCtrl.ascx" tagname="PodmiotyZwolnioneCtrl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<uc1:PodmiotyZwolnioneCtrl ID="PodmiotyZwolnioneCtrl1" runat="server" />
</form>
</body>
</html>
Your code should be:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="PodmiotyZwolnioneCtrl.ascx.cs" Inherits="FormularzPodatkowy.PodmiotyZwolnioneCtrl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<link href="AjaxStyle.css" rel="stylesheet" type="text/css" />
<div>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
It looks like you converted a page to a control and forgot to remove the page-specific elements
Also, if your postbacks are not asynchronous, look at your web.config for:
<xhtmlConformance mode="Legacy"/>
and change it to:
<xhtmlConformance mode="Transitional"/>
I just spent three days at work finding that solution to UpdatePanel always posting back to the server.
You should check both the usercontrol and the page and make sure that you only have one <form id='form1' runat='server'> tag in your markup. Having more than one will give you the error that you're experiencing.
Good luck, and hope this helps some.