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.
Related
I m building a Wen Application using Razor page (c#). So in my "_Layout.cshtml page" I m build this code:
<!DOCTYPE html>
<html style="height:110%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
<body style="width:100%;height:100%;">
<div class="container body-content">
#RenderBody()
</div>
</body>
</html>
So In my local pc, if I try to open Index Page, I can see this if I try to see Code of HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eresult srl</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
To see the index page on my local pc, I use this link "http:/localhost:9094/Pagina.aspx"
Now if I try to install this application on the server side, I have some problem of Graphic.
This is the url that I use: "http://url:9094/Questionario/Pagina.aspx"
This is the code that I can see if I see code of HTML page.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eresult srl</title>
<link href="/Questionario/Content/css?v=5h6Wc7kfOUsqxEEmYLsFbm8C9NAaEGNbzkeznwX1XR41" rel="stylesheet"/>
<script src="/Questionario/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<!--<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
As you can see on server side the system cannot load css and js file correctly.
You have to use relative paths all over your app especially when you deploy it to the server (like IIS):
~ won't work within static html code, therefore use:
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<link href="#Url.Content("~/Content/jquery-ui.css")" rel="stylesheet">
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")"></script>
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?
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>
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"
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>