I am trying to write text to the background of a blazor application.
I want it to show all my method calls in the background (so it looks techy!)
Does anyone know the best way to do this? I have researched but found nothing as of yet.
On the HTML/CSS side, it should be something along these lines:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#content{
position: absolute;
top: 0%;
left: 0%;
font-size: 50px;
color: black;
-ms-transform: translate(-50%,-50%);
}
#background{
color: darkgray;
}
</style>
</head>
<body>
<div id="background">
This is my<br/>
background<br/>
content ...<br />
</div>
<div id="content">
This is my overlay content.
</div>
</body>
</html>
Two content blocks are created with the div tags: one for the foreground and one for the background. JavaScript can then be used to animate/adjust the background content accordingly to get your required effect.
I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES
I am just starting to learn jQuery, and want to load content from a seperate .aspx page dynamically into a div. Using example from here: http://www.asp.net/ajaxLibrary/jquery_webforms_dynamic_load.ashx?HL=var.
However it doesn't seem to be responding and I'm probably missing some piece of this. Here is the code / script in my .aspx page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// External ASPX Page calling
$("#btn_Submit").click(loadDynamic);
});
function loadDynamic() {
$("#dynamicResults").load("ResultsView.aspx",
{name: $("#cbox_User").val() },
function (content) {
$(this).hide().fadeIn("slow");
return false;
});
}
<Header>
QUERY VIEW
</Header>
<Content>
<div style="float:right; height:154px; width: 947px; margin-left: 0px; background-color: #E0E0E0;">
<br />
<asp:Label ID="Label2" runat="server" Text="Select a User:"
Style="margin-left:28px" ></asp:Label>
<asp:ComboBox ID="cbox_User" runat="server" AutoCompleteMode="SuggestAppend">
</asp:ComboBox>
<asp:Label ID="Label3" runat="server" Text="Select a Month:"
Style="margin-left:28px" ></asp:Label>
<asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txt_Date"
Format="MMMM yyyy"
OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden"
BehaviorID="calendar1" >
</asp:CalendarExtender>
<asp:Button ID="btn_Submit" runat="server" Text="Submit" Style="margin-left:28px" onclick="Btn_Submit_Click" />
</div>
</Content>
<Header>
RESULTS VIEW
</Header>
<Content>
<div id="dynamicResults">
</div>
<div style="border-style: none; height:340px; width: 770px; position:relative; top: 10px; left: -2px;">
<asp:GridView ID="ResultsView" runat="server" CellPadding="3"
ForeColor="Black" GridLines="None" AllowPaging="False"
Visible="False"
Height="318px" style="margin-left: 32px; margin-top: 2px;" Width="718px"
BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px">
</asp:GridView>
</div>
</Content>
And in the second .aspx page, which contains I a div I just want to dynamically load:
<html xmlns="http://www.w3.org/1999/xhtml">
<div style="background-color:#E0E0E0; border-style: ridge none none none; border- width: thin; border-color: #B3B3B3; height:120px; width: 770px; position:relative; top: 10px; left: 8px;">
<asp:Label ID="lbl_Header" runat="server" Text="User Information:"></asp:Label>
</div>
</html>
Have a look at the load method.
Here is an example from the page:
Loading Page Fragments The .load()
method, unlike $.get(), allows us to
specify a portion of the remote
document to be inserted. This is
achieved with a special syntax for the
url parameter. If one or more space
characters are included in the string,
the portion of the string following
the first space is assumed to be a
jQuery selector that determines the
content to be loaded.
We could modify the example above to
use only part of the document that is
fetched:
$('#result').load('ajax/test.html #container');
When this method executes, it
retrieves the content of
ajax/test.html, but then jQuery parses
the returned document to find the
element with an ID of container. This
element, along with its contents, is
inserted into the element with an ID
of result, and the rest of the
retrieved document is discarded.
jQuery uses the browser's .innerHTML
property to parse the retrieved
document and insert it into the
current document. During this process,
browsers often filter elements from
the document such as , ,
or elements. As a result, the
elements retrieved by .load() may not
be exactly the same as if the document
were retrieved directly by the
browser.
Edit: Just noticed that in your function loadDynamic() you're trying to get the value of the control cbox_User like this:
$("#cbox_User").val()
But, because it's a server-side control, you need to get the value like this:
$("#<%=cbox_User.ClientID%.").val()
This is because .NET gives ASP.NET controls different id's than what you specify.
Hope this helps.
I have an image on my master page like this:
<img src="../Images/logo.jpg" />
The master page lies in Root/MasterPages/masterpage.master
Now this image is displayed in a content page which is in Root/SomeDir/ContentPage.aspx,
but it doesn't work in a content page which is in Root/SomeDir1/SomeDir2/ContentPage.aspx. Why?
Master Page HTML
<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">
#div_Main
{
height: 825px;
width: 1022px;
top: 16px;
left: 77px;
position: absolute;
margin-left: 14px;
}
#div_LeftPanel
{
width: 299px;
top: 179px;
left: 2px;
position: absolute;
height: 641px;
background-color: #7E8387;
}
#div_Content
{
width: 716px;
top: 180px;
left: 303px;
position: absolute;
height: 638px;
}
#div_Header
{
top: 0px;
left: 0px;
position: absolute;
height: 176px;
width: 1022px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_Main">
<div id="div_Header">
<img src="../Images/logo.jpg" />
</div>
<div id="div_Content">
<asp:ContentPlaceHolder ID="cph_WorkingArea" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="div_LeftPanel">
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton
ID="lnkbtn_JObAspirantsList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_JObAspirantsList_Click">Job Aspirants List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_ERFList" runat="server"
style="color: #CFCFF3; font-size: xx-large" onclick="lnkbtn_ERFList_Click">ERF List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_InterviewFeedbackList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_InterviewFeedbackList_Click">Interview FeedbackList</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_NewEmployeeList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_NewEmployeeList_Click">New Employees List</asp:LinkButton>
<br />
<br />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" style="color: #CFCFF3; font-size: xx-large" onclick="LinkButton1_Click">LogOut</asp:LinkButton>
<br />
<br />
</div>
</div>
</form>
</body>
</html>
Content Page HTML
<%# Page Language="C#" MasterPageFile="~/MasterPages/HRMaster.Master" AutoEventWireup="true" CodeBehind="ERF.aspx.cs" Inherits="StarTechnologies.ERF" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_WorkingArea" runat="server">
<p>
<br />
<asp:GridView ID="GridView1" runat="server" Height="212px"
onselectedindexchanged="GridView1_SelectedIndexChanged" Width="434px">
</asp:GridView>
</p>
<br />
</asp:Content>
RPM1984 is almost right. You should use ~ to indicate a path relative to the root of your application. You should however translate that to a path the browser understands. If you are using ASP.NET controls like Image that is done automatically. If you're using HTML tags (without runat="server") you have to translate the path manually using Page.ResolveClientUrl().
For example:
<img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/>
In this case however, you're probably better off using the Image control:
<asp:Image runat="server" ImageUrl="~/Images/logo.jpg"/>
Try not to use relative paths.
Use absolute:
<img src="~/Images/logo.jpg" />
That is assuming "Images" is a folder underneath the root of your web application.
The thing to remember about Master Pages is that they really are syntactic sugar in a way (similar to partial classes) That is, when you put an image inside a MasterPage, the .NET CLR will create the content page with the Master info - so the image reference will be unchanged.
It's not ../Images from the Master, its ../Images from the Content it's placed upon.
In other words, to the client, there is only ONE page (ASPX - content page), it's not like a magical parent page has been created which holds onto URL references.
HTH
I had the same problem.
My master page's content didn't display but the Web Form content did.
What happens is that the content page is overwritting the master page's content.
I solved it creating a new ContentPlaceHolder in the MasterPage with ID="Example".
Then in the Web Form, I changed ContentPlaceholderID="OlderID" to ContentPlacerHolderID="Example".
I am trying to create a simple user control that is a slider. When I add a AjaxToolkit SliderExtender to the user control I get this (*&$#()## error:
Server Error in '/' Application. The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`). Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`).
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. `<% ... %>`).] System.Web.UI.ControlCollection.Add(Control child) +8677431 AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptObjectBuilder.cs:293 AjaxControlToolkit.ExtenderControlBase.OnLoad(EventArgs e) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ExtenderControlBase.cs:306 System.Web.UI.Control.LoadRecursive()
+50 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Control.LoadRecursive()
+141 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +627
Version Information: Microsoft .NET Framework Version:2.0.50727.3074; ASP.NET Version:2.0.50727.3074
I have tried putting a placeholder in the user control and adding the textbox and slider extender to the placeholder programmatically and I still get the error.
Here is the simple code:
<table cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
<tr>
<td></td>
<td>
<asp:Label ID="lblMaxValue" runat="server" Text="Maximum" CssClass="float_right" />
<asp:Label ID="lblMinValue" runat="server" Text="Minimum" />
</td>
</tr>
<tr>
<td style="width:60%;">
<asp:CheckBox ID="chkOn" runat="server" />
<asp:Label ID="lblPrefix" runat="server" />:
<asp:Label ID="lblSliderValue" runat="server" />
<asp:Label ID="lblSuffix" runat="server" />
</td>
<td style="text-align:right;width:40%;">
<asp:TextBox ID="txtSlider" runat="server" Text="50" style="display:none;" />
<ajaxToolkit:SliderExtender ID="seSlider" runat="server"
BehaviorID="seSlider"
TargetControlID="txtSlider"
BoundControlID="lblSliderValue"
Orientation="Horizontal"
EnableHandleAnimation="true"
Length="200"
Minimum="0"
Maximum="100"
Steps="1" />
</td>
</tr>
</tbody>
</table>
What is the problem?
First, start the code block with <%# instead of <%= :
<head id="head1" runat="server">
<title>My Page</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%# ResolveUrl("~/javascript/leesUtils.js") %>"></script>
</head>
This changes the code block from a Response.Write code block to a databinding expression.
Since <%# ... %> databinding expressions aren't code blocks, the CLR won't complain. Then in the code for the master page, you'd add the following:
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}
I just ran into this problem as well but found another solution.
I found that wrapping the code blocks with a asp:PlaceHolder-tag solves the problem.
<asp:PlaceHolder runat="server">
<meta name="ROBOTS" content="<%= this.ViewData["RobotsMeta"] %>" />
</asp:PlaceHolder>
(The CMS I'm using is inserting into the head-section from some code behind which restricted me from adding custom control blocks with various information like meta-tags etc so this is the only way it works for me.)
I can confirm that moving the javascript with <% %> tags from the head to the form tag fixes this error
http://italez.wordpress.com/2010/06/22/ajaxcontroltoolkit-calendarextender-e-strana-eccezione/
Place the JavaScript under a div tag.
<div runat="server"> //div tag must have runat server
//Your JavaScript code goes here....
</div>
It'll work!!
you can do the same functionality if you are using script manager in your page.
you have to just register the script like this
<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Styles/javascript/jquery.min.js" />
</Scripts>
</asp:ScriptManager>
I tried using <%# %> with no success. Then I changed Page.Header.DataBind(); in my code behind to this.Header.DataBind(); and it worked fine.
I had same issue in the user control. My page that was hosting the control had comments in the head tag, I removed those comments, everything worked afterwards. Some posts also suggest removing scripts from head and placing them in the body.
In my case, I have replaced <%= %> with <%# %>, and it worked!
Keep the java script code inside the body tag
<body>
<script type="text/javascript">
</script>
</body>
The "<%#" databinding technique will not directly work inside <link> tags in the <head> tag:
<head runat="server">
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# My.Constants.CSS_VERSION %>" />
</head>
The above code will evaluate to
<head>
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# My.Constants.CSS_VERSION %>" />
</head>
Instead, you should do the following (note the two double quotes inside):
<head runat="server">
<link rel="stylesheet" type="text/css"
href="css/style.css?v=<%# "" + My.Constants.CSS_VERSION %>" />
</head>
And you will get the desired result:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css?v=1.5" />
</head>
I had this problem, but not via the Header. My placeholder was in the body. So I replaced all the <%= with <%# and did
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}
and it worked.
An alternative way is to have another .aspx page act as the page you want to link to.
This is what the header of the Masterpage looks like:
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="CSS/AccordionStyles.aspx" rel="stylesheet" type="text/css" />
</head>
The referenced .aspx form contains your content:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AccordionStyles.aspx.cs" Inherits="IntranetConnectCMS.CSS.AccordionStyles" %>
.AccordionHeader
{
cursor: pointer;
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneHeaderClosed.png") %>);
background-repeat: no-repeat;
}
.AccordionHeaderSelected
{
cursor: pointer;
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneHeaderOpen.png") %>);
background-repeat: no-repeat;
}
.AccordionContent
{
background-image: url(<%=ResolveUrl("~/Images/Backgrounds/AccordionPaneContent.png") %>);
background-repeat: no-repeat;
}
Finally, you need the .aspx page to tell the browser you're sending CSS content:
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/css";
}
I also faced the same issue. I found the solutions like following.
Solution 1:
I kept my script tag in the body.
<body>
<form> . . . . </form>
<script type="text/javascript" src="<%= My.Working.Common.Util.GetSiteLocation()%>Scripts/Common.js"></script> </body>
Now conflicts regarding the tags will resolve.
Solution 2:
We can also solve this one of the above solutions like Replace the code block with <%# instead of <%= But the problem is it will give only relative path. If you want really absolute path it won't work.
Solution 1 works for me. Next is your choice.
I had the same problem, but it didn't have anything to do with JavaScript. Consider this code:
<input id="hdnTest" type="hidden" value='<%= hdnValue %>' />
<asp:PlaceHolder ID="phWrapper" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="phContent" runat="server" Visible="false">
<b>test content</b>
</asp:PlaceHolder>
In this situation you'll get the same error even though PlaceHolders don't have any harmful code blocks, it happens because of the non-server control hdnTest uses code blocks.
Just add runat=server to the hdnTest and the problem is solved.
I solved an error similar to this by putting the <script> inside a contentplaceholder inside the <head> instead of putting the <script> outside the said contentplaceholder inside the <head>
I had the same issue with different circumstances.
I had simple element inside the body tag.
The solution was:
<asp:PlaceHolder ID="container" runat="server">
<a id="child" href="<%# variable %>">Change me</a>
</asp:PlaceHolder>
protected new void Page_Load(object sender, EventArgs e)
{
Page.Form.DataBind(); // I neded to Call DataBind on Form not on Header
container.InnerHtml = "Simple text";
}
I had the same issue with my system, I removed the JavaScript code from the of my page and put it at body just before closing body tag
For some cases ResolveUrl and ResolveClientUrl works but not all times especially in case of js script files. What happens is it works for some pages but when you navigate to some other pages it might not work due to relative path of that particular page.
So finally my suggestion is always do a complete recheck of your site pages for whether all your javascript references are fine or not.
Open your site in Google Chrome -> right click on the page -> click view source page -> HTML appears -> now click your JS hyperlinks; if its working fine it should open the js file in another browser window, otherwise it will not open.
Try writing your java script code outside the head tag it will definitely work.Its resolved when i copy and paste my Java Script code to the bottom of page. In the previous its placed in HEAD tag now just before closing the form tag.
</div>
<script>
function validate() {
try {
var username = document.getElementById("<%=txtUserName.ClientID%>").value;
var password = document.getElementById("<%=txtPWD.ClientID%>").value;
if (username == "" && password == "")
alert("Enter Username and Passowrd");
else {
if (username == "")
alert("Enter Username");
else if (password == "")
alert("Enter Password");
}
}
catch (err) {
}
}
</script>
</form>
Remove the part which has server tags and place it somewhere else if you want to add dynamic controls from code behind
I removed my JavaScript from the head section of page and added it to the body of the page and got it working
In my case I got this error because I was wrongly setting InnerText to a div with html inside it.
Example:
SuccessMessagesContainer.InnerText = "";
<div class="SuccessMessages ui-state-success" style="height: 25px; display: none;" id="SuccessMessagesContainer" runat="server">
<table>
<tr>
<td style="width: 80px; vertical-align: middle; height: 18px; text-align: center;">
<img src="<%=Image_success_icn %>" style="margin: 0 auto; height: 18px;
width: 18px;" />
</td>
<td id="SuccessMessage" style="vertical-align: middle;" class="SuccessMessage" runat="server" >
</td>
</tr>
</table>
</div>
Tags <%= %> not works into a tag with runat="server". Move your code with <%= %> into runat="server" to an other tag (body, head, ...), or remove runat="server" from container.