While I'm using Response.Redirect("~/Pages/Page.aspx"), style is loaded on the page, but unfortunately it is not loaded while I'm using Server.Transfer("~/Pages/Page.aspx") method.
The page looks following:
<html>
<head runat="server">
<link href="../Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
How to make the page load style.css using Server.Transfer() ?
Regards
The problem is that you use a relative path to your CSS file, you should use an abolute path.
If the css folder is inside your application root, you can use
<html>
<head runat="server">
<link href="/Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
or even
<html>
<head runat="server">
<link href="~/Css/Layout/style.css" type="text/css" rel="stylesheet" runat="server" ID="aUniqueId" />
</head>
<body></body>
</html>
Related
I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
This is the formal structure of my .cshtml file
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="~/lib/Hover/hover.css" />
<link rel="stylesheet" href="~/lib/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/lib/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="~/lib/ionicons/css/ionicons.css" />
<link rel="stylesheet" href="~/lib/jquery-toggles/toggles-full.css" />
<link rel="stylesheet" href="~/lib/morrisjs/morris.css" />
<link rel="stylesheet" href="~/lib/select2/select2.css" />
<link rel="stylesheet" href="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />
<link rel="stylesheet" href="~/css/quirk.css" />
<script src="~/lib/modernizr/modernizr.js"></script>
<script>
alert("hello from top");
</script>
</head>
<body style="background:none;">
---Several divs------
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/lib/jquery-toggles/toggles.js"></script>
<script src="~/lib/morrisjs/morris.js"></script>
<script src="~/lib/datatables/jquery.dataTables.js"></script>
<script src="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="~/lib/select2/select2.js"></script>
<script src="~/js/quirk.js"></script>
<script>
alert("hello from bottom");
</script>
</body>
</html>
Actually It's the design provided by our designer, The first alert message from head is popping up successfully so that it's sure javascript is not disabled in my browser, But the last alert is never shown. When I link the external scripts then that also never works either. This is really annoying. I referenced this question and many more in stackoverflow, But nothing solved.
How can I find out what actually happened here ? Is it because some error in previous js files ? OR it's because of old html4 ? There is nothing in my Action method except return View(); statement so that I think it's not necessary to post.
One additional thing is I've rendered one partial view using #Html.Action("...") in body, I think it's not the issue because I tried removing it as well. Please guide me, I am a beginner.
It's seems the same mistake I did some months ago. Your page is started from
<!DOCTYPE ...>
<html ...>
means It clarifies that you are not using any master layout page so any kind of #Scripts.Render as given in the answer you referenced won't work in the current situation. Just a simple solution is set Layout to null at the top of the page like,
#{
Layout = null;
...
}
and everything will work fine.
I recently installed a new site in Ektron. It created all the folders and files necessary to have it working. I created a custom MasterPage in VS 2012 with own folders and CSS/Script files and looking to import it into Ektron to use.
I imported from Workarea > Settings > Template and import template.
When I click on View for the template, I am seeing the following error:
Parser Error Message: Could not load type 'WMED.Site'.
Source Error:
Line 1: <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WMED.Site" %>
Line 2:
Line 3:
Source File: /Site.Master Line: 1
How do I resolve the error
:: Should I remove the inherit and namespace from the MP for it to work?
The HEAD:
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="theScripts/sliderJS.js"></script>
<link rel="stylesheet" href="theStyles/sliderStyle.css" type="text/css" />-->
<link rel="stylesheet" href="theStyles/pageStyle.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/trajanpro_style.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/blackjar_style.css" type="text/css" />
<script src="theScripts/jquery.webticker.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/tickerStyles.css" type="text/css" />
<script src="theScripts/pageScript.js" type="text/javascript"></script>
<script src="theScripts/placeholders.min.js" type="text/javascript"></script>
<script src="theScripts/jquery.sidr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jquery.sidr.light.css" type="text/css" />
<script src="theScripts/jssor.js" type="text/javascript"></script>
<script src="theScripts/jssor.slider.js" type="text/javascript"></script>
<script src="theScripts/jssorSlider.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jssorSlider.css" type="text/css" />
<!-- ENSURES HTML TAGS ARE COMPLIANT -->
<!--<link rel="stylesheet" href="theStyles/styleDiagnostic.css" type="text/css" />-->
<script>
$(window).resize(function () {
var docHeight = $(document).height();
var docWidth = $(document).width();
$('#lbl').text("height: " + docHeight + " width: " + docWidth);
});
</script>
<script>
function SearchNMClick() {
document.getElementById('HiddenSearchNM').click();
}
</script>
<asp:ContentPlaceHolder ID="HeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
You're probably using a Web Application project opposed to a Web Site. Because of this, the code for your MasterPages, ASPX templates, wireframes...etc. is compiled into a DLL (or DLLs) when you build the project.
When you deploy your Web Application project to your Ektron site, in additional to the files you've already pushed out, you have to copy your project's DLLs into the bin directory of the site. Your project will have a bin directory after building where you can find these, just look in File Explorer to find it if you don't see it.
/bin/WMED.dll
Also, if this is the case, do not push your .cs files to the server.
You don't need to import a MasterPage into Ektron, only ASPX templates are imported. The process is, create your ASPX template (with associated MasterPage), save it into your website and then register it with Ektron.
Check the master page's code behind file (the .cs) and make sure that the public partial class looks like public partial class WMED.Sitename is using the same. Also make sure that the .cs file is located in the same directory as the .master template.
I want to use the bootstrap framework along with http://silviomoreto.github.io/bootstrap-select/. it just doesnt work. Below are the codes. Please help.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Final_Year_Project_Allocation_System.silviomoreto_bootstrap_select_d4ec9bd.WebForm1" %>
<!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>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="bootstrap-select.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</form>
</body>
</html>
please help.
I don't see a reference to the actual bootstrap.css ?
You need to have something like (note the order - it's important):
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-select.css" rel="stylesheet" type="text/css" />
Then the JS
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-select.js" type="text/javascript"></script>
Make sure the path is correct of course.
EDIT
I'm also pretty sure that boostrap.js has a dependency on jquery - so make sure you include it as well (before the bootsrap.js).
EDIT 2
I also suspect that your paths are not correct. If this is the path for your javascript:
"../bootstrap/js/bootstrap.js"
Then most probably the path for your css would be (assuming that you just dropped bootstrap as-is and didn't place it in a different folder):
"../bootstrap/css/bootstrap.css"
I have some .aspx pages with one master pages. I want to give client side validation to all controls on the .aspx pages. For this i am using jquery validation.(ketchup plugins of validation by ashley on papermashup.com tutorials)
It works properly on .aspx page "Without" master page.
But when am using same code & link files on master page then it is not working.
Code without master page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="validation_demo.aspx.cs" Inherits="webpages_validation_demo" %>
<!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>
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.ketchup.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
<link rel="shortcut icon" href="../../Styles/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/jquery.ketchup.css" rel="stylesheet" type="text/css" />
<link href="../CSS/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/style_menu.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Form_style.css" rel="stylesheet" type="text/css" />
<link href="../CSS/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../image/jquery.js"></script>
<link href="../CSS/modalbox.css" rel="stylesheet" type="text/css" />
<script src="../Js/CommonFunctions.js" type="text/javascript"></script>
<script src="../Js/CommonValidations.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
</head>
<body>
<form action="" runat="server" method="post" id="signup">
<div style="margin-left:300px;margin-top:50px;">
<input type="text" class="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
</div>
</form>
</body>
</html>
Code with master page:
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master_demo.master.cs" Inherits="webpages_Master_demo" %>
<!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>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.ketchup.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
<link rel="shortcut icon" href="../../Styles/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/jquery.ketchup.css" rel="stylesheet" type="text/css" />
<link href="../CSS/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/style_menu.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Form_style.css" rel="stylesheet" type="text/css" />
<link href="../CSS/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../image/jquery.js"></script>
<link href="../CSS/modalbox.css" rel="stylesheet" type="text/css" />
<script src="../Js/CommonFunctions.js" type="text/javascript"></script>
<script src="../Js/CommonValidations.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
</head>
<body>
<form action="" runat="server" method="post" id="signup">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
aspx pge with master page:
<%# Page Title="" Language="C#" MasterPageFile="~/webpages/Master_demo.master" AutoEventWireup="true" CodeFile="demo_validation1.aspx.cs" Inherits="webpages_demo_validation1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function () {
$('#signup').ketchup();
});
</script>
<div style="margin-left:300px;margin-top:50px;">
<input type="text" class="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
</div>
</asp:Content>
I think you are missing the form element on your masterpage with the ID of signup
-- Update
OK
Change your input to the following
<input type="text" data-validate="validate(required ,number, minlength(10) ,maxlength(10))" name="number" />
Redownload the ketchup plugin here
https://github.com/mustardamus/ketchup-plugin/downloads
and use the following line
<script type="text/javascript" src="js/jquery.ketchup.all.min.js"></script>
instead of
<script type="text/javascript" src="../js/jquery.ketchup.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="../js/jquery.ketchup.validations.basic.js"></script>
This works for me.