<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>
@Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "divImage",
InsertionMode = InsertionMode.Replace
})
</li>
</ul>
</div>
Two links in the _Layout: @Html.ActionLink and @Ajax.ActionLink
A div container used for AJAX calls
<div id="divImage" class="container body-content">
@RenderBody()
<hr />
</div>
And a footer.
<footer class="container body-content">
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>`
The issue arises with @Ajax.ActionLink showing the footer twice compared to @Html.ActionLink.
The problem was resolved by changing the return for the "Images" action to return PartialView() or setting Layout = null;
However, I am curious why only AJAX requires this fix. Is my solution adequate?
My assumption is there might be something related to CSS causing this issue, but I'm unsure what to look for.