Including Large Static HTML File with Image in MVC View - c#

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/

Related

HttpContext.Current.Response.Write is breaking the page layout

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?

SelectPDF missing content after conversion

So I am using SelectPDF to convert an MVC view's html to PDF, but for some reason, a great deal of the content is missing from the PDF.
I have tested the program on other sites I have made in MVC and they work...
So as per the readme doc's recommendation, I use this code to produce a
SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
SelectPdf.PdfDocument doc = converter.ConvertUrl(HTMLPath);
//SelectPdf.PdfDocument doc = converter.ConvertHtmlString(ViewHTML);
doc.Save(PDFSavePath);
doc.Close();
So HTMLSave path is the location of the HTML file created from the rendered MVC view. While ViewHTML contains the HTML in the form of a string.
So this is how the HTML looks (the file and the view look identical, I did double check in case the HTML was captured incorrectly):
But this is how the PDF looks:
Absolutely tragic...
Not sure if it will be helpful, but here's the HTML:
https://drive.google.com/open?id=0B8DiACLG11oYd3p5Tzc2ZlJQLVk
Unfortunately, all the HTML is on one line thanks to the MVC View to HTML
It seems that the html/css engine used to render the page does not support vh, vw for font sizes. It's a common issue with all converters, so probably you should try to change this if you need the page converted to pdf.
Later update: it seems that there is support for vw, but not for vh. That's why the "each" words appear. They use vw in css.

mvc razor allow users to select there own theme css

I am using MVC/Razor/.Net/C# and i would like to allow users to change the theme of the site just like you can change the theme in microsoft windows.
Does anyone know how to, or, can point me in the direction of some good tutorials/examples.
Cheers
This is a very, very broad question with any number of correct approaches.
You could create a base controller that loads the user's selected CSS theme name from a database during each request. Then you can put that value into the ViewBag (or ViewData) and reference it in your view:
<head>
#{
var themeName = ViewBag.ThemeName;
}
#if (String.IsNullOrWhiteSpace(themeName)) {
themeName = "default";
}
<link href="#Url.Content(String.Format("~/themes/{0}.css", themeName))" type="text/stylesheet" />
</head>
Usually this functionality is achieved with multiple CSS files and has little (or nothing to do with .NET).
You should design your HTML in a semantic way so that by changing the CSS files the entire output is different with each CSS applied.
This link gives a more explanatory intro into the subject -> http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml
After you do that, what you need to do in your application is to store the user preference (of what skin) in a session or something like that and change the CSS file accordingly.
Asp.Net WebForms use to have the Skin/Theme feature, but I think that it was deprecated (it is not very good) and I also saw an implementation where instead of HTML the developer used XML and XSLT files to render the views (which is also too complicated for my taste).

how to convert part of html page into pdf using wkhtmltopdf or something else

Iam using wkhtmltopdf for html to pdf conversion of an html page using C# code and it is working absolutely perfect but i want to convert a particular part of html page to pdf like by specifying div id of that part or any similar method.How can i do this?
Please help
You can just create a new HTML page with just your div as a body:
<html>
<head><title>...</title></head>
<body>
<!-- PLACE YOUR DIV HERE -->
</body>
</html>
Since you already know how to produce a PDF from an HTML file, you know know how to produce a PDF from a DIV ;)
BUT: Of course the CSS is going to be all wonky, since the selectors won't match anymore etc. This is a problem for the general case, but I'm guessing in your specific case, you can make that work.

Using site root relative links in Razor

I have a website that is working fine with Razor (C#) all the coding is working properly when I use my local testing (WebMatrix IIS).
When I put it "online" on my server the website is not at the root of the site it self
For example:
http:// intranet.mycompany.com/inform
That's basically the "root" of my folder structure so all my folders starts from there (css file default.cshtml... and so on)
My "_PageStart.cshtml" sees it properly cause when I access my site from the link http://intranet.mycompany.com/inform it gives me the Layout I have configured in _PageStart.cshtml (and it really show the layout + the rendered default.cshtml)
BUT nothing else is getting the proper path, for example :
<img src="~/images/logos/hdr.png" />
The img holder is there I can see it but shows that the link is broken... when I Right-Click the img holder and do properties to see where the files should be it shows me :
http:// intranet.mycompany.com/images/logos/hdr.png
So it's going to the "full" root not the relative root...
How can i fix that ?
You have to use relative paths all over your app:
~ won't work within static html code.
You can write
<img src="#Url.Content("~/images/logos/hdr.png")" />
or
<img src="../images/logos/hdr.png" />
The first approach is good for layout files where your relative path might be changing when you have different length routing urls.
EDIT
Regarding to your question about normal links:
When linking to another page in your app you don't specify the view file as the target but the action which renders a view as the result. For that you use the HtmlHelper ActionLink:
#Html.ActionLink("Linktext", "YourController", "YourAction")
That generates the right url for you automatically:
Linktext
EDIT 2
Ok, no MVC - so you have to generate your links yourself.
You have to use relative paths, too. Don't start any link with the / character!
Link
Link
Link
EDIT 3
When using Layout pages you can use the Hrefextension method to generate a relative url:
<link href="#Href("~/style.css")" ...
Use Url.Content as shown bellow:
<img src="#Url.Content("~/images/logos/hdr.png")" />
I know that '~' is added by default, but I tend to change it so that all paths are relative to my code file rather than application root, using ".." eg. "../images/logos" etc

Categories