HttpContext.Current.Response.Write is breaking the page layout - c#

I need to inject a script tag containing a JSON into the HttpContext.Current.Response.Output of a asp.net MVC request using React SSR.
I need to do that because I have to get some information in my context request and then put it into the HTML source for SEO purposes.
I've been trying to add this script tag to the output by using HttpContext.Current.Response.Write or HttpContext.Current.Response.Output.Write (or WriteLine) but when I do the resultant layout is resized and some widgets lose their size and alignment.
Does anyone have any tip about how to inject this big script tag without breaking the final layout?

Related

ASP.Net MVC Generate DNS Prefetch Tags

Is there a way to find all the src="" urls when rendering a ASP.net MVC page in the view to then generate DNS prefetch tags on the fly?
https://www.chromium.org/developers/design-documents/dns-prefetching
If I understood correctly I can tell you the following:
Option #1: (Not a pretty solution but would work.)
NOTE: for this try to use simple Javascript and not rely on JQuery or other (since then you still need to "load" the .JS file for that and that is ruining the point of your question.
Process your src/href or some other predefined property tag with some kind of "OwnLogic" to define the "base target",
but in a way that the browser would not be able to initiate the request to obtain that image or other file.
Example:
<img url="" class="DNS_BaseTarget" DNS_BaseTarget="smiley.gif||myCDNPointerInfo" alt="">
Then, with javascript, get a list of all elements that uses the class DNS_BaseTarget and then read the property value and update the "src" tag.
At the same time you can inject by javascript inject all the '<link rel="dns-prefetch" href="https://cdn.yourTargetDomain.com">' that you will use based on the information you just processed.
I did not tested this concept, so "lag" or some sort of delay in the client might be expected (but maybe not noticeble by the user).
Option #2:
The View Result Execution Process (in MVC life cycle) tell us that the method 'Render()' is the last one to be executed.
With this being said, you can create your own custom override logic
Example: intercept view rendering to add HTML/JS on all partial views?
How to intercept view rendering to add HTML/JS on all partial views?
With this concept of trying to "process" the final html before sending it to the user, you could somehow "parse" the file.... try to get all the 'src/href' and then
inject all the '<link rel="dns-prefetch" href="https://cdn.yourTargetDomain.com">' that you will use.

Including Large Static HTML File with Image in MVC View

I'm converting a desktop application that hosts HTML content into an online application. I have various large pieces of prebuilt static html that need to be included in an MVC page depending on user actions. Each of the static html pages includes at least one img tag that references a file that, in a Web Forms page would be located in the same directory. Here's a very simplified example:
Static html:
<html>
<!-- Large chunk of html -->
<img src="logo.gif" >
<!-- More html -->
</html>
SampleController:
Dim html as String = GetFileContentAsString("~/Content/Sample/Static.html")
ViewBag.StaticHTML = PrepareHTMLContent(html)
View:
#Html.Raw(ViewBag.StaticHTML)
The result of the above is a page (e.g. http://localhost:12345/Sample) with a broken image link in the middle of the HTML. I'm already preprocessing the html where possible to strip out useless tags and insert Javascript and CSS links but preprocessing the image paths is unreliable because they could be anywhere in the static html and are quite likely to be inconsistent or otherwise quirky.
So how can I place (or create) the image file in the right location for the static html to pick it up? Is there any other option (bearing in mind that I also need to link CSS and JavaScript files and that the static html has a bunch of other files associated with it that need to be kept in a single location)?
Or is there a way to define or override the location the dynamic MVC page is built?
Easiest thing would be to have /Sample return an HTML page that simply loads /~Content/Sample/Static.html into an iframe so that the browser will resolve relative paths in static.html to be within /~Content/Sample/

Printing html file with pagebreaks

I am trying to create a program / service that can read an html file and print it.
I need to include page breaks; but don't know how to define them or make them print correctly.
The html files are mine, so I can add any elements to them to represent the page break position. I was thinking a hidden field, or using the page-break-before:always css style in the next element.
How should I approach this?
Css is the way to go. I'd recommend to create a class "page-break":
.page-break { page-break-before: always; }
Whereever you add this class to an HTML-element you get a page-break before this element (e.g. before every h1).
This tutorial covers almost every part of CSS and printing:
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
hope this helps

taking a screenshot of some element in the html

So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.

ASP.NET Which HTML editor can do everything I want?

I have tried to use the standard AJAX HTMLeditor from here (http://www.asp.net/ajaxlibrary/act.ashx) and I have try to work with the FCKEditor (from http://ckeditor.com/)
But both don't do everything. I call the AJAX standard control A and the FCKeditor F.
With the A editor it is impossible to get your HTML text in the HTML content. You can only get it in the Design content. (this next code doesn't do the job: string htmlContentStr = Editor1.Content).
With F it is possible to get it in the HTML content (it does this by default), but to get your changes back in HTML is impossible. (this next code doesn't do the job: string htmlContentStr = FCKeditor1.Value).
So what I need is a HTML editor that is possible to put HTML text in HTML content, a user can make changes in the designcontent and after the changes 're make it must be possible to get the HTMLcontent and put it away in a string or database.
Is this possible or do I need a commercial one to get this feature?
If my question isn't clear, please let me know.
Thnx
I've used XStandard quite easily and it let me manipulate the HTML. I didn't bother using it as a control, but just read and wrote (escaped) the HTML where needed into the asp output.

Categories