ASP.NET CSS file path resolution confusion

ASP.NET CSS file path resolution confusion - c#

I am new to ASP.NET. Inside the master page I specify the header code which contains css and javascript file declarations and use runat=server attribute. Now for javascript files I have to specify the ResolveUrl method in the master page otherwise they won't get executed by the browser but CSS files will work fine without ResolveUrl method.
I thought CSS files were also executed on the client side and don't understand why they do not require using ResolveUrl method.
Why do JavaScript files require the ResolveUrl method, but CSS files do not?
Here is an excrept from the master page head code:
<head runat="server">
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Home </title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="~/Content/css/skeleton.css" class="responsive">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/color/orange.css" class="color">
<link rel="stylesheet" href="~/Content/css/flexslider.css">
<link rel="stylesheet" href="~/Content/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/css/colorbox.css">
<link rel="stylesheet" href="~/Content/css/sequence.css">
<!-- Fonts
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
<!-- JavaScript
================================================== -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/flexslider-min.js") %>"> </script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/selectnav.min.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/ui.totop.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/easing.1.3.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/jcarousel.min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/jflickrfeed.min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/twitter/tweet.min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/custom.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/sequence-min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/quicksand.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/js/colorbox.js") %>"></script>

Related

CSS Not Working In _Host.chstml In Blazor Server

Here I have blazor server app, in app I have two _Host.cshtml, one for website which is default _Host.cshtml and another for admin panel that is _HostAdmin.cshtml. Both of them have separate css and js file. I too have separate layout, for website I have Mainlayout.razor which should use _Host.cshtml and for admin panel I have AdminLayout.razor which should use _HostAdmin.cshtml .
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
Below is my _HostAdmin.cshtml
#page "/Admin"
#namespace MCQ.Pages._Pages_Admin__HostAdmin
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="~/Admin" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
<script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
<script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="~/Adminlte/plugins/moment/moment.min.js"></script>
<script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="~/Adminlte/dist/js/adminlte.js"></script>
<script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
<script src="~/Adminlte/dist/js/demo.js"></script>
</body>
</html>
Below is Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
});

You state
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
and I assume your question is "Why".
You're adding a new razor component page to the existing application - probably with a route of something like "/admin/myadminpage". You're misunderstanding what's actually going on.
_Host.cshtml loads the SPA, but that's the only get/post that happens. Navigation after that is changing out components in the DOM. Loading a component with the layout AdminLayout just changes out the Layout component. There's no toing and froing with the server.
What you are trying to do requires a reload of the SPA. You could use:
NavigationManager.NavigateTo("/admin/myadminpage", true);
Also even if you do force a reload, the Fallbacks are in the wrong order - the default before the specific.
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");

Cannot read property 'unobtrusive' of undefined

added in layout
<script src="#Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /><link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

different source code in c# webBrowser than in chrome

I try to click hyperlink on this website https://ppuslugi.mf.gov.pl/_/
The problem is that in webBrowser form website have different source code than in chrome browser and I can't do anything.
This is example source code from chrome <a class="SidebarLink SidebarLinkChVAT" href="javascript:;" onclick="FWDC.executeAction(1005, null, 'FLOW');" title="">Sprawdź podmiot w VAT</a>
and this is code from webBrowser
<!DOCTYPE html>
<html>
<head>
<title>Portal Podatkowy</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" content="notranslate">
<link rel="shortcut icon" href="../Icon/favicon.ico?_=636674229211578551" type="image/vnd.microsoft.icon">
<link rel="icon" href="../Icon/favicon.png?_=636674229211578551" type="image/png">
<link rel="stylesheet" type="text/css" href="../Resource/jquery-ui-1.10.2.custom.css?h=1503528615">
<link rel="stylesheet" type="text/css" href="../Resource/jquery.qtip.min.css?h=1233152629">
<link rel="stylesheet" type="text/css" href="../Resource/WDC.css?h=2111090127">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../Resource/WDC.IE.css?h=821935023">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="../Resource/WDC.IE.6.css?h=1759023773">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../Resource/WDC.IE.7.css?h=-1436668032">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../Resource/WDC.IE.8.css?h=1091124831">
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="../Resource/WDC.IE.9.css?h=-1672926084">
<![endif]-->
<link rel="stylesheet" type="text/css" href="../Resource/WDC.Controls.css?h=691064069">
<link rel="stylesheet" type="text/css" href="../Resource/Site.css?h=-489788811">
<script type="text/javascript" src="../Resource/jquery-1.11.0.min.js?h=-1771467163"></script>
<script type="text/javascript" src="../Resource/jquery-migrate-1.2.1.min.js?h=235038801"></script>
<script type="text/javascript" src="../Resource/globalize.min.js?h=-688734152"></script>
<script type="text/javascript" src="../Resource/jquery-ui-1.10.4.custom.min.js?h=1429086502"></script>
<script type="text/javascript" src="../Resource/jquery.ba-hashchange.min.js?h=-488335589"></script>
<script type="text/javascript" src="../Resource/jquery.watermark-3.2.0.min.js?h=1554632688"></script>
<script type="text/javascript" src="../Resource/jquery.qtip.min.js?h=1160580903"></script>
<script type="text/javascript" src="../Resource/jquery-ui-1.10.4-i18n.min.js?h=1755188919"></script>
<script type="text/javascript" src="../Resource/jquery.form.js?h=580982893"></script>
<script type="text/javascript" src="../Resource/json2.min.js?h=-1255456783"></script>
<script type="text/javascript" src="../Resource/WDC.js?h=-1395956209"></script>
<script type="text/javascript">
FWDC.initialize({
standardDecodes: {"CapsLockOn":"Caps Lock jest w\u0142\u0105czony","LogPassword":"Has\u0142o dla loga:","MsgBoxOk":"OK","MsgBoxCancel":"Anuluj","MsgBoxYes":"Tak","MsgBoxNo":"Nie","DialogClose":"Zamknij","NotifyReply":"Odpowiedz","NotifyDismiss":"Zamknij","StopAutoRefresh":"Stop","LogOffPrompt":"Czy na pewno chcesz si\u0119 wylogowa\u0107? Wszelkie niezapisane zmiany zostan\u0105 utracone.","CookiesDisabled":"W Twojej przegl\u0105darce ciasteczka zosta\u0142y wy\u0142\u0105czone. Cookies s\u0105 wymagane do korzystania z tej witryny.","RestartSession":"Rozpocznij now\u0105 sesj\u0119","ReplayTitle":"Odtwarzanie","LoggedOff":"Wylogowany","SessionExpiring":"Twoja sesja wyga\u015bnie w ci\u0105gu 5 minut, je\u015bli nie klikniesz przycisk OK.","BusyNewWindow":"Otw\u00f3rz nowe okno","AttachmentError":"Wyst\u0105pi\u0142 nieznany b\u0142\u0105d przy pr\u00f3bie za\u0142adowania pliku.","ImportError":"Wyst\u0105pi\u0142 nieznany b\u0142\u0105d przy pr\u00f3bie zaimportowania pliku.","MediaPlay":"Play","MediaPause":"Pause","MediaError":"An error occurred while loading the media file.","MediaLoading":"Loading"},cssVer: '13288045'});
</script>
<!--<link rel="stylesheet" type="text/css" href="../../Site.css">-->
<style type="text/css">
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient { filter: none; }
</style>
<![endif]-->
</head>
<body>
<div class="PageWrapper">
<div class="PageHeader">
<div class="middlenav-image-box"><a class="header-link middleheader_button_kt" href="http://www.finanse.mf.gov.pl/web/wp/kontakt" title="Przejdź do danych kontaktowych" target="_blank"> <span>Kontakt</span> </a></div>
<div class="middlenav-image-box"><a class="header-link middleheader_button_pp" href="http://www.portalpodatkowy.mf.gov.pl/" title="Przejdź do Portalu Podatkowego" target="_blank"> <span>Portal<br />Podatkowy</span> </a></div>
<div class="middlenav-image-box"><a class="header-link middleheader_button_mf" href="http://www.mf.gov.pl/ministerstwo-finansow" title="Przejdź do serwisu BIP Ministerstwa Finansów" target="_blank"> <span>Ministerstwo<br />Finansów</span> </a></div>
</div>
<div class="ContentWrapper">
<noscript><div class="NoScript">Javascript must be enabled to use this site.</div></noscript><script type="text/javascript">FWDC.setVerLast('1._.dPkTWHMYZprN_WET1fEqBr4-5k41', 'HTML: _ [Page,139211310] # 2018-07-17 11:15:24.0640')
</script><script>FWDC.loadManager();</script>
<div id="FAST_MANAGER_PLACEHOLDER"></div>
<div class="clearer"></div>
</div>
</div>
</body>
</html>
How can I get to the element from chrome example in this situation?

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>) javascript

I am having a bit different issue regarding javascript on my aspx page. I am not using any Masterpage at the moment well the said configuration is working fine in another project but i m banging my head and googled the solution but still searching...
MY ASPX CODE
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="comp1.aspx.cs" Inherits="StudentManagement.comp1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
Submit / Update Complains
</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="Style/structure.css" />
<link rel="stylesheet" type="text/css" href="Style/form.css"/>
<link rel="stylesheet" type="text/css" href="Style/Submitbtn.css" />
<link rel="stylesheet" type="text/css" href="Style/MenuMaster.css"/>
<link rel="stylesheet" type="text/css" href="Style/Logout.css"/>
<link rel="stylesheet" type="text/css" href="Style/Logoutbtn.css"/>
<link rel="stylesheet" type="text/css" href="Style/impromptu.css"/>
<!-- JavaScript -->
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="Scripts/wufoo.js"></script>
<script type="text/javascript" src="Scripts/jquery-impromptu.2.6.min.js"></script>
<script type="text/javascript">
function confirmSubmit() {
$.prompt('Are you sure you want to submit?'
, {
buttons: { Ok: true, Cancel: false }
, callback: confirmSubmitResult
}
);
return false;
}
function confirmSubmitResult(v, m, f) {
if (v) //post back if the user clicked OK
$('#<%= btnSubmit.ClientID %>').click();
}
</script>
</head>
Little help will be highly obliged

You can't use a Response.Write block within a runat="server" tag. Have a look at this post for the reasons behind this and a fix:
Javascript:
function confirmSubmitResult(v, m, f) {
if (v) //post back if the user clicked OK
$('#<%# btnSubmit.ClientID %>').click();
}
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}

JQuery Validation not working on master page in asp .net

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.

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

ASP.NET CSS file path resolution confusion - c#

Related

CSS Not Working In _Host.chstml In Blazor Server

Cannot read property 'unobtrusive' of undefined

different source code in c# webBrowser than in chrome

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>) javascript

JQuery Validation not working on master page in asp .net

Categories

Resources