How do I refresh a second partial view, after the first partial view is updated?

Question

I have a page which has a partial view (it's a login form). When the submit button is clicked, it calls the controller and logs the person in and refreshes the login form to show that he is logged in.

I now need to update the portion of the screen that shows the login button, or if he is logged in, shows "Hello, Logged In user"

I have a partial view written that shows whether or not the person is logged in, but I don't know how to call it after the success of the first one. I know there is an OnSuccess event, and that seems to be where I would wire that up, but I am not sure how to do this.

 @using (Ajax.BeginForm("Login", "Account", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "loginSection", }))
    {
         <div id="loginSection">

        ...form omitted for clarity.  

        <input type="submit" value="Log in" />
         </div>  
     }

This is the partial view that needs to be updated after the login.

<ul id="menu">
@if (Request.IsAuthenticated)
{
    <text>
    Hello, @User.Identity.Name
    </text>
}
else
{
    <ul>
        <a onclick="openLoginWindow()">Login</a>
        <a onclick="openRegisterWindow()">Register</a>
    </ul>
}

score 0 · Answer 1 · edited May 23 '17 at 11:49

Instead of using Ajax.BeginForm, use normal form and do the form posting with your custom code so that you can controll the success handler as you wish

<div id="login">
@using(Html.Beginform())
{
  <input type="text" name="UserName" />
  <input type="text" name="Password" />
  <input type="submit" id="btnLogin" />
}
</div>

and the script which will listen to the submit button click event and send the form the action method.

$(function(){

  $("#btnLogin").click(function(e){

     e.preventDefault();
     var _this=$(this);
     var _form=_this.closest("form");
     $.post(_form.attr("action"),_form.serialize(),function(res){
        if(res.Status==="authenticated")
        {
          //Let's hide the login form
          $("#login").hide();
          $("#yourSecondDiv").html(res.PartialViewContent); 
        }
        else 
        {
          alert("Wrong password");
        }
     });

  });
});

So the javascript code is expecting a JSON structure like below from the controller action

{
  "Status":"Authenticated",
  "PartialViewContent" : "<p>The markup you want to show</p>"
}

the PartialViewContent will hold the markup you want to show to the user.

public ActionResult Login(string UserName,string Password)
{
  //to do : Build the JSON and send it back
}

This answer will tell you how send the markup of a partial view in a JSON property to client.

score 0 · Accepted Answer · answered Dec 14 '13 at 17:20

Here is what worked for me:

Added OnSuccess:

@using (Ajax.BeginForm("Login", "Account", new AjaxOptions { 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "loginSection",
        OnSuccess = "successfulLogin"
    }))
    {... details omitted.

Then added this:

function successfulLogin() {
    $('#loginPartial').load('Account/LoginLinksPartial');

which calls in the controller:

public ActionResult LoginLinksPartial()
    {
        return PartialView("_LoginLinks");
    }

How do I refresh a second partial view, after the first partial view is updated?

2 Answers2