User Controls and JavaScript and Master Pages - asp.net

Consider the following situation:
There is a master page with a contentPlaceHolder for all javascript...
for speed issuses this section is at the bottom of the page.
my user control generates some javascript that make use of some references in the master page javascript (Jquery library)
so, if my user control is rendered before the master page javascript, it won't work.
and this is my question:
how do I make some javascript code block inside my .ascx file to be rendered to the asp:Content JavaScript in the .aspx page
or maybe my all thinking is worng?
Thanks!

See if this works for you:
Where in the "bottom" of the Master Page? If you move it inside the closing server-side form control and use ClientScript.RegisterStartupScript in your user control, it will inject that script of your control "before the closing <form/> tag" (which will be after your your static script call).
Master Page - right above the closing server-side ASP.Net </form>:
....
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
</form>
Content Page (nothing special):
<%# Register src= ....
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<uc1:jscript_inject ID="jscript_inject1" runat="server" />
</asp:Content>
User Control:
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "foo", #"alert('foo');", true);
}
This is how its rendered (HTML view source in browser):
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
<script type="text/javascript">
//<![CDATA[
alert('foo');//]]>
</script>
....
</form>
As advertised, alert('foo'); is below the "pre-defined" jq cdn call....

Cheers useful.
Interestingly this works for Page.ClientScript.RegisterStartupScript but not Page.ClientScript.RegisterClientScriptInclude, and instead the 'include' gets added to the top of the form.

Related

Show a div in asp.net on condition

Is it Possible to show/notshow a div in asp.net depending if cookies are set or not?
Note: the div is an html form invoked with javascript in asp.net.
Here the code in asp.net
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<script type="text/javascript">
$(document).ready(function () { $('#'<%= webform.ClientID %>).load('popup.html');
</script><div id="webform" runat="Server">
</div>
</asp:Content>
And in code behind:
protected void Page_Load(object sender, EventArgs e)
{ webform.Visible= true;}
Note that the webform is visible when the code is: (nothing is code behind)
<script type="text/javascript">
$(document).ready(function () { $('#webform').load('popup.html'); })
</script>
<div id="webform" >
</div>
</asp:Content>
The goal is to make this visible or not depending if cookie has been set or not.
I already tested that the form (in HTML) is setting the cookies(with javascript through webform)
Here's the logic for you to try
Make your DIV a server control by adding runat="server" property
Also have an ID property for your DIV tag
set this DIV's visibility from your code behind based on the Cookie values
E.g.
Markup code
<div id="MyDiv" runat="server"></div>
Code behind
MyDiv.Visible = true; // set this based on the cookie value
UPDATE 1
This is how you'd use your DIV in Scripts
<script type="text/javascript">
$(document).ready(function () { $('#'<%= MyDiv.ClientID %>).load('popup.html'); })
</script>
UPDATE 2
I made a mistake in my UPDATE 1. You should write the JQuery selector like '#<%= MyDiv.ClientID %>' and not like '#'<%= MyDiv.ClientID %> (Note the ' marks).
And, you also made a mistake in your script. You've missed a }) at the end of the script.
Anyway, here's the working solution. (I tried it so don't tell it's not working :-))
<script type="text/javascript">
$(document).ready(function () { $('#<%= webform.ClientID %>').load('popup.html');} )
</script>
<div id="webform" runat="Server"></div>
Hope you could understand this.

Overriding css Style on aspx page with master page

I have a aspx web page using a master page.
There is a style.css sheet which is a global style.
How can I override the style for all the content in the aspx page, but not alter anything else?
so for example something like this in the aspx page
<asp:Content overridestyle = true>
...
</asp:Content>
EDIT
I found something that sort of sort of works, but it removes the style for the entire page, including the content on the masterpage. Is there anyway to do this solution but only for the content in the contentplaceholder?
new protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "";
}
Add the Content place holder in the master page like this under section
<head runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</head>
in your aspx page,
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link href="*****style sheet path****" rel="stylesheet" type="text/css" />
</asp:Content>

How do I "print" an image to a ASP.NET update panel page?

I create a chart, and save it in the path server.mappath("/images/chart/chartname.png"), and if I go to the path, the image is there, and I can open it on my computer, but what I would really like to do is display the image on the page after I create it, preferably asynchronously. I've tried putting a asp:image control in the update panel and changing the url, but that doesn't work. I've tried a bunch of different ways, if someone could point me to the right direction, that would be great. I won't post any code simple because what I have so far IS working. Once I start attempting to print the image I'll post snippets if I have answers.
Edit: Here is some code
The button event that starts the whole thing:
Protected Sub btnCreate_Click(sender As Object, e As EventArgs) Handles btnCreate.Click
Dim worker As New backgroundWorker
'Check input
worker.RunWorker({})
Session("worker") = worker
Timer1.Enabled = True
End Sub
This starts the worker, which generates the chart fine, and starts the timer which is used to update the panel. Eventually in that code, this happens
Dim imgpath As String = Server.MapPath("images/chart/test.png")
chart.SaveImage(imgpath, ChartImageFormat.Png)
chartImg.ImageUrl = "~/images/chart/test.png"
Now, I know that the panel is being updated after this code is executed, because I output some messages to a multiline textbox, and they do appear. All these controls are also in the contentTemplate of the updatePanel.
Setting the ImageUrl property of an ASP.Net image control, while within and update panel, should do the trick without having to use Javascript, although that method can be very efficient. UpdatePanels tend to be "heavy", that is the ScriptManager, UpdatePanel, and ASP.Net ViewState tend to send a lot of information back and forth via their AJAX methods. You can see what I mean by using Fiddler to watch your web traffic.
That being said, I was able to achieve the desired effect in the following manner. I have two static images, Image1.jpg and Image2.jpg, but it should work with your dynamically generated image, as long as the URL is correct.
Here's the text of my ASPX page:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Image1.jpg" Width="300"></asp:Image><br />
<asp:Button runat="server" ID="btnSwitchImage" Text="Switch" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
And here is the code-behind:
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e )
{
btnSwitchImage.Click += new EventHandler( btnSwitchImage_Click );
}
void btnSwitchImage_Click( object sender, EventArgs e )
{
Image1.ImageUrl = "~/Image2.jpg";
}
}
As long as the button and image controls are within the UpdatePanel's ContentTemplate everything should be relayed via AJAX. Once again, use Fiddler to confirm this.
If this example works for you but you still can't get your application working try posting some code in your question. It might help everyone analyze the problem directly.
As per my experience uploading of files does not work in asynchronous mode.You should use Jquery library to upload file asynchronously.
Check this link.
http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
I do not know ajax but you can do it with the help of javascript. Here is the code I tested on my system which works fine.
<body>
<p>
welcome to judge site</p>
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
function PrintImage()
{
printWindow = window.open ("", "mywindow","location=1,status=1,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<img id='img' src='" + document.getElementById('iconId').src + "'/>");
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.print();
}
</script>
<div>
<img id="iconId" alt="photo" src="iconId.png" style="width: 500px; height: 360px" /><br />
<input type="button" id="btnPrint" value="Print Image" onclick="PrintImage()" />
</div>
</form>
There are other more examples you can find on following link (Above code is also from this source but edited by me to make it work on my system)
Visit http://forums.asp.net/p/1463001/3369521.aspx

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

I have a web user control:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="SitewideNotification.ascx.cs" Inherits="Controls_Fresh_SitewideNotification" %>
<asp:PlaceHolder runat="server" ID="Javascript">
test
</asp:PlaceHolder>
In my code behind I have:
protected void Page_Load(object sender, EventArgs e)
{
Page.Master.FindControl("JSContent").Controls.Add(Javascript);
}
My master page ends with:
<asp:ContentPlaceHolder runat="server" ID="JSContent"/>
</form>
</body>
</html>
But I get the error:
System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Page.Master.FindControl("JSContent").Controls.Add(Javascript);
I'm a bit lost as to why this is, does anyone know how to fix it?
I have usually seen this when I have javascript code with the <% %> block in the head section of the page. When you move it out of the head to below the body it seems to go away in the situations I have seen. Since you didn't show us that part of the code it is going to be hard to say exactly what the issue is but here is a good post on the problem:
http://leedumond.com/blog/the-controls-collection-cannot-be-modified-because-the-control-contains-code-blocks/

loading an ASPX page into a jQuery UI Tab with AJAX

I have some experience with jquery and regular html pages but only just started learning .net. I have searched everywhere and I cannot find a good tutorial or example of how to load aspx pages into jquery ui tabs with ajax. I have a Main.aspx page which has some jquery ui tabs for navigation. I would like to load the content for each tab with ajax. I have tried to use the Ajax mode of jquery ui tabs but it seems like when the aspx page contains certain web controls it does not load for some reason. The aspx file that I want to load into the tab only has a button control that, when clicked, changes it's text to say "hello".
Here is the tab section of Main.aspx:
<div id="tabs">
<ul>
<li><span>Test</span></li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs-2">Second Tab</div>
<div id="tabs-3">Third Tab</div>
</div>
Here is the the test.aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs"
Inherits="TropicalServerGUI.test" %>
<div>
<asp:button ID="btn" runat="server" text="Button" />
</div>
and its code-behind:
namespace TropicalServerGUI {
public partial class test : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void btn_Click(object sender, EventArgs e) {
//btn.Text = "hello";
}
}
}
the second and third tabs which are static work fine but nothing gets loaded into the first tab. If I were to remove the button control and put, for example, <h1>Hello World</h1> then it loads the page correctly. I know I am doing something completely wrong and I cannot find any website that addresses this topic, so any help with this would be greatly appreciated!
Are you initialising the JQueryUI tabs?
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

Resources