ASP.NET

Re: Asp.Net MVC View, Loading HTML in iframe element instead of src=url

1-Jun-16 11:25

I wrote a diagnostics program for my web app, Submit a Bug Report.

At the time of submission, I call the page in the controller and grab the HTML with the error, sort of a page snap shot. This way I can see what happened such as a unhanded exception, misspelling or whatever the issue is.

So Now on the resolve program, I want to display that HTML. I'm not if I'm over thinking this or not. I do have the page Url to use, which works. But I thought the page from the actual time it happened would be better.

I tried src=""Data: text/Html, charset: utf-8, the html"" but I get the Url of the page, and not the page. I suspect that the render engine is changing it.

I would just be nice to make it happen. I did get the page to size down correctly, maybe that was the hard part.

<div id="snapShot" class="collapse">
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.LabelFor(m => m.Page_HTML, new { @class = "control-label" })
                    <div class="iframe">
                        <iframe id="pageSnapShot" class="iframe" src="@Model.Page_HTML"></iframe>
                    </div>                                                        
                    @Html.ValidationMessageFor(m => m.Page_HTML)
                </div>
            </div>
        </div>
    </div>

modified 2-Jun-16 15:29pm.

Richard Deeming2-Jun-16 2:21

Re: Asp.Net MVC View, Loading HTML in iframe element instead of src=url

2-Jun-16 2:21

If you're using a modern browser[^] - specifically not IE or Edge - you can use the srcdoc attribute[^]:

HTML

<iframe id="pageSnapShot" class="iframe" srcdoc="@Model.Page_HTML"></iframe>

For older browsers, either src="data:text/html,@Model.Page_HTML" or src="javascript:'@HttpUtility.JavaScriptStringEncode(Model.Page_Html)'" should work.

Alternatively, this srcdoc polyfill[^] should work in most browsers.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

jkirkerx2-Jun-16 6:36

Re: Asp.Net MVC View, Loading HTML in iframe element instead of src=url

2-Jun-16 6:36

I'll do some testing on that.

It's for internal use only, and the public will never see it.

Thanks Richard!

jkirkerx2-Jun-16 8:26

Re: Asp.Net MVC View, Loading HTML in iframe element instead of src=url

2-Jun-16 8:26

I tried both, same thing. Just got the page URL in the iframe.

I suspect it's a MVC issue.

It's not that important at the moment, so I'll look into it later.
I'll look into how views get rendered into HTML.

Richard Deeming2-Jun-16 8:37

Re: Asp.Net MVC View, Loading HTML in iframe element instead of src=url

2-Jun-16 8:37

Are you definitely using the right property? In your original message, you were using @Model.Page_URL, but it looks like you want @Model.Page_HTML instead.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

jkirkerx2-Jun-16 9:32

Help with fileupload object

2-Jun-16 9:32

My bad, In the first post it should of been @Model.Page_HTML
I fix the post to reflect this.

Yes your right, in this post.

I have no clue how MVC was able to take just HTML and figure out what the actual URL for that page is.

turbosupramk31-Jun-16 6:03

1-Jun-16 6:03

I have the following on my page

ASP.NET

<asp:FileUpload ID="flupldDisplayPicture" runat="server" onClick="flupldDisplayPicture_Click"/>

but it will not call the function flupldDisplayPicture_Click? If I change the opening tag to <asp:button ...="" then="" it="" works.

i="" am="" new="" to="" asp="" but="" seasoned="" with="" c#="" and="" trying="" port="" a="" application="" over="" an="" page.

thanks

<pre="" lang="C#">protected void flupldDisplayPicture_Click(object sender, EventArgs e)
{
FileUpload FileUploadControl = new FileUpload();

if (FileUploadControl.HasFile)
{
try
{
if (FileUploadControl.PostedFile.ContentType == "image/jpeg")
{
if (FileUploadControl.PostedFile.ContentLength < 102400)
{
string filename = Path.GetFileName(FileUploadControl.FileName);
FileUploadControl.SaveAs(Server.MapPath("~/") + filename);
//StatusLabel.Text = "Upload status: File uploaded!";

//imgDisplayPicture.ImageUrl = ("~/") + filename;
imgDisplayPicture.ImageUrl = filename;

}
else
{
//StatusLabel.Text = "Upload status: The file has to be less than 100 kb!";
}
}
else
{
//StatusLabel.Text = "Upload status: Only JPEG files are accepted!";
}

}
catch (Exception ex)
{
//StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
}
}
}

Richard Deeming1-Jun-16 6:55

1-Jun-16 6:55

The FileUpload control[^] doesn't have a server-side "click" event. You'll either need to handle the click event for the button that causes the form to submit, or use the Page_Load event and check the IsPostBack property.

Uploading Files in ASP.NET 2.0[^]
Uploading Files (C#) | The ASP.NET Site[^]

You'll probably want to add some checks to make sure the file name ends with an expected extension. It would be quite possible for a hacker to submit a request with a valid "web.config" file, but spoof the content type as "image/jpeg".

You should probably also save the uploaded files in a specific directory, which should be configured as "no-execute" in IIS.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk31-Jun-16 7:39

1-Jun-16 7:39

Thanks for the reply. I have something similar to that and for discussion and testings sake I am now using the code from the first link.

My question is, when I choose a file in the fileupload box, how can I trigger an event? Do I use event handlers like with c# or can I use a worker thread in the background to monitor if fileUpload1.HasFile is true or not?

ASP.NET

C#

<%@ Page Language="C#" %>

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
            try
            {
                FileUpload1.SaveAs("C:\\Uploads\\" + 
                     FileUpload1.FileName);
                Label1.Text = "File name: " +
                     FileUpload1.PostedFile.FileName + "<br>" +
                     FileUpload1.PostedFile.ContentLength + " kb<br>" +
                     "Content type: " +
                     FileUpload1.PostedFile.ContentType;
            }
            catch (Exception ex)
            {
                Label1.Text = "ERROR: " + ex.Message.ToString();
            }
        else
        {
            Label1.Text = "You have not specified a file.";
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Upload Files</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" /><br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
         Text="Upload File" />&nbsp;<br />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label></div>
    </form>
</body>
</html>

Richard Deeming1-Jun-16 7:52

1-Jun-16 7:52

You'd have to use client-side code to initiate a post-back. For example:

ASP.NET

<asp:FileUpload runat="server" onchange="this.form.submit()" />

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        ProcessFileUpload();
    }
}

Background threads almost never make sense in ASP.NET, due to the way it works:

The browser makes a request to the server;
The server maps the request to a handler - in this case, you page;
The server creates an instance of your page to handle the request;
The page builds its control tree;
If the request is a "post-back", the page rehydrates the control tree from the saved state sent in the request;
The page runs through the event handlers, and renders an HTML document;
The document is sent back to the client, and the page instance is destroyed;
The client parses and displays the HTML document - this can involve making further requests, running Javascript, etc.

Between the initial request and a "post-back", code running on the server typically has no connection to the client.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk31-Jun-16 8:07

1-Jun-16 8:07

Maybe I am going about it the wrong way.

When I use fileupload and have a path for a file inside of the textbox associated with the fileupload control, I want to preview the picture.

Am I going about this the right way?

Richard Deeming1-Jun-16 8:16

1-Jun-16 8:16

You might struggle to get that working with older browsers, but most modern browsers[^] can do that on the client-side. (The notable exception being IE10 or earlier.)

There are various pre-built plugins to do this - for example:

Upload Preview jQuery Plugin[^] (uses jQuery[^]);
Bootstrap File Input - © Kartik[^] (uses Bootstrap[^])

Or you could roll-your-own - this StackOverflow answer[^] seems like a good place to start.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk31-Jun-16 9:21

1-Jun-16 9:21

The stackflow answer is great and I can see it working exactly as I would like here

Edit fiddle - JSFiddle[^]

but I cannot get it to work in Visual Studio with my own project?

Below is what I have, I feel like this is a pretty dumb question, but I cannot figure out what is wrong?

HTML

<pre><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Updater.aspx.cs" Inherits="Updater.Updater" %>

Richard Deeming2-Jun-16 1:46

2-Jun-16 1:46

The <script> block needs to be within the document - just before the closing </body> tag would be a good place.

You also need to add a reference to jQuery, since you're using it to wire up the event handler. The jQuery CDN[^] is probably the simplest way to add this.

There's no need for the xmlns declaration on the <html> tag, since you're using HTML5, not XHTML. You also don't need the language attribute on the <script> tag, since Javascript is the only supported language.

HTML

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Exchange Avatar</title>
</head>
<body>
    <form id="form1" runat="server">
        <br /><br /><br />
        <input type="file" id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
    
    <!-- Include jQuery: -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    
    <!-- Your script: -->
    <script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("#blah").attr("src", e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function () {
        readURL(this);
    });
    </script>
</body>
</html>

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk32-Jun-16 2:43

2-Jun-16 2:43

Thanks for the reply and the code, does this preview the image on your machine? For some reason it does not on my machine and when I change the form to add an onchange event it tells me that "imagepreview is undefined" ?

ASP.NET

<form id="form1" runat="server">
        <br /><br /><br />
        <input type="file" id="imgInp" onchange="imagepreview(imgInp);" />
        <img id="blah" src="#" alt="your image" />
    </form>

I even have this function as well, inside of the script tags

JavaScript

function imagepreview(input) {
            if (input.file && input.files[0] {

                var fildr = new FileReader();
                fildr.onload = function(e) {
                    $('#imgprw').attr('src', e.target.result);
                }
                fildr.readAsDataURL(input.files[0]);

Richard Deeming2-Jun-16 2:45

2-Jun-16 2:45

The code I posted works fine on my machine. Which browser are you using?

turbosupramk3 wrote:
if (input.file && input.files[0] {

You're missing a closing ) on that line.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk32-Jun-16 4:00

2-Jun-16 4:00

I thought I had IE11, but it is actually IE9 which I'm going to guess is my problem?

I also tried Chrome (v 52.xx) and Firefox (v 28) and neither of those worked either?

modified 2-Jun-16 10:15am.

Richard Deeming2-Jun-16 4:24

2-Jun-16 4:24

IE10 and earlier doesn't support the APIs needed to preview images. Firefox and Chrome should be fine, though.

Check the developer console to see if you're getting any errors.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk32-Jun-16 4:28

2-Jun-16 4:28

I'm only getting 2 warning messages

Warning 2 Validation (HTML5): Attribute 'crossorigin' is not a valid attribute of element 'script'. c:\users\xxxxx\documents\visual studio 2012\Projects\Updater\Updater\Updater.aspx 122 128

Warning 1 Validation (HTML5): Attribute 'integrity' is not a valid attribute of element 'script'. c:\users\xxxxx\documents\visual studio 2012\Projects\Updater\Updater\Updater.aspx 122 64

Richard Deeming2-Jun-16 4:31

2-Jun-16 4:31

Try using the developer tools to step through the function.
Debug with Breakpoints | Web Tools - Google Developers[^]
Debugger - Firefox Developer Tools | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

turbosupramk32-Jun-16 8:42