像 Bootstrap 面包屑一样自定义 SiteMapPath
Customizing SiteMapPath like Bootstrap Breadcrumb
在Asp.Net 的网站中,我们可以简单地使用SiteMap 和SiteMapPath 添加面包屑。但是 SiteMapPath 在网站上添加了一个非常简单的面包屑。
我想在我的网站上自定义 SiteMapPath,以便为 SiteMapPath 中存在的每个节点包含来自 FontAwesome 的图标。此外,我想设计我的 SiteMapPath 类似于我在下面添加的代码段。
.breadcrumb-SiteMaster {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.breadcrumbSM {
list-style: none;
display: inline-block;
}
.breadcrumbSM .icon {
font-size: 14px;
}
.breadcrumbSM li {
float: left;
}
.breadcrumbSM li a {
color: #FFF;
display: block;
background: #3498db;
text-decoration: none;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
.breadcrumbSM li:nth-child(even) a {
background-color: #2980b9;
}
.breadcrumbSM li:nth-child(even) a:before {
border-color: #2980b9;
border-left-color: transparent;
}
.breadcrumbSM li:nth-child(even) a:after {
border-left-color: #2980b9;
}
.breadcrumbSM li:first-child a {
padding-left: 15px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
border-radius: 4px 0 0 4px;
}
.breadcrumbSM li:first-child a:before {
border: none;
}
.breadcrumbSM li:last-child a {
padding-right: 15px;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
border-radius: 0 4px 4px 0;
}
.breadcrumbSM li:last-child a:after {
border: none;
}
.breadcrumbSM li a:before, .breadcrumbSM li a:after {
content: "";
position: absolute;
top: 0;
border: 0 solid #3498db;
border-width: 20px 10px;
width: 0;
height: 0;
}
.breadcrumbSM li a:before {
left: -20px;
border-left-color: transparent;
}
.breadcrumbSM li a:after {
left: 100%;
border-color: transparent;
border-left-color: #3498db;
}
.breadcrumbSM li a:hover {
background-color: #1abc9c;
}
.breadcrumbSM li a:hover:before {
border-color: #1abc9c;
border-left-color: transparent;
}
.breadcrumbSM li a:hover:after {
border-left-color: #1abc9c;
}
.breadcrumbSM li a:active {
background-color: #16a085;
}
.breadcrumbSM li a:active:before {
border-color: #16a085;
border-left-color: transparent;
}
.breadcrumbSM li a:active:after {
border-left-color: #16a085;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="breadcrumb-SiteMaster">
<ul class="breadcrumbSM">
<li><a href="#"><span><i class="fa fa-home"></i></span></a></li>
<li><a href="#"><span><i class="fa fa-file"></i></span> Projects</a></li>
<li><a href="#"><span><i class="fa fa-angle-double-right"></i></span> Breadcrumb</a></li>
<li><a href="#"><span><i class="fa fa-rocket"></i></span> Getting started</a></li>
<li><a href="#"><span><i class="fa fa-arrow-down"></i></span> Download</a></li>
</ul>
</div>
我尝试在 SiteMapPath 中使用 CSS,但没有成功。
找到问题的答案。在 google 上进行了一些搜索,发现通过使用 ControlAdapter 和 BrowserFile,我可以将 SiteMapPath 编辑为类似于 Bootstrap 面包屑。
首先您需要添加一个名为 SiteMapPathControlAdapter 的 class,它将继承 WebControlAdapter,然后您可以在其中编辑 SiteMapPath 的布局
public class SiteMapPathControlAdapter : WebControlAdapter
{
public virtual string LinkCssClass
{ get; set; }
protected override void RenderBeginTag(HtmlTextWriter writer)
{
writer.WriteLine();
writer.WriteBeginTag("div");
writer.WriteAttribute("class", ((System.Web.UI.WebControls.SiteMapPath)(Control)).CssClass);
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("ul");
writer.WriteAttribute("class", "breadcrumbSM");
writer.Write(HtmlTextWriter.TagRightChar);
}
protected override void RenderEndTag(HtmlTextWriter writer)
{
writer.WriteEndTag("ul");
writer.WriteEndTag("div");
writer.WriteLine();
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Indent++;
SiteMapPath item = (SiteMapPath)Control;
SiteMapProvider Provider = ((System.Web.UI.WebControls.SiteMapPath)(Control)).Provider;
SiteMapNodeCollection collection = new SiteMapNodeCollection();
SiteMapNode node = Provider.CurrentNode;
if (node != null)
{
collection.Add(node);
while (node != Provider.CurrentNode.RootNode)
{
node = node.ParentNode;
collection.Add(node);
}
}
BuildItems(collection, true, writer);
writer.Indent--;
writer.WriteLine();
}
private void BuildItems(SiteMapNodeCollection items, bool isRoot, HtmlTextWriter writer)
{
if (items.Count > 0)
{
writer.WriteLine();
writer.Indent++;
for (int i = items.Count - 1; i > -1; i--)
{
BuildItem(items[i], writer);
}
writer.Indent--;
writer.WriteLine();
}
}
private void BuildItem(SiteMapNode item, HtmlTextWriter writer)
{
if ((item != null) && (writer != null))
{
if (item.Url.Length > 0)
{
writer.WriteLine();
writer.WriteBeginTag("li");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("a");
writer.WriteAttribute("href", Page.ResolveUrl(item.Url));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("span");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("i");
writer.WriteAttribute("class", string.Format("fa fa-{0}", item.Description));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteEndTag("i");
writer.WriteEndTag("span");
if (item.Title == "Home")
{
writer.Write("");
}
else
{
writer.Write(string.Format(" {0}", item.Title));
writer.WriteEndTag("a");
writer.WriteEndTag("li");
writer.WriteLine();
}
}
}
}
}
}
在此之后,将 BrowserFile 添加到您的项目中,并将其 link 添加到最近通过添加以下行添加到您的项目中的 ControlAdapter class在浏览器文件中。
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="SiteMapPathControlAdapter" />
</controlAdapters>
</browser>
然后您需要做的就是在 Site.Master 中添加 SiteMapPath 以在所有页面上可用,并将 CssClass 设置为 breadcrumb-SiteMaster 并且您是很高兴。
在Asp.Net 的网站中,我们可以简单地使用SiteMap 和SiteMapPath 添加面包屑。但是 SiteMapPath 在网站上添加了一个非常简单的面包屑。
我想在我的网站上自定义 SiteMapPath,以便为 SiteMapPath 中存在的每个节点包含来自 FontAwesome 的图标。此外,我想设计我的 SiteMapPath 类似于我在下面添加的代码段。
.breadcrumb-SiteMaster {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.breadcrumbSM {
list-style: none;
display: inline-block;
}
.breadcrumbSM .icon {
font-size: 14px;
}
.breadcrumbSM li {
float: left;
}
.breadcrumbSM li a {
color: #FFF;
display: block;
background: #3498db;
text-decoration: none;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
.breadcrumbSM li:nth-child(even) a {
background-color: #2980b9;
}
.breadcrumbSM li:nth-child(even) a:before {
border-color: #2980b9;
border-left-color: transparent;
}
.breadcrumbSM li:nth-child(even) a:after {
border-left-color: #2980b9;
}
.breadcrumbSM li:first-child a {
padding-left: 15px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
border-radius: 4px 0 0 4px;
}
.breadcrumbSM li:first-child a:before {
border: none;
}
.breadcrumbSM li:last-child a {
padding-right: 15px;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
border-radius: 0 4px 4px 0;
}
.breadcrumbSM li:last-child a:after {
border: none;
}
.breadcrumbSM li a:before, .breadcrumbSM li a:after {
content: "";
position: absolute;
top: 0;
border: 0 solid #3498db;
border-width: 20px 10px;
width: 0;
height: 0;
}
.breadcrumbSM li a:before {
left: -20px;
border-left-color: transparent;
}
.breadcrumbSM li a:after {
left: 100%;
border-color: transparent;
border-left-color: #3498db;
}
.breadcrumbSM li a:hover {
background-color: #1abc9c;
}
.breadcrumbSM li a:hover:before {
border-color: #1abc9c;
border-left-color: transparent;
}
.breadcrumbSM li a:hover:after {
border-left-color: #1abc9c;
}
.breadcrumbSM li a:active {
background-color: #16a085;
}
.breadcrumbSM li a:active:before {
border-color: #16a085;
border-left-color: transparent;
}
.breadcrumbSM li a:active:after {
border-left-color: #16a085;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="breadcrumb-SiteMaster">
<ul class="breadcrumbSM">
<li><a href="#"><span><i class="fa fa-home"></i></span></a></li>
<li><a href="#"><span><i class="fa fa-file"></i></span> Projects</a></li>
<li><a href="#"><span><i class="fa fa-angle-double-right"></i></span> Breadcrumb</a></li>
<li><a href="#"><span><i class="fa fa-rocket"></i></span> Getting started</a></li>
<li><a href="#"><span><i class="fa fa-arrow-down"></i></span> Download</a></li>
</ul>
</div>
我尝试在 SiteMapPath 中使用 CSS,但没有成功。
找到问题的答案。在 google 上进行了一些搜索,发现通过使用 ControlAdapter 和 BrowserFile,我可以将 SiteMapPath 编辑为类似于 Bootstrap 面包屑。
首先您需要添加一个名为 SiteMapPathControlAdapter 的 class,它将继承 WebControlAdapter,然后您可以在其中编辑 SiteMapPath 的布局
public class SiteMapPathControlAdapter : WebControlAdapter
{
public virtual string LinkCssClass
{ get; set; }
protected override void RenderBeginTag(HtmlTextWriter writer)
{
writer.WriteLine();
writer.WriteBeginTag("div");
writer.WriteAttribute("class", ((System.Web.UI.WebControls.SiteMapPath)(Control)).CssClass);
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("ul");
writer.WriteAttribute("class", "breadcrumbSM");
writer.Write(HtmlTextWriter.TagRightChar);
}
protected override void RenderEndTag(HtmlTextWriter writer)
{
writer.WriteEndTag("ul");
writer.WriteEndTag("div");
writer.WriteLine();
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Indent++;
SiteMapPath item = (SiteMapPath)Control;
SiteMapProvider Provider = ((System.Web.UI.WebControls.SiteMapPath)(Control)).Provider;
SiteMapNodeCollection collection = new SiteMapNodeCollection();
SiteMapNode node = Provider.CurrentNode;
if (node != null)
{
collection.Add(node);
while (node != Provider.CurrentNode.RootNode)
{
node = node.ParentNode;
collection.Add(node);
}
}
BuildItems(collection, true, writer);
writer.Indent--;
writer.WriteLine();
}
private void BuildItems(SiteMapNodeCollection items, bool isRoot, HtmlTextWriter writer)
{
if (items.Count > 0)
{
writer.WriteLine();
writer.Indent++;
for (int i = items.Count - 1; i > -1; i--)
{
BuildItem(items[i], writer);
}
writer.Indent--;
writer.WriteLine();
}
}
private void BuildItem(SiteMapNode item, HtmlTextWriter writer)
{
if ((item != null) && (writer != null))
{
if (item.Url.Length > 0)
{
writer.WriteLine();
writer.WriteBeginTag("li");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("a");
writer.WriteAttribute("href", Page.ResolveUrl(item.Url));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("span");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("i");
writer.WriteAttribute("class", string.Format("fa fa-{0}", item.Description));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteEndTag("i");
writer.WriteEndTag("span");
if (item.Title == "Home")
{
writer.Write("");
}
else
{
writer.Write(string.Format(" {0}", item.Title));
writer.WriteEndTag("a");
writer.WriteEndTag("li");
writer.WriteLine();
}
}
}
}
}
}
在此之后,将 BrowserFile 添加到您的项目中,并将其 link 添加到最近通过添加以下行添加到您的项目中的 ControlAdapter class在浏览器文件中。
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="SiteMapPathControlAdapter" />
</controlAdapters>
</browser>
然后您需要做的就是在 Site.Master 中添加 SiteMapPath 以在所有页面上可用,并将 CssClass 设置为 breadcrumb-SiteMaster 并且您是很高兴。