Настройка SiteMapPath как Bootstrap Breadcrumb - PullRequest
0 голосов
/ 12 ноября 2018

На веб-сайте 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>

Я пытался использовать CSS в SiteMapPath, но это не сработало.

1 Ответ

0 голосов
/ 13 ноября 2018

Нашел ответ на проблему.Сделал поиск в Google и обнаружил, что с помощью ControlAdapter и BrowserFile я могу отредактировать SiteMapPath так, чтобы он был похож на загрузочную крошку.

Сначала вам нужно добавить класс с именем 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>

Затем все, что вам нужно сделать, это добавить SiteMapPath в Site.Master длябыть доступным на всех страницах и установить CssClass на breadcrumb-SiteMaster и все готово.

...