Question

I am trying to replace <div> content after a form submit. Here is the code (it is a partial view):

    <% using (Ajax.BeginForm("Authenticate", "User", new AjaxOptions { HttpMethod = "post", UpdateTargetId = "authPanel", InsertionMode = InsertionMode.Replace}))
{%>
    <label>Username</label><%= Html.ValidatedTextBoxFor(username => Model.UserAuthienficateDto.Username, false) %>
    <label>Password</label><%= Html.ValidatedTextBoxFor(password => Model.UserAuthienficateDto.Password, false) %>
    <input name="Input" type="submit" class="button" value="Authenticate" />
<%}%>
<div id="authPanel">
<ul>
    <% if (HttpContext.Current.User.Identity.IsAuthenticated)
    {%>
        <li class="nonregister">Logged in as <%=HttpContext.Current.User.Identity.Name%></li>
        <li class="register"><%= Html.ActionLink("Logout", "Logout", "User")%></li>
    <%
        }%>
    <% else
    {%>
        <li class="nonregister">Not a member &nbsp;?</li>
        <li id="userRegisterDialogOpener" class="register">Sign up now!</li>
    <%}%>
</ul>
</div>

The problem is that after form submit I get whole partial view re-rendered. Also all the results are being rendered above the old ones (they have some offset though). Why InsertionMode.Replace is not working properly? Mant thanks in advance for your help.

Answer 1

I have solved the problem by separating form and authPanel to different partial views.