chart stream not rendering correctly - asp.net

My controller, in a nutshell is this:
chart1.SeriesCollection.Add(SC);
using (MemoryStream ms = chart1.GetChartStream())
{
return File(ms.ToArray(), "image/png");
}
My view is this:
$('#targetDiv').load("Home/GetImage");
And I'm getting garbled characters when rendered. Any ideas?
thanks,
rodchar

You need to use an img tag:
<img src="Home/GetImage" alt="" />
When you write $('#targetDiv').load("Home/GetImage"); you are basically saying: send a GET requets to Home/GetImage using Ajax and if the request succeeds update the contents of #targetDiv with the result. As your controller action sends binary data, this binary data will be injected into the div.

You should set the content type of your response to accommodate the fact you're sending back an image. If you don't your binary stream will be interpreted as text, hence the garbled stuff you get.
There's a related question here: Can an ASP.NET MVC controller return an Image?

Try adding this to your code, before you read the file and send it back
this.Response.Clear();
this.Response.ContentType = "image/png";
on the markup side instead of putting the content into a div you need to put it into an image tag.

Related

Can not display base64 encoded images in an HTML fragment in WinJS app

I'm writing a WinJS app that takes an HTML fragment the user has copied to the clipboard, replaces their
Later, when I go to display the .html, I create an iFrame element (using jQuery $(''), and attempt to source the .html into it, and get the following error
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
I don't get the exception if I don't base64 encoded the images, i.e. leave them intact and can display iframes on the page with the page showing images.
If I take the html after subbing the urls for base64 and run it through toStaticHTML, it removes the src= attribute completely from the tags.
I know the .html with the encoded pngs is right b/c I can open it in Chrome and it displays fine.
My question is I'm trying to figure out why it strips the src= attributes from the tags and how to fix it, for instance, creating the iframe without using jquery and some MS voodoo, or a different technique to sanitize the HTML?
So, a solution I discovered (not 100% convinced it the best and am still looking for something a little less M$ specific) is the MS Webview
http://msdn.microsoft.com/en-us/library/windows/apps/bg182879.aspx#WebView
I use some code like below (where content is the html string with base64 encoded images)
var loadHtmlSuccess = function (content) {
var webview = document.createElement("x-ms-webview");
webview.navigateToString(content);
assetItem.append(webview);
}
I believe you want to use execUnsafeLocalFunction. For example:
var target = document.getElementById('targetDIV');
MSApp.execUnsafeLocalFunction(function () {
target.innerHTML = content}
);

How to take screenshot of a URL from a web form in asp.net?

Is there a way to do this without any exe files or 3rd party things? I cannot use windows form components in web application and I am in need of taking screenshots of different URLs programmatically. Any idea will be appreciated.
Similar question here: Using HTML5/Canvas/JavaScript to take screenshots
JavaScript can read the DOM and render a fairly accurate
representation of that using canvas. I [#Niklas] have been working on a script
which converts html into an canvas image.
See also: http://html2canvas.hertzen.com/
Edit:
Note: You will need to write a web service/web method that accepts a base64 encoded string as an input parameter, and then saves that string (in its raw form, or converted to a file.)
Example usage of html2canvas:
var imageAsBase64;
$('body').html2canvas({
onrendered: function(canvas) {
imageAsBase64 = canvas.toDataURL();
// You now have a base64 string, representing a "screenshot" of
// your <body> element, which you can POST to your web service.
}
});

How can I get an asp.net mvc action to consistently deliver a file to the browser?

I'm building a little action to take an encrypted PDF file path, decrypt it, and deliver the resulting PDF to the browser.
My code works 100% of the time in Chrome and Firefox, but it works only 50% of the time in IE9.
When I follow the link in IE9, it looks like it opens the Adobe Reader plugin in the browser window, but no file is displayed until I hit refresh.
Here is my code:
[CheckSubscriber]
public ActionResult file(string path)
{
string mappedPath = Server.MapPath(
EncryptDecrypt.Decrypt(path,
EncString));
return base.File(mappedPath, "application/pdf");
}
How would I get this to work consistently in IE9?
I'm just thinking out loud here but maybe I am using the wrong mime-type?
You should be explicitly setting
Content-Disposition: inline; filename="foo.pdf"
The content-disposition is a crucial response header when returning a response from the server. All browsers will correctly detect the file 100% of the time if this is specified along with the MIME type.
You can use Fiddler to ensure that the response headers are in order.
Edit
You cannot use the "ActionResult" return type for your action to do this.
You need to use "FilePathResult" or "FileStreamResult" both of which can be found in the System.Web.MVC namespace.
Alternatively you can create a Custom Action Return Type and use that for this action.
The article I have provided gives step by step along with code as to how to go about doing this.
I would use Fiddler to see the difference between the request/response that the browsers send/receive and see if you can spot it from there.
Here's how I return an Excel file (pdf should be the same):
public FileResult DownloadErrors(string filename)
{
var file = System.IO.File.ReadAllText(filename);
return File(new System.Text.UTF8Encoding().GetBytes(file), "application/ms-excel", "Errors.csv");
}
Be sure to use FileResult instead of ActionResult.

How do I display HTML or XML in an HTML document unrendered?

I need to send XML/HTML in an HTML email so that it displays unrendered. I'm using ASP.NET. What is the approach I should take?
HTML Encode it. You can use the HttpUtility.HtmlEncode method.
If I understand correctly, you want the HTML to be displayed as text and not interpreted. If so, then you can simply use the Server.HtmlEncode method to encode your string and then send that back to the browser.
...
text="<h1>Hello World</h1>";
textEncoded = Server.HtmlEncode(text);
...
<%=textEncoded%>

How can I set an Image received from a method to the ImageButton?

I have a method that returns an Image.
How can I assign that Image to my ImageButton control so it has that image set?
Since you're dealing with HTML, you'll need to save the Image to a file, then use that file in the ImageButton's ImageUrl property.
I believe an ImageButton takes the path to an Image, not an actualy Image object, as the browser renders it a an tag.
What you could do is save thr image to disk, return the path to the image form your method and then have
<asp:ImgageButton id="imgButton1" runat="server" imageUrl="<%= GetImageUrl()>" />
The above syntax is not exact, it might be "<% Response.Write(GetImageUrl())>" but you get the picture
If this method returns an Image object, you will need to save out the image to a physical location on your webserver (somewhere like Server.MapPath("~/images/")). Then you will need to set the ImageUrl property of the ImageButton control to this location.
If this method returns a relative path to the image file, simply set the ImageUrl property of the ImageButton to the path returned by the method.
In short, you can't. Well not directly anyway.
You will have to write your image to file and point the image button at your image file
or you can have a web page that returns the image in the response and use that as your ImageUrl
The reason for this is that your ImageButton just renders to HTML which has no support for attaching images ATM.
You can try the following approach:
1) Firstly, get the binary data from the image:
public byte[] ImageToByteArray(System.Drawing.Image image)
{
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
return ms.ToArray();
}
2) Secondary use Inline Images with Data URLs idea:
Inline images use the data URI scheme
to embed images directly within web
pages. As defined by RFC 2397, data
URIs are designed to embed small data
items as "immediate" data, as if they
were referenced externally. Using
inline images saves HTTP requests over
externally referenced objects.
System.Drawing.Image image = GetImageFromSomewhere(...);
byte[] imageData = ImageToByteArray(image);
string imageBase64 = Convert.ToBase64String(imageData);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
imgButton.Src = imageSrc;
But unfortunately, this won't work for IE5-7 (should work in IE8).

Resources