Question

My site has a concept like Skype that allow users to go "Online" and "Offline". I created a partial view that allows the user to switch mode:

@if (Convert.ToBoolean(ViewData["IsLogged"].ToString()))
{
<div id="onlineStatus">
    You are currently <strong>ONLINE</strong> >>
    @Html.ActionLink("Go OFFLINE", "GoOffline", "Account")
</div>
}
else
{
<div id="offlineStatus">
    Ready for business >>
    @Html.ActionLink("Go ONLINE", "GoOnline", "Account")
</div>           
}

This is how we load the Partial View:

public ActionResult OnlineStatusCtrl()
{
     if (SiteUser.IsAuthenticated)
        ViewData["IsLogged"] = SiteUser.IsOnline.ToString();

      return PartialView("OnlineStatusCtrl");
}

When a user clicks on the link "Go ONLINE" or "Go OFFLINE", the Controller respond as:

public ActionResult GoOnline()
{
    if (SiteUser.IsAuthenticated)
        SiteUser.GoOnline();

    ViewData["IsLogged"] = "True";

    return RedirectToAction("Index", "Home");
    //return PartialView("OnlineStatusCtrl");
    //return EmptyResult();
}

public ActionResult GoOffline()
{
    if (SiteUser.IsAuthenticated)
        SiteUser.GoOffline(true);

    ViewData["IsLogged"] = "False";
    
    return RedirectToAction("Index", "Home");
}

This works well …but the ONLY problem is that if I am on View XXXX, and I click on "Go Online", the controller redirects me to the Index View.

I tried "return EmptyResult()" or "return PartialView("OnlineStatusCtrl") but it does just not work.

From the code, you can see that the only thing the PartialView cares about is the "ViewData[‘IsLogged’] value"

QUESTION:
What is the way to REFRESH a partial view without having to refresh the entire page or redirect to the main page?

Is it maybe a matter of putting an Html.Beginform() ?
Is it maybe a matter of the Controller returning something that just refresh the content of the PartialView independently from what view is holding the PV itself?

Aiaiaiaia
I still can’t figure out how MVC works with PartialViews/

---

UPDATE
I have updated the code as x suggested and the HTML output is as follow:

<div id="divStatus">
    <form action="/" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#divStatus" id="form0" method="post">        
        <div id="offlineStatus">
            Ready for business >>
            <a href="/Account/GoOnline">Go Online</a>
        </div>
   </form>
</div>

When I click on the LINK, the Controller return PartialView("_OnlineStatusCtrl"); which is hte name of the calling PV …and the ENTIRE PAGE gets replaced.

Answer 1

You’re going to have to use an ajax call of some sort (Microsoft ajax helpers built into MVC, or jquery/javascript ajax call.

To use Microsoft’s Ajax, you can use Ajax.BeginForm or Ajax.ActionLink. Both take an AjaxOptions parameter that will allow you to set javascript functions for OnSuccess, and an UpdateTargetId to display the returned data (usually a partial view). Using this will call your action which should return a partial view. Your partial view then replaces the html element (usually a div) identified by the UpdateTargetId parameter. If you decide to go this route, make sure you reference all the proper Microsoft ajax/mvc scripts. You’ll pretty much need each script with any combinations of Microsoft, Ajax, Mvc, and even unobtrusive in the name.

Here’s an example of one of my ajax forms (modified slightly for simplicity)

    <% using(Ajax.BeginForm("addAttribute", new { id = Model.PersonId, attributeId = item.AttributeId }, new AjaxOptions { UpdateTargetId = "myTargetId", OnSuccess = "initForm" })) { %>
        <input type="submit" value="Ok" class="editMode okButton" disabled="disabled" />
        <input type="button" class="editMode cancelButton" value="Cancel" />
        <br />
        <input type="button" value="Add" class="addButton" />
    <% } %>

I have a div with an id of “myTargetId” (for this example) that will be updated with the returned partial view.