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.
Related
How to show an image in ContentPlaceHolder4 on click of a Link Button which is placed on ContentPlaceHolder3.
I Have a Master Page and one content page. On master page i have a link INSTRUMENTS by clicking on which i am redirected to content page INSTRUMENTS. Now i have 10 LINK BUTTON controls on my Content Page and i want on the click of each link button corresponding image should open on same content page but in different CntentPlaceHolder. Please guide me how to add code for Link Button Click and how to render iamge on click of Link Button.
Following is the code i have added till now.
**This is My Master Page**
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
}
.style2
{
width: 162px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <img src="IMAGES/main.png" style="background-color: #99FF99; border-top-color: #800000; width: 1082px; height: 105px;" />
</div>
HOME INSTRUMENTS LOGIN
ADDRESS
<table style="width: 100%; height: 288px; margin-top: 11px;">
<tr>
<td bgcolor="#FF0066" align="center" class="style2"
style="text-align: center; vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
<td bgcolor="#33CCCC" class="style1">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
**This is My Content Page**
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INSTRUMENTS.aspx.cs" Inherits="INSTRUMENTS" %>
<asp:Content id="content3" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lkbutton_click">Sitar</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server">Harmonium</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server">Tabla</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server">Drum</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton5" runat="server">Guitar</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton6" runat="server">Sarod</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton7" runat="server">Flute</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton8" runat="server">Santoor</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton9" runat="server" onclick="LinkButton9_Click">Keyboard</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton10" runat="server">LinkButton</asp:LinkButton>
</asp:Content>
<asp:content ID ="C2" ContentPlaceHolderID ="ContentPlaceHolder4" runat="Server">
<asp:Image ID ="I1" ImageUrl ="~/IMAGES/F.png" >
<asp:Image />
</asp:content>
in your design page use like this.
<asp:Content ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
<img id="img1" runat="server" />
</asp:Content>
and in code behind link button click event like below:
protected void lkbutton_click(object sender, EventArgs e)
{
img1.Src = "~/images/sonata-logo.png";
}
i tested it it's working fine.
but put the correct path of image then only it will show.
Thanks
<asp:LinkButton ID="LinkButton1" runat="server" width="250px" height="250">
<img runat="server" id="IL"src="~/Class/Adds/0/4.jpg" width="250" height="250" />
</asp:LinkButton>
With this you can change the picture with server code.
il.SRC = "~/Class/Adds/0/7.jpg"
I've read some similar issues here, but no answer they provided could help me.
I have a small asp.net page for study porpuses:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Site.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>
<link rel="Stylesheet" type="text/css" href="/css/Landing.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="loginHeader" class="aaa">
<div>
<asp:TextBox ID="txtUsername" runat="server"/>
<asp:TextBox ID="txtPassword" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Login" OnClick="btnLogin_Click" />
<asp:Button ID="Button2" runat="server" Text="Register" OnClick="btnRegister_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Password not valid" Visible="False"/>
</div>
</div>
</form>
</body>
</html>
As you can see, the css/landing CSS file is being added.
Here is this css file:
#loginHeader
{
display:block;
background-color:Blue;
}
.aaa
{
display:block;
background-color:Red;
}
If I open the page, no style is applied. Firebug shows that the css is being downloaded.
If I move the css markup to the page, inside a tag, it works, if I change back to the css file, it stops working.
Do you see any reason for this behavior?
Thanks,
Oscar
I Just found it out: there was an error on my config file, which defined that the user should be logged in to access the css files...
solved, thanks :)
You have written the link tag this way.
<link rel="Stylesheet" type="text/css" href="/css/Landing.css" />
Make it
<link rel="Stylesheet" type="text/css" href="css/Landing.css" />
This will instruct the browser to look for the "Landing.css" file inside the css directory.
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
Code produces an "error object expected" on:
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
What is wrong in this code?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="color: #009933; font-weight: 700">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<p style="color: #336600; font-weight: 700">
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
</p>
</form>
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
</body>
</html>
You probably need to include a jQuery reference inside your <head>
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=609
IF you do have jQuery and that is not the problem, you will not be able to make a label appear using javascript if you have it hidden server side...
This will not be part of the page, so you cannot just make it visible:
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
You could hide it like this perhaps
<asp:Label ID="Label1" runat="server" Text="Label" style="display:none;"></asp:Label>
Does that help?
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>