Applying a Dojo Toolkit (Dijit) theme to ASP.NET pages - asp.net

In the code below, I am trying to apply a Dijit theme to the controls in my .aspx page. However, the controls persist in their normal, unthemed appearance.
Anybody know why?
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebJournalEntryClient.Main" %>
<!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>My Web Application</title>
<link rel="stylesheet" href="dojoroot/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="dojoroot/dojo/dojo.js"/>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>
</head>
<body class = "tundra">
<form id="form1" runat="server">
<div>
<div>
This is potentially space for a header bar.
</div>
<table>
<tr>
<td>
Maybe <br /> a <br /> Side <br /> bar.
</td>
<td>
<asp:ContentPlaceHolder ID="CenterPlaceHolder" runat="server"/>
</td>
</tr>
</table>
<div>
This is potentially space for a footer bar.
</div>
</div>
</form>
</body>
</html>
Content Page:
<%# Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="LogIn.aspx.cs" Inherits="WebJournalEntryClient.LogIn" %>
<asp:Content ID="Content" ContentPlaceHolderID="CenterPlaceHolder" runat="server">
<div>
User ID: <asp:TextBox ID = "UserName" dojoType="dijit.form.TextBox" runat="server" /><br />
Password: <asp:TextBox ID = "PassWord" dojoType="dijit.form.TextBox" runat="server" /><br />
<asp:Button ID="LogInButton" Text="Log In" dojoType="dijit.form.Button" runat="server" />
</div>
</asp:Content>

You need to add djConfig="parseOnLoad: true" to you script tag.
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"/>
Or
dojo.parser.parse();

Could be the path is wrong. Use Firebug to see if it's reading any css.

I am not sure about what ASP.net is doing with your page.
However in any case can you double check with firebug wheather your body has "tundra" class in the Browser Output ?? I am assuming that the CSS is comming properly (: as you mentioned in above comment)

Related

ASP.NET Google Analytics won't find the script

So I put the Google Analytics script into a separate .js file (obviously without the tags should someone ask) and included it on the Master Page but Google keeps telling me "Tracking not installed". The script does show up when running the page inspector.
Here is a link to the code of my Master Page:
http://pastebin.com/mJ8WRWYP
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Dictionary.master.cs" Inherits="Dictionary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="shortcut icon" href="~/Resources/favicon.ico"/>
<title>Dictionary</title>
<script src="Resources/GoogleAnalytics.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="WordCount"></asp:Label>
<br />
<asp:ContentPlaceHolder id="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<asp:HyperLink ID="LoginHPL" NavigateUrl="~/LoginPage.aspx" runat="server">Login</asp:HyperLink>
<asp:HyperLink ID="AddWordsHPL" NavigateUrl="~/AddWords.aspx" Visible="false" runat="server">Add Words</asp:HyperLink>
<asp:HyperLink ID="ApproveHPL" NavigateUrl="~/ApprovePage.aspx" Visible="false" runat="server">Approve Words</asp:HyperLink>
<asp:Button ID="LogoutBtn" Visible="false" Style="position: absolute; right: 50px;" runat="server" Text="Logout" OnClick="LogoutBtn_Click" />
</footer>
</form>
</body>
</html>
I'd be very grateful for some help.

CSS in an external file not being applied

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.

How to open ajax model popup extender just like facebook image viewer?

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

js and css defined in the masterpage does not included in the child page

Hi:
I am new to asp.net,so I meet some problem about the master page.
I define a master page and set some css and js within it:
<%# Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
<title>Master page title</title>
<script xx.js></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><asp:contentplaceholder id="Main" runat="server" /></td>
<td><asp:contentplaceholder id="Footer" runat="server" /></td>
</tr>
</table>
</form>
</body>
</html>
Then my child page:
<% # Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
Main content.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
Footer content.
</asp:content>
When I start the child page,I found the xx.js is not included in this page,what is the problem?
<head>
<script type="text/javascript" src="xx.js"></script>
</head>
This "xx.js" should be in your appl

UpdatePanel in a UserControl (a nested Forms problem)

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.

Resources