Question

I got a strange errror. My html helper is supose to render html for a menu, simple ul’s and li’s. now the problem becomes that it starts to render a tags around other elements. The string returned from the html is correct, it seems something after that is causing the problem. I just cant figure out why. So i thought maybe a fresh pair of eys could spot it.

method

public static MvcHtmlString TopMenuLinks(this HtmlHelper helper, List<IMenuItemNodeViewData> menuItem)
        {
            if (menuItem != null && menuItem.Count > 0)
            {
                var count = 0;
                var resultString = "";

                var ulTag = new TagBuilder("ul");

                foreach (var item in menuItem.Where(x => x.IsVisibleInMenu))
                {
                    count++;
                    var liTag = new TagBuilder("li")
                                    {
                                        InnerHtml = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{1}\" />{2}", item.URL, "/Content/images/image.png", item.Name)
                                    };

                    ulTag.InnerHtml += liTag.ToString();

                    if (count % 3 == 0 || count == menuItem.Where(x => x.IsVisibleInMenu).Count())
                    {
                        resultString += ulTag.ToString(TagRenderMode.Normal);
                        ulTag = new TagBuilder("ul");
                    }
                }

                return MvcHtmlString.Create(resultString);
            }

            return null;
        }

partialview

<div class="top-columns link-container">

        <div class="links">

            <%= Html.TopMenuLinks(Model.MenuItems) %>

        </div>

    </div>

    <div class="top-columns icons">

        <div class="icons-contain">
            <img src="/Content/images/image.png" alt="image" />
        </div>

    </div>

It renders the following

<div class="links">
    <ul>
        <li>..</li>
        <li>..</li>
        <li>..</li>
    </ul>
    <ul>
        <li>..</li>
        <li>..</li>
    </ul>
    <a href="url"></a>
</div>

<a href="url"></a>
</div>
<a href="url">

    <div class="top-columns icons">

        <div class="icons-contain">
        </div>

</a>
</div>
<a href="url"></a>

It suppose to be

<div class="links">
    <ul>
        <li>..</li>
        <li>..</li>
        <li>..</li>
    </ul>
    <ul>
        <li>..</li>
        <li>..</li>
    </ul>
</div>
<div class="top-columns icons">

        <div class="icons-contain">
        </div>
</div>

Answer 1

you forgot to close <a> tag in the following line :

  InnerHtml = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{1}\" />{2}", item.URL, "/Content/images/image.png", item.Name)

try this :

 InnerHtml = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{1}\" />{2} </a>", item.URL, "/Content/images/image.png", item.Name)