adding schema to SiteMapPath control cause 404 error - asp.net

the following code would cause a 404 error. removing the code [itemtype="https://schema.org/BreadcrumbList"], then there is no error but using breadcrumb checker to validate the page, it is not recognized as breadcrumb. may i know which portion i am doing it wrong?
<asp:SiteMapPath ID="SiteMapPath1" itemtype="https://schema.org/BreadcrumbList" SkipLinkText="" runat="server" >
<NodeTemplate><a itemprop="item" href='<%#Eval("url") %>'><span itemprop="name"><%# Eval("title") %></span></a></NodeTemplate>
</asp:SiteMapPath>

asp:SiteMapPath itself doesn't have itemtype property so the error (in fact 5xx not 404). So the code should be a little more elaborated. Something like this.
<nav itemscope itemtype="http://schema.org/BreadcrumbList"><%--wrapper--%>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" : ">
<NodeTemplate>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"><%--wrapper for each breadcrumb--%>
<meta itemprop="position" content="<%#Container.ItemIndex+1 %>" /> <%--required by Google --%>
<a itemprop="item url" href='<%#Eval("url") %>'>
<span itemprop="name"><%# Eval("title") %></span>
</a>
</span>
</NodeTemplate>
</asp:SiteMapPath>
</nav>
And this is generated HTML
<nav itemscope itemtype="http://schema.org/BreadcrumbList">
<span id="SiteMapPath1"><img alt="Skip Navigation Links" src="/WebResource.axd?d=Ybg6Za1EIYGIkin6VPiwIFL99ITKyu6RhGnxJcLOO8DP1KA0-cdYa4ltoyl-vbOlqsJF4S8oq8kKVCD1XukqME04tF9L2ZSF8XWKW9sT_mc1&t=636668507379463780" width="0" height="0" style="border-width:0px;" /><span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<meta itemprop="position" content="1" />
<a itemprop="item url" href='/'><span itemprop="name">home</span></a></span>
</span><span> : </span><span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<meta itemprop="position" content="2" />
<a itemprop="item url" href='my-page.aspx'><span itemprop="name">My Page</span></a></span>
</span><a id="SiteMapPath1_SkipLink"></a></span>
</nav>
which passed Google Structured Data Test

Related

w3 bootstrap carousel in asp.net webforms

I am trying to implement Bootstrap Carousel in ASP.NET Web Forms, but bootstrap carousel is not working on site. Only images are being displayed without carousel slider. I have added css and javascript files to Site.Master and bootstrap carousel code from https://getbootstrap.com/docs/4.0/components/carousel/ site.
Default.aspx site :
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carousel-slides-with-controls">
<div class="carousel-item-active">
<img class="d-block w-100" src="Toys%20Images/toy%20top.jpg" alt="Top" />
</div>
<div class="carousel-item">
<img src="Toys%20Images/toy%20tank.jpg" />
</div>
<div class="carousel-item">
<img src="Toys%20Images/toy%20dinosaur.jpg" />
</div>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" area-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#" role="button" data-slide="next">
<span class="carousel-control-next-icon" area-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</asp:Content>
Site.Master Code :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</footer>
<script src="Scripts/jquery-3.5.1.slim.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</div>
</form>
</body>
</html>
Are you sure of the version of Bootstrap in Content/bootstrap.css? The ASP.Net Web Application (.Net Framework) template installs Bootstrap v3.4.1 by default.

skip a line/item in asp:repeater

Is there a possible way to skip an item in asp:repeater? I have <ul> and <li>s where I need the ul to be repeated only once. Since it has id and ids must be unique.
Here I need to skip repeating the <ul id="lightgallery"> then continue repeating the <li> tags.
<asp:Repeater ID="rptBlogs" runat="server">
<ItemTemplate>
<div class="blog-post">
<div style="display:none;" id="video<%# Eval("ID") %>">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="<%# !Eval("ArticleTypeValue").ParseString()%>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="post-left-img">
<ul id="lightgallery"> //this needs to be skipped
<li class="video" style="position: relative;" data-poster="/<%# Eval("ThumbImage").ParseString() %>" data-sub-html="<%# Eval("Description") %>" data-html="#video<%# Eval("ID") %>" >
<a href="javascript:void(0)">
<img class="img-responsive" src="/<%# Eval("ThumbImage").ParseString() %>" />
<div class="demo-gallery-poster">
<img src="/assets/images/play-button.png">
</div>
</a>
</li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
I know the common sense fact where the structure should be:
<ul>
<asp:repeater>
...
</asp:repeter>
</ul>
But that can't be done because of the HTML structure.
Solved but still open to better ideas. See below for my solution.
I used:
<ul id="lightgallery<%# Eval("ID") %>">
Instead of:
<ul id="lightgallery">
Then used jquery starts with selector:
$('[id^=lightgallery]')
I think a repeater in your repeater might allow you to get what you are looking for you just may have to tweak the data that you are binding.
Check out this answer
Repeater in Repeater
If that doesn't work then you can add an OnDataItemBound (similar to what is shown in the link) to find/remove your control on the server side.

Try to get data from sql with eval

I am trying to get data from sql but I couldn't find how to use.
<a href="#"> I want to get url link from database into link and try to add <img src="#"> image path from database.
I can get data from database for Literal. But cant find for html tags.
<asp:Repeater ID="LinksRepeater" runat="server"
OnItemDataBound="LinksRepeater_ItemDataBound">
<ItemTemplate>
<li>
<a href="#">
<span class="icon"></span>
<asp:Literal ID="LinksTitleLiteral" Text="" runat="server" />
<span class="menu-icon">
<img src="img/Coderbits.png" alt="Ana Sayfa" />
</span>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
Assuming the field containing image path is named ImageUrl you could simply do
<img src="<%# Eval("ImageUrl") %>" alt="Ana Sayfa" />
And the same for anchor tags
link

Master Page-ASP.NET

when I tried to create Web Form using Master page I got the HttpException:
HttpException (0x80004005): Content controls have to be top-level controls in a content page or a nested master page that references a master page.]
The Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="adminNav.master.cs" Inherits="Site.AdminPages.adminNav" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Page</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Site/Scripts/CSS/AdminPage.css" />
</head>
<body>
<div class="bs-example">
<form runat="server">
<nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<asp:LinkButton class="navbar-brand" Style="color: white" ID="AdminHomePage" runat="server" href="/Site/AdminPages/AdminPage.aspx">Home</asp:LinkButton>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Users</li>
<li>Profile</li> </ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<asp:Label ID="emailDeatilsLabel" runat="server" Style="color: white"></asp:Label>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<asp:LinkButton ID="LogOutLabel" runat="server" href="/Site/UserPages/LogOut.aspx">Log Out</asp:LinkButton>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</form>
</div>
</body>
</html>
Here is the code of Profile.aspx ( what I tried to run and got the exception ):
<%# Page Title="" Language="C#" MasterPageFile="~/AdminPages/adminNav.Master"
AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="Site.AdminPages.Profile" %>
<!DOCTYPE html>
<head>
</head>
<body>
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</body>
</html>
I tried also to write in Profile.aspx code only the elements (without ...) code but its still doesn't work
Content controls have to be top-level controls in a content page or a nested master page that references a master page
Visual Studio is telling you do do the following;
Wrap your mark up with the placeholder tags like this
<asp:Content Id="ContentI" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</asp:Content>
You do not need to put the html and body tags as they are injected from the master page.That is how master and child pages work.

Setting Image Transparency

i am having the source code
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="condition.aspx.cs" Inherits="condition" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<p>
<br />
<asp:ImageButton ID="ImageButton1" runat="server" Height="234px"
ImageUrl="~/images/condition.jpeg" Width="289px" />
</p>
<p style="font-size: small">
Very often there are health issues that cannot be clearly classified under a
specific medical specialty. The topics under this section include health issues
of this kind. This section also explains symptoms related to different kinds of
illnesses and diseases. The different medical specialties are also covered in
this section.</p>
<p style="font-size: small">
</p>
<p style="font-size: small">
</p>
<div class="clearfix" style="padding-left: 5px;">
<div style="float: left; width: 50%;">
<span style="font-size: small"> <a
href="http://www.aarogya.com/conditions-and-diseases/acute-diarrheal-disease.html"><span
id="act31">Acute Diarrheal Disease</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/allergy.html"><span
id="act16">Allergy</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/amebiasis.html"><span
id="act32">Amebiasis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/appendicitis.html"><span
id="act17">Appendicitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/arthritis.html"><span
id="act18">Arthritis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/asthma.html"><span
id="act19">Asthma</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/blindness.html"><span
id="act20">Blindness</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/blood-pressure.html"><span
id="act21">Blood Pressure</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/bronchitis.html"><span
id="act22">Bronchitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/brucellosis.html"><span
id="act33">Brucellosis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/chicken-pox.html"><span
id="act34">Chicken Pox</span></a><br />
• </span><a
href="http://www.aarogya.com/conditions-and-diseases/chikungunya-fever.html"><span
id="act35"><span style="font-size: small">Chikungunya Fever</span></span></a><span
style="font-size: small"><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/cholera.html"><span
id="act36">Cholera</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/conjunctivitis.html"><span
id="act25">Conjunctivitis</span></a><br />
• <a
href="http://www.aarogya.com/conditions-and-diseases/computer-health-hazards.html"><span
id="act148">Computer Health Hazards</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/dengue.html"><span
id="act37">Dengue</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/diphtheria.html"><span
id="act38">Diphtheria</span></a><br />
• <a
href="http://www.aarogya.com/conditions-and-diseases/diagnostic-tests.html"><span
id="act149">Diagnostic Tests</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/dysentery.html"><span
id="act26">Dysentery</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/guinea-worm.html"><span
id="act27">Guinea Worm</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/hepatitis.html"><span
id="act39">Hepatitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/hookworm.html"><span
id="act40">Hookworm</span></a>
</div>
<div style="float: left;">
• <a href="http://www.aarogya.com/conditions-and-diseases/influenza.html"><span
id="act41">Influenza</span></a><br />
• <a
href="http://www.aarogya.com/conditions-and-diseases/irritable-bowel-syndrome.html"><span
id="act28">Irritable Bowel Syndrome</span></a><br />
• <a
href="http://www.aarogya.com/conditions-and-diseases/japanese-encephalitis.html"><span
id="act29">Japanese Encephalitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/leprosy.html"><span
id="act42">Leprosy</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/leptospirosis.html"><span
id="act43">Leptospirosis</span></a><br />
• <a
href="http://www.aarogya.com/conditions-and-diseases/lymphatic-filariasis.html"><span
id="act44">Lymphatic Filariasis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/malaria.html"><span
id="act45">Malaria</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/measles.html"><span
id="act46">Measles</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/plague.html"><span
id="act30">Plague</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/poliomyelitis.html"><span
id="act47">Poliomyelitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/rabies.html"><span
id="act48">Rabies</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/rubella.html"><span
id="act49">Rubella</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/tetanus.html"><span
id="act50">Tetanus</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/tuberculosis.html"><span
id="act51">Tuberculosis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/typhoid-fever.html"><span
id="act52">Typhoid Fever</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/viral-hepatitis.html"><span
id="act178">Viral Hepatitis</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/whooping-cough.html"><span
id="act53">Whooping Cough</span></a><br />
• <a href="http://www.aarogya.com/conditions-and-diseases/yaws.html"><span
id="act54">Yaws</span></a><br />
• </span><a
href="http://www.aarogya.com/conditions-and-diseases/yellow-fever.html"><span
id="act55"><span style="font-size: small">Yellow Fever</span></span></a>
</div>
</div>
<p style="font-size: small">
</p>
</asp:Content>
and i want to add this following code
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
i dont want to affect the master page just the picture should get effected ,where to add this code ?
Maybe I'm missing something, but isn't that as simple as
<asp:ImageButton Style="opacity:0.4; filter:alpha(opacity=40);" ID="ImageButton1" ... />
When you're ready to get fancier, add a rule to a CSS file and refer to it as
<asp:ImageButton CssClass="yourclassname" ID="ImageButton1" ... />
Either way, realize the effect won't appear in all browsers.

Resources