I want to execute JavaScript when document is ready without much syntax overhead. The idea is to use Site.Master and ContentPlaceholder:
<script type="text/javascript">
$(document).ready(function () {
<asp:ContentPlaceHolder ID="OnReadyScript" runat="server" />
});
</script>
and in inherited pages just write plain code:
<asp:Content ID="Content3" ContentPlaceHolderID="OnReadyScript" runat="server">
$("#Login").focus();
</asp:Content>
It works fine but Visual Studio complains and gives warnings.
Warning in master page is Expected expression at the line <asp:ContentPlaceHolder.
In inherited pages warning is Could not find 'OnReadyScript' in the current master page or pages.
I tried using Writer.Write in master page to render script tag and wrapping code:
<% Writer.Write(#"<script type=""text/javascript"">$(document).ready(function () {"); %>
<asp:ContentPlaceHolder ID="OnReadyScrit" runat="server" />
<% Writer.Write(#"});"); %>
but page rendering terminates after opening script tag is rendered. Html basically ends with
<script type="text/javascript">
How can I make it work?
This is a bug in Visual Studio's syntax highlighting.
Try
<%= #"<script type=""text/javascript"">$(document).ready(function () {" %>
<asp:ContentPlaceHolder ID="OnReadyScript" runat="server" />
<%= #"});" %>
Related
I have a class that modifies the path of a resource (e.g., a stylesheet) based on that file's last modified time. This is in order to prevent caching of stale resources.
The class works on all "normal" pages, but I can't get it to work in a local ASP.NET page that's rendered inside of an iframe. The class is located in ~/App_Code:
fingerprint.aspx.cs
public class Fingerprint {
public static string Tag(string rootRelativePath) {
if (HttpRuntime.Cache[rootRelativePath] == null) {
string absolute = HostingEnvironment.MapPath(rootRelativePath);
DateTime date = File.GetLastWriteTime(absolute);
int index = rootRelativePath.LastIndexOf('/');
string result = rootRelativePath.Insert(index, "/v-" + date.Ticks);
HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute));
}
return HttpRuntime.Cache[rootRelativePath] as string;
}
}
And in under most circumstances, it works successfully if called as follows:
somepage.aspx
<%# Page Language="C#" AutoEventWireup="true" Inherits="MainSite" CodeFile="somepage.aspx.cs" %>
<html>
<head runat="server">
<title>Title</title>
<link rel="stylesheet" href="<%# Fingerprint.Tag("/path/to/resource.css") %>">
<!-- other markup -->
</head>
<body>
<!-- other markup -->
</body>
</html>
But if I have an ASP.NET page that loads another ASP.NET page inside an iframe, it doesn't seem to get called. Example:
parent.aspx
<%# Page Language="C#" AutoEventWireup="true" Inherits="MainSite" CodeFile="parent.aspx.cs" %>
<asp:Panel ID="Container" runat="server">
<iframe id="testFrame" src="child.aspx"></iframe>
</asp:Panel>
child.aspx
<%# Page Language="C#" AutoEventWireup="true" Inherits="MainSite" CodeFile="child.aspx.cs" %>
<html>
<head runat="server">
<title>Title</title>
<link rel="stylesheet" href="<%# Fingerprint.Tag("/path/to/resource.css") %>">
<!-- other markup -->
</head>
<body>
<!-- other markup -->
</body>
</html>
I don't get any errors, but Fingerprint.Tag doesn't seem to even be getting called. I just get an empty string in the href portion of the <link> tag where the path to my stylesheet would normally be.
Is there a trick to getting server tags to work inside of local ASP.NET pages contained in iframes? I'm using ASP.NET WebForms (no other choice, client requirement).
What about changing <%# Fingerprint.Tag("/path/to/resource.css") %> to <%=Fingerprint.Tag("/path/to/resource.css") %>? Changing # to =.
As far as I know, <%# ... %> is more like a data binding syntax.
I have a very strange problem. Initially, my page is working fine, if I click a "Back" button, it will navigate to the previous page. But when I add this line
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
Everything seems to stop working. Clicking the button causes the request to never complete (i.e. I cannot go back to previous page when I click "Back" button).
My page structure looks like this
<%# Page Title="" Language="C#" MasterPageFile="~/Master/Main.Master" AutoEventWireup="true" CodeBehind="dsp_FileName.aspx.cs" Inherits="[Namespace].dsp_FileName" %>
<%# MasterType VirtualPath="~/Master/Main.Master" %>
<asp:Content ID="C1" ContentPlaceHolderID="PageContent" runat="server">
<script type="text/javascript">
...
</script>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div>
...
</div>
</asp:Content>
Am I missing something?
This problem occurs because in my master page, I have the following snippet:
<form id="frmMain" runat="server" onsubmit="progressStart('Please wait...');">
Basically I wanted to block any other input when user clicks a button. So I need to modify the above snippet to be :
<form id="frmMain" runat="server" onsubmit="progressStart('Please wait...'); return true;">
And in the page where I need to use the Script Manager, I need to add the following code.
function pageLoad() {
if (args.get_isPartialLoad()) {
jQuery.ajax({
type: "GET",
url: "../../JS/Javascript.js",
dataType: "script",
cache: true
});
$('#dErr').dialog('destroy'); // this is the dialog that will show inside the progressStart function.
}
}
I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
How do I write some client-side script to access a HTML element when .NET has generated the element's ID at runtime?
At present I have this in my ASPX:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('ctl00_middle_area_ImageBarChart')
</script>
It it working at present, but I doubt it is reliable!
ClientID: Documentation
You would then do <%= ImageBarChart.ClientID %> to put it in your javascript
You can write <%= ImageBarChart.ClientID %>.
Try this:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('<%= ImageBarChart.ClientID %>')
</script>
You can use the ASP.NET elements Client Id like so:
<%= ImageBarChart.ClientID %>
I have this in an ASP.Net Master Page:
<script language="javascript" type="text/javascript">
<asp:ContentPlaceHolder ID="scriptContentHolder" runat="server"></asp:ContentPlaceHolder>
</script>
But when I try to view the content page in design mode it tells me there is an error in the associated Master page because "scriptContentHolder" does not exist.
<asp:Content ID="scriptContent" ContentPlaceHolderID="scriptContentHolder" runat="server">
g_page = "mnuSurveys";
</asp:Content>
If I change the Master page to this:
<asp:ContentPlaceHolder ID="scriptContentHolder" runat="server"></asp:ContentPlaceHolder>
and the content page to this:
<asp:Content ID="scriptContent" ContentPlaceHolderID="scriptContentHolder" runat="server">
<script language="javascript" type="text/javascript">
g_page = "mnuSurveys";
</script>
</asp:Content>
Then all is cool. Why is this? The page compiles and executes just fine... but as above the designer squawks when placing ContentPlaceHolder controls within tags.
I had the same problem and solved it like that:
<%= "<script type=\"text/javascript\">" %>
jQuery(document).ready(function() {
// On document ready, execute this methods...
<asp:ContentPlaceHolder ID="jQueryOnDocReady" runat="server" />
});
<%= "</script>"%>
According to this MS Connect posting as of May '09, the
VS designer doesn't support controls
within script blocks. Alternately, you
can call
Page.ClientScriptManager.RegistgerClientScriptBlock
from content page
[sic]
So you'll have to use the second/work around method you posted.
this may be a bit off track. But I was having the same issue because i had some generic code i wanted in my Master page, and other more specific only on certain pages, here is my solution:
-In my .Master:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
<asp:ContentPlaceHolder ID="PerPageScript" runat="server">
</asp:ContentPlaceHolder>
-In my .aspx:
<asp:Content ID="Content1" ContentPlaceHolderID="PerPageScript" runat="server">
<script type="text/javascript">
...
</script>
</asp:Content>