asp.net - 像 Bootstrap Breadcrumb 一样自定义 SiteMapPath
问题描述
在 Asp.Net 网站中,我们可以使用 SiteMap 和 SiteMapPath 简单地添加面包屑。但是 SiteMapPath 在网站上添加了一个非常简单的面包屑。
我想在我的网站上自定义 SiteMapPath,以包含来自 FontAwesome 的图标,用于 SiteMapPath 中存在的每个节点。此外,我想设计类似于我在下面添加的代码段的 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 Breadcrumb。
首先,您需要添加一个名为SiteMapPathControlAdapter的类,它将继承 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添加到您的项目中,并将其链接到最近添加到项目中的 ControlAdapter 类,方法是在 BrowserFile 中添加以下行。
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="SiteMapPathControlAdapter" />
</controlAdapters>
</browser>
然后您需要做的就是在 Site.Master 中添加 SiteMapPath 以在所有页面上可用,并将 CssClass 设置为breadcrumb-SiteMaster,您就可以开始了。
推荐阅读
- python - 检测具有特定颜色的圆形物体
- python - 比较两个字典的键。如果键匹配,则将这些键、值复制到 python 中的文件
- postgresql - Postgres 版本兼容性
- c++ - 如何使用现代 CMake 安装捆绑的接口依赖项?
- angular - Angular 5 和原生 IOS/Android 通信
- perl - websocket异步反馈长流程
- java - 为什么 ForkJoinPool::invoke() 会阻塞主线程?
- sql - 如何避免联合所有
- javascript - $document.append($rootElement); null 不是对象(评估 context.createDocumentFragment)
- sql-server - 在 MSSQL 中将数据导出到类似 csv 的文件