My company has common header that developed in php. I need to import that page into my layouts page in the project. The header can me called "company.com/inc/custom/footer2sn/"
How can call this?
If your page is to include is a static HTML page you can use Partial.
Simply change the somepage.html to somepage.cshtml.
Example:
#Html.Partial("~/Path/to/somefile.cshtml")
Trying to render a normal HTML file will give you an error such as Page cannot be found or no rendering engine could be found.
SO if you have a static HTML page, change the extension to CSHTML and use #Html.Partial()
OR
If the header you want to include is a PHP file it is possible as long as you have a server that is up and running and ready to serve the generated HTML from the PHP page.
You could write a custom HTML Helper
public static class MyHelpers
{
public static HtmlString RenderPHP(this HtmlHelper helper, string path)
{
var requestContext = helper.ViewContext.RequestContext;
UrlHelper url = new UrlHelper(requestContext);
var client = new WebClient();
var returnString= client.DownloadString(new Uri(string.format("Http://{0}{1}", requestContext.HttpContext.Request.Url.Host, url.Content(path))));
return MvcHtmlString.Create(returnString);
}
}
In short, this simply takes the HTML generated from the PHP page and injects it into a section within your page.
To use this inside your page use Razor Syntax like so:
<div id="phpPage">
#Html.RenderPHP("company.com/inc/custom/footer2sn/somepage.php"). <!-- Note this must on a server capable of rendering the php -->
Source
You can use Html.RenderPartial:
#{ Html.RenderPartial("SomeView"); }
But, it's better to have your layouts inherit each other hierarchically, and put your HTML directly in the layer it belongs to for common layout elements:
_Layout.cshtml
<!doctype html>
<html>
<head>
...
</head>
<body>
<header>
...
</header>
#RenderBody()
<footer>
...
</footer>
</body>
</html>
_TwoColumnLayout.cshtml
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
<div id="container">
<div id="content">
#RenderBody()
</div>
<aside id="sidebar">
...
</aside>
</div>
You can keep building layers like this as deep as you need. Just set Layout to the template it should inherit from and then put #RenderBody() where the content of the next child template or view should go.
Related
I am working on an AngularJS Project hosted on a SpringBoot App with Thymeleaf, and I that need AngularJS to grab JUST the section element from another webpage via views and routing.
However, I can't figure out how to make it so that ThymeLeaf only gives the section element instead of the whole HTML page, while still allowing me to view the webpage as a natural template when developing.
So in the server it is stored as
<html>
<title>Don't keep this </title>
<body>
<section>
Keep this
</section>
</body>
</html>
But when AngularJS reads the page, Thymeleaf makes it read this:
<section>
Keep this
</section>
Yeah, this is pretty simple with fragments. If your html file looks like this:
<!-- whatever.html -->
<html>
<head>
<title>Don't keep this </title>
</head>
<body>
<section th:fragment="section">
Keep this
</section>
</body>
</html>
And your controller, like this:
#RequestMapping(value = "whatever.html", method = RequestMethod.GET)
public String get() {
return "whatever :: section";
// Where the string 'whatever' resolves to the template, and section
// resolves to the text in th:fragment.
}
It will return the html
<section>
Keep this
</section>
I want to display product specification from an external service. To do that I have to pass the below JS string to Webview.
<!DOCTYPE html>
<html>
<body>
<div id="flix-minisite"></div>
<div id="flix-inpage"></div>
<script
type="text/javascript"
src="http://media.flixfacts.com/js/loader.js"
data-flix-distributor="12612"
data-flix-language="id"
data-flix-brand="Samsung"
data-flix-mpn="UA55JU6600KPXD"
data-flix-ean=""
data-flix-sku=""
data-flix-button="flix-minisite"
data-flix-inpage="flix-inpage"
data-flix-button-image=""
data-flix-fallback-language="e2"
data-flix-price=""
async>
</script>
</body> </html>
I've added the below method:
webview.NavigateToString("htmlString");
Adding this just displays the text from the service, but the images and videos are not getting displayed.
Expected result :
http://media.flixcar.com/delivery/minisite/show/12612/id/957752
What I'm I doing wrong?
For me, it doesn't work because the following script in not correctly added to your html page:
<script type="text/javascript" src="//media.flixcar.com/delivery/static/inpage/9/js/lazy.js"></script>
It is dynamically added by the script http://media.flixcar.com/delivery/static/inpage/9/js/append.js.
The url should be http://media.flixcar.com/delivery/static/inpage/9/js/lazy.js so as be correctly loaded by the webview (which is nothing else than Edge browser).
I also think that you need to update each image attributes. Currently they are added also without protocol which are not supported by all browsers (for me it only works with Chrome).
<div class="flix-feature-image">
<img src="//media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="//media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, //media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
Adding protocol will fix the issue:
<div class="flix-feature-image">
<img src="http://media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
In my Grails app I need to serve links to actual text (*.txt) files. If the user clicks the link, they should view the text file as plaintext inside their browser:
MyFiles.groovy controller:
==========================
class MyFiles {
def index() {
render(view: "myfiles")
}
}
myfiles.gsp:
============
<!DOCTYPE html>
<html>
<head>
<!-- Omitted for brevity -->
</head>
<body>
Click me to view a file
</body>
</html>
My questions:
Where should I place myfile01.txt inside the Grails project? Directly inside web-app? Inside a web-app/myfiles dir? Inside WEB-INF?; and
What should the link be in the GSP, such that Grails correctly resolves correctly and displays the file? I don't see anything under g:links that stands out as an obvious choice.
I'd recommend creating another folder where you have images/css.
<a href='<g:resource dir="somedirectory" file=myfiles01.txt" absolute="true" />'>my file</a>
I'm trying to pass the header object here:
<%=FileUtil.AddStylesheetToHeader(Header, "UsedItems.css") %>
In my Master page I have a <head runat="server">. And my aspx page definitely has a reference to my MasterPageFile in the page directive at the top of my MVC based .aspx.
I also have an import statement the namespace that the FileUtil class resides in :
<%# Import Namespace="xxxx.Web.Utilities" %>
In standard ASP.NET you could reference the header with this.Header but in MVC I'm not able to do this...or I'm missing some kind of Imports or something.
for some reason though at runtime, with that call to AddStylesheetToHeader, I get the following error:
The best overloaded method match for 'System.IO.TextWriter.Write(char)' has some invalid arguments.
I'm not sure why it's looking at a .NET type as I know when I mouseover my FileUtil at compile time it's definitely referencing xxxx.Web.Utilities.FileUtil.
In that method I'm using HtmlLink styleSheet = new HtmlLink(); I may not be able to use this as it's an ASP.NET Web control? Here's that method:
public static void AddStylesheetToHeader(HtmlHead header, string cssFilename)
{
HtmlLink styleSheet = new HtmlLink();
styleSheet.Href = "content/css/" + cssFilename;
styleSheet.Attributes.Add("rel", "stylesheet");
styleSheet.Attributes.Add("type", "text/css");
header.Controls.Add(styleSheet);
}
I don't think I can use conrols that stem from System.Web.Controls since this is an ASP.NET application? If so, the how can I add a control to the header controls collection? Would I need to do this differently in MVC?
There may be a way to do it the way you're attempting, but it's more common in ASP.NET MVC to create a content placeholder in the <head> rather than accessing it programmatically. For example, your master view could look something like this:
<html>
<head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
</html>
And your view could look like this:
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
<link href="/content/css/UsedItems.css" rel="Stylesheet" type="text/css" />
</asp:Content>
have you tried this.Request.Header?
You can use JavaScript to dynamically add content to your HEAD section as shown in the code below:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("head").append("<link href='Content/Site.css' rel='stylesheet' type='text/css' />");
});
</script>
I use this JavaScript code inside the head tag in order to populate the divs with a browse button so that users can upload images (swfupload).
<head>
...
<script type="text/javascript">
var swfu = function() {
return new SWFUpload({
// Backend Settings
// settings go here...
// Too long to display here
// Debug Settings
debug: false
});
}
window.onload = swfu;
</script>
</head>
....
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>
This works well, but the problem is when I try to put this code inside of a partial view. So far, I haven't be able to get this to work.
Is there anyone more experienced to the rescue?
Thank you
You can put your function like this:
<%= Ajax.ActionLink("YourAction",new AjaxOptions{ OnSuccess="swfu", UpdateTargetId = "spanButtonPlaceholder" }) %>
so your swfu function will be called if your update is successfull
The point of window.onload is to execute the given function once the page has finished... loading. That said, you should consider moving the onload to the bottom of the body. And I'm not the worlds biggest fan of keeping scripts in the head. :)
Partial views are rendered with Microsoft Ajax which does not evaluate JavaScript code. I would suggest looking at not using partial views in this case or look at other view engines like Spark....or put all required javascript in your parent view which kinda makes your code a bit sloppy