Link pages without using my controller - html

my project is (controller + views...)
is it wrong to link 2 html pages, not through the servlet controller?
<html>
page2
</html>
----or---
<html>
page2
</html>
and then the server make the forward:
if (path.equals("/gotoPage2")) {
request.getRequestDispatcher("/views/page2.html").forward(request,
response); }

The second one is more clean in terms of keeping your logic in one place instead of doing logic in your view, although performance wise and easyness the first one is faster.
Pretty much up to you and what your needs/wants are

Depends on the scenario ,
<html>
page2
</html>
can be done to serve the static content as mainly html files are intended.Because you are not modifying the request attributes
<html>
page2
</html>
Can be done , when you pass some attributes in the request or add some filters

Related

i want to display data as json in html

i'm using this 1 as api for my flutter app ( get data for FutureBuilder 2)
i want to make page like it to could put my data in it ,I tired to put my data in html file and upload to
3,it seems like it 4
<body>
<div>{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth#reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver#reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong#reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt#reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris#reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos#reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}</div>
</body>
put when I use postman 5 it read link as HTML ,I want postman read it like json
to could use it in flutter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
let data = {"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth#reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver#reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong#reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt#reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris#reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos#reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}
data = JSON.stringify(data,null,4)
$('pre').text(data)})
</script>
</head>
<body>
<pre>Toggle between slide up and slide down for a p element</pre>
</body>
</html>
use pre tag to display as it will show the text in formatted structure, use script section to format the test. use JSON.stringify(data,null,intent) to format the data

Issue Calling html With AngularJS ng-Include or Directive

I want to implement AngularJS's ng-include statement into my website to reduce code redundancy, but having trouble getting it to fully work. Currently, my index.html page is calling pageLayout.html My index.html is calling pageLayout.html successfully, but when adding a <h1> tag in index.html I cant put it on top of the pageLayout.html content that I call. Does anyone have any ideas?
Here is the link: http://plnkr.co/edit/uarelZgzmITJXg2pYXfg?p=preview
I have also tried using a directive like the following: http://plnkr.co/edit/VmAO47l7RMXTGYYFFgLB?p=preview but still having issues.
Thanks!
The transclusion strategy is set to element not to true so you can not insert extra content.
Moreover the content is wiped everytime the template value changes
And using transclusion with ngInclude does not make sense
I would rather use a directive with transclusion (or bind the title) if you want to avoid code duplication, something like
directive('pageContainer',function(){
return {
template:'<div class="divSize" ><h1>{{title}}</h1><div ng-transclude></div></div>',
scope:{
title:"#"
}
}
})

Layout page's code not being sent to content pages

I have a _SiteLayout.cshtml file which structures the site and has some C# code on it. How do I send the _SiteLayout's C# code to all of its subpages? I am using WebPages Razor 2.
Thank you in advance.
There are two methods for implementing a layout page:
use the Layout command in the code section of every page, as outlined in Creating a Consistent Layout in ASP.NET Web Pages (Razor) Sites
or initialize the same layout page for all files in a single folder using the _PageStart.cshtml file(Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites).
In the latter case you could disable the layout page for a single page using Layout = null in the code section.
Edit
If you want to pass data from a master page to a partial page, you must use the RenderPage() method instead of the RenderBody() method, but the structure of your site fully changes.
If, by example, you want to create a master page that extracts data from a table and passes them to a partial page that can change, your master page could be something like:
#{
var db = Database.Open("Northwind");
var data = db.Query(#"SELECT [Product Id], [Product Name],
[English Name] FROM Products ");
var page = "Partial.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
#RenderPage(page, new {gridData = data})
</body>
</html>
The code in Partial.cshtml takes data from the Page.gridData variable and displays them in a WebGrid:
#{
var grid = new WebGrid(Page.gridData);
}
<div>#grid.GetHtml()</div>

How to load a different image depending on the page content?

I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}

How to include a CSS link if a call isn't done via AJAX?

I have a page 'foo.html' that populates a table via AJAX 'ajax.html?options=option1'(accesses a database.)
'foo.html' has a css linked to it that makes the table from ajax.html look nice. However, I'd like to have ajax.html also look nice with a css if it is directly accessed. if I add <link rel="stylesheet" type="text/css" href="/dev/css/default.css" /> then the AJAX inserts the link again in foo.html which I don't want. Is there any way I can make the css link code not show up in the AJAX call or only show up on non-AJAX calls?
Thanks.
an easy way i can think of to solve this problem is to pass an additional parameter that defines the calling context.
The easiest way to do this is to use jQuery.
Load the ajax.html page with jQuery.get()
on success, do :
Remove the stylesheet : $('link[rel=stylesheet]').remove();
If you then want to add another stylesheet :
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'http://domain.com/stylesheet.css'
});
$("head").append( link );
Or change it later :
$("link").attr("href","http://domain.com/stylesheet.css");