I have have using Url Route but sometimes I feel like the HTML code is not rendering
This is my code in Global.asax
void Application_Start(object sender, EventArgs e)
{
RegisterRoutes(RouteTable.Routes);
}
public static void RegisterRoutes(RouteCollection routeCollection)
{
routeCollection.MapPageRoute("LogIn", "logga-in", "~/Login.aspx");
routeCollection.MapPageRoute("Contact", "kontakt", "~/Contact.aspx");
routeCollection.MapPageRoute("About", "om", "~/About.aspx");
routeCollection.MapPageRoute("Job", "jobb", "~/Job.aspx");
routeCollection.MapPageRoute("Connect", "anslut", "~/Connect.aspx");
routeCollection.MapPageRoute("Default", "", "~/Default.aspx");
routeCollection.MapPageRoute("Booking", "bokning/{Id}", "~/Booking.aspx");
routeCollection.MapPageRoute("DashboardDefault", "panel/", "~/Dashboard/Default.aspx");
routeCollection.MapPageRoute("DashboardAbout", "panel/om", "~/Dashboard/About.aspx");
routeCollection.MapPageRoute("DashboardContact", "panel/kontakt", "~/Dashboard/Contact.aspx");
routeCollection.MapPageRoute("DashboardLogIn", "panel/logga-in", "~/Dashboard/Login.aspx");
}
When going to the aspx site everyting is working fine ex http://www.dentalo.se/dashboard/login.aspx
se image below
Trying to access the same page but with friendly url instead http://www.dentalo.se/panel/logga-in
it looks like this.
Can anyone help me why this happens? I know for sure that the javascript is not rendering also.
Your css style-sheets are not loading. This happens because of the rewriting and the browser tries to load the file from the path /panel/assets/... Use absolute path to make things work.
<link href="/dashboard/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dashboard/assets/css/metro.css" rel="stylesheet" />
...
Related
I've been trying to add a css file to style a cshtml file, and so far I've been unsuccessful.
Here's what I've tried to do:
#model mvc.Models.LoginViewModel
#{
ViewData["Title"] = "Login";
}
<head>
<div class="text-center">
<h1 class="display-4">Login Page</h1>
</div>
<link rel="stylesheet" href="~/Content/login.css" type="text/css" />
</head>
Here is the directory tree with the two files I'm trying to link
Edit: when I put the css styling in a "style" tag in the cshtml then it works. I was hoping there was a way to do it with a css file.
Can you please help me?
Thank you.
From your project structure, I think you may misunderstand asp.net and asp.net core. .NET 5 is the next version of .NET Core.
You use .NET 5.0, so if you want to directly add css reference, you need add these static files to wwwroot folder in root project. Be sure you have added static files middleware in Startup.cs:
app.UseStaticFiles(); //be sure add this...
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
});
Then add reference like below:
<link rel="stylesheet" type="text/css" href="~/login.css" />
Reference: Serve files in web root
If you put static files to other folder(e.g Content folder) which is in root project, you need add the following code to Startup.cs first:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//...
app.UseHttpsRedirection();
app.UseStaticFiles(); // For the wwwroot folder.
// using Microsoft.Extensions.FileProviders;
// using System.IO;
app.UseFileServer(new FileServerOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(env.ContentRootPath, "Content")),
RequestPath = "/StaticFiles",
EnableDirectoryBrowsing = true
});
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default", pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
Add static files reference like below:
<link rel="stylesheet" type="text/css" href="/StaticFiles/login.css" />
Reference: Serve files outside of web root
I store avatar images in PGSQL in Heroku and I used to serve through API REST GET controller, everything fine. I'm now trying to serve through API REST URL at server domain, via thymeleaf, so I prepared an MVC for that. Everything is working, except that I can't use the server URL to embed into HTML tag in my frontend application, it shows a missing link, which I don't understand, because if I open the link itself in the browser it works well and shows the image.
What I'm trying to do is something similar to the google avatar HTML, I copied that google HTML simple code and served as it, in the google HTML works, but not with mine...
Google example:
https://lh3.googleusercontent.com/a-/AOh14GgQ4X0_nQVH0NszR1-YGu90CIk40XSWT97uqW_V=s96-c
My output:
https://chefscript.herokuapp.com/avatar?emailHash=7ad248c8b830100b95ae8fe57d6f07324b8d5c69872dcf4a5d280a993b8ab676
So, both works well, but I can only use the google one in my HTML IMG SRC at the frontend, my output shows a borken link. :(
My HTML Tempalte:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${title}"></title>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
</head>
<body style="margin: 0px; background: #0e0e0e;">
<img style="-webkit-user-select: none;margin: auto;" th:if="${avatarData != null}" th:src="'data:image/jpeg;base64,' + ${avatarData}">
<img style="-webkit-user-select: none;margin: auto;" th:if="${avatarData == null}" th:src="#{${avatarURL}}">
</body>
</html>
And my controller code:
#GetMapping("/avatar")
public String getAvatar(#RequestParam(name="emailHash", required=false, defaultValue="") String hashEmail, Model model) {
User user = userRepository.findByHashEmail(hashEmail).orElseThrow(() -> new ResourceNotFoundException());
byte[] image = userService.getImageBlobByEmailHash(hashEmail, true, false);
model.addAttribute("title", "AVT-" + hashEmail);
if ( image != null ) {
model.addAttribute("avatarData", Base64.getEncoder().withoutPadding().encodeToString(image));
} else {
if ( user.getAvatar() != "" && user.getAvatar() != null ) {
model.addAttribute("avatarData", null);
model.addAttribute("avatarURL", user.getAvatar());
} else {
model.addAttribute("avatarURL", "/img/avatar-128.png");
}
}
return "avatar";
}
Finally my frontend, where the broken link shows:
<a href (click)="false" [routerLink]="'/social/user/'+user.hashEmail">
<img class="s-ava-alone-img" width="150" height="150" [src]="'https://chefscript.herokuapp.com/avatar?emailHash='+user.hashEmail">
</a>
Find it.
Issue with headers and response type.
I wanted to use avatar images trhough HTML/TEXT to later one use in the IMG SRC at the Frontend. Bad strategy.
I saw in the google one that the Content-Type header is set to image/jpeg and the Content-Disposition header is set to inline. This way it can be used later on.
I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.
Hello I have an MVC application where a page is converted into a PDF using iTextSharp. I have a separate PDF style sheet called pdfStyleSheet.css that links to _PDFLayout. When linking the CSS page to my page layout the styles aren't being passed. My link is below. However if I put an inner style in _PDFLayout it works fine. Any ideas what I'm doing wrong?
The code below does not work
_PDFLayout Link
<link rel="stylesheet" type="text/css" href="~/Content/pdfStyleSheet.css" />
pdfStyleSheet.css
.test {
font-weight:bold;
color:red;
}
HTML
<div class="test">
#Html.DisplayNameFor(model => model.Requestor)
</div>
Controller
public ActionResult getPDF(int id)
{
MEOmodel model = _repository.GetMEOById(id);
return new PdfActionResult(model);
}
I want to display an iframe in a .aspx page, and the iframes source should be the same page.
I need to use a relative uri.
What value should I give the 'src' attribute?
I realise this is a little unusual - the page will be displayed in different states depending on parameters passed in, so the iframe won't be displayed within itself.
If you do this you will get an endless loop... the processsing will "never end". maybe thats why it is white? it is really processing pages..
- is that what you want ? if you for example want just 2-3 pages in depth, you can youse querystring and for example disable the iframe when the querystrings are incremented to 3.
MyPage.aspx?depth=1 --MyPage.aspx?depth=2 --MyPage.aspx?depth=3 etc
The literal relative path should work. IE: MyPage.aspx
Here is an ASP.NET Example...
Seemed to work fine for me with the following...
Markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe runat="server" id="myFrame" src="Default.aspx?message=Hello%20World"></iframe>
<div id="myDiv" runat="server"></div>
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string message = Request.QueryString["message"];
if (null != message)
{
myDiv.InnerText = message;
myFrame.Visible = false;
}
else
{
myDiv.Visible = false;
}
}
}
}
The short answer is src="localfilename.aspx" within the iframe tag. The web standard, loosely applied, says anything not proceeded by a '/' is relative to the location of the current page. Sometimes src="" might even work for substituting the current file name (at the browser level)