Ajax.BeginForm return PartialView code does not update

Question

I am doing a login logout functionality using Ajax partial. For this I have a View which checks if the user is logged in or not and shows login or logout form accordingly. On submit it does a ajax request and logs in or out the user. after doing so in controller I return same partial view.

So expected behavior is on return partial view must again check for login status and refresh the view accordingly, but instead same form is loaded.

Partial View:

@model Models.LoginModel


@if (Member.MemberIsLoggedOn())
{
    using (Ajax.BeginForm("LoginForm", "Account", null, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "login-form-update",
},new {
    @class="loginform form"
}))
    {

    <div class="col-md-12 padding-zero">
        <div class="row flt-right">
            Hello @Context.User.Identity.Name,  <input type="submit" name="logout" class="btn btn-default" value="Log Out" />
        </div>
    </div>

    }
}
else
{

    using (Ajax.BeginForm("LoginForm", "Account", null, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "login-form-update",
}, new {
    @class = "loginform form"
}))
    {

    <div class="col-md-12 padding-zero">
        <div class="row flt-right">
            <div class="form-group col-md-5">
                @Html.TextBoxFor(x => Model.Username, new { @class = "form-control", @placeholder = "Username" })
            </div>
            <div class="form-group col-md-5">
                @Html.TextBoxFor(x => Model.Password, new { @class = "form-control", @placeholder = "Password", @type = "Password" })
            </div>
            <div class="form-group col-md-2 flt-right">
                <input type="submit" name="login" class="btn btn-default" value="Go" />
            </div>
        </div>
    </div>
    }
}

Controller:

public class AccountController : Controller
    {
        [HttpPost]
        public ActionResult LoginForm(LoginModel model)
        {

            if (!ModelState.IsValid)
            {

                //Do nothing
            }

            // Login
            if (Membership.ValidateUser(model.Username, model.Password))
            {
                FormsAuthentication.SetAuthCookie(model.Username, false);
                return PartialView("Header/LoginForm", new Models.LoginModel());
            }
            else
            {
                ModelState.AddModelError("Username", "Username is not valid");
                //do nothing
            }
        }

        public ActionResult Logout()
        {

            FormsAuthentication.SignOut();
            Session.Clear();
            return PartialView("Header/LoginForm", new Models.LoginModel());
        }

    }

Now my problem is login/logout happens properly, but changes do not reflect unless page is refreshed, which is i want to avoid by Ajax.BeginForm(),

update If i click two times the view changes, but this is not a good user experience.

You set `UpdateTargetId = "login-form-update"`, but is there any element with `id="login-form-update"` in your html? — ekad, Apr 07 '15 at 11:01
yes there is, it is outside that partial view, i tried two different partial views after logging in and out, which worked to some extent but still i did not get `@Context.User.Identity.Name` before refresh — Chaitanya Gadkari, Apr 07 '15 at 11:05
Try to activate Firebug and see if there's any errors after logging in or out. — ekad, Apr 07 '15 at 11:07
No errors, response is html from partial view, but it do not reflect, In code debugging also, it does not hit breakpoint in view. — Chaitanya Gadkari, Apr 07 '15 at 11:28
It is working fine, if i refresh the page i can see, it is a CMS method, not in my scope. — Chaitanya Gadkari, Apr 07 '15 at 11:40
Is this related to mvc-5 in any way? Seems like mvc-4 and forms auth. — jamesSampica, Apr 08 '15 at 05:08

score 3 · Answer 1 · answered Apr 07 '15 at 12:01

I think this might be due to cache problem. You need to use output cache attribute to disable the cache for that action method . You can use something like this.

 [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

Also clear your ModelState before the return .

 ModelState.Clear();
 return PartialView(model);

Ajax.BeginForm return PartialView code does not update

1 Answers1