Question

I have a MVC4 asp.net application, I have two layouts a main layout for the main page and a second layout for the nested pages. The problem I have is with the second layout, on this layout I call a partial view which has my navigation links. In IE the navigation menu displays fine and when each item is clicked it navigates as expected. However in FF when the page renders the navigation bar is displayed but it has no ‘click functionality’ if you will its as if its simply text.

My layout of nested page:

<header>
            <img src="../../Images/fronttop.png" id="nestedPageheader" alt="Background Img"/>
            <div class="content-wrapper">

                <section >
                    <nav>
                    <div id="navcontainer">
                    </div>
                    </nav>
                 </section>
            <div>
         </header>

The script to retreive partial view and information for dynamic links on layout page.

<script type="text/javascript">
var menuLoaded = false;
$(document).ready(function () {
    if($('#navcontainer')[0].innerHTML.trim() == "")
    {
        $.ajax({
                url: "@Url.Content("~/Home/MenuLayout")",
                type: "GET",
                success: function (response, status, xhr)
                            {
                                var nvContainer = $('#navcontainer');
                                nvContainer.html(response);
                                menuLoaded = true;
                            },
                error: function (XMLHttpRequest, textStatus, errorThrown)
                        {
                                var nvContainer = $('#navcontainer');
                            nvContainer.html(errorThrown);
                        }
                });
   }
});
</script>

May partial view:

 @model Mscl.OpCost.Web.Models.stuffmodel

<div class="menu">
    <ul>
        <li><a>@Html.ActionLink("Home", "Index", "Home")</a></li>
        <li><a>@Html.ActionLink("some stuff", "stuffs", "stuff")</a></li>
        <li> <h5><a><span>somestuff</span></a></h5>

                    <ul>
                        <li><a>stuffs1s</a>
                        <ul>
                            @foreach (var image in Model.stuffs.Where(g => g.Grouping == 1))
                            {
                                <li>

                                <a>@Html.ActionLink(image.Title, "stuffs", "stuff", new { Id = image.CategoryId }, null)</a>
                                </li>
                            }

                        </ul>
                        </li>
                   </ul>
        </il>
        </ul>
        </div>

I need to know why this works fine in IE but why its not working in FF(all versions). Any assistance would be appreciated.

Answer 1

Replace this line

<a>@Html.ActionLink(image.Title, "stuffs", "stuff", new { Id = image.CategoryId }, null)</a>

with

@Html.ActionLink(image.Title, "stuffs", "stuff", new { Id = image.CategoryId }, null)

As @Html.ActionLink will generate the anchor itself.