ControlAdapter for ASP SiteMapPath

Today i faced a small issue related Breadcrumb. I’m using asp:SiteMapPath to show Breadcrumb. It works fine. But look and feel is little boring and i want it convert to bootstrap style. I tried to customize the design with diffrent templates properties, but always it shows surround a tag and bootstrap not working.
after some googling i found a solution ; add a Control Adaper for this.

Now it working fine and looks good.

First add a class for this ControlAdapter SiteMapPathControlAdapter.

 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);
        }
        protected override void RenderEndTag(HtmlTextWriter writer)
        {
            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("a");
                    writer.WriteAttribute("href", Page.ResolveUrl(item.Url));
                    string linkCSS = (Control.Attributes["LinkCssClass"] ?? "").ToString();
                    writer.WriteAttribute("class", linkCSS);
                    writer.Write(HtmlTextWriter.TagRightChar);
                    writer.Write(item.Title);
                    writer.WriteEndTag("a");
                    writer.WriteLine();

                }
            }
        }
   }

Second add a browser file to link this adapter :

<browsers>
  <browser refID="Default">
    <controlAdapters>
       <adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="CSharpSampleWebApps.SiteMapPathControlAdapter" />
    </controlAdapters>
  </browser>
</browsers>

and my aspx page

<div>
        <asp:SiteMapPath runat="server" ID="SiteMapPath1" CssClass="btn-group btn-breadcrumb"
            LinkCssClass="btn btn-success">
        </asp:SiteMapPath>
    </div>

Now rendering HTML like :

    <div>
        
<div class="btn-group btn-breadcrumb">

		<a href="/default.aspx" class="btn btn-success">Home</a>

		<a href="/Services.aspx" class="btn btn-success">Services</a>

		<a href="/Training.aspx" class="btn btn-success">Training</a>


</div>

    </div>

Advertisements

2 thoughts on “ControlAdapter for ASP SiteMapPath

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s