Avoid partial view to refresh in full screen

Question

Imagine the following architecture with partial views.

Sometimes, when errors occurs in our application for reasons not explained here, the partial view refreshes in full screen. Also, if you copy / paste the url of the partial view, it loads in full screen.

We are trying to find a solution where, when loading a partial view url, it will load correctly the full context and display the partial view in his own context. Windows Azure manages to do this (http://manage.windowsazure.com) and we are willing to mimics this functionality.

We tried some searches on internet with keywords like "refresh partial in correct context", "problem partial view refreshed in full screen", etc... but we do not find yet a way to achieve this correctly.

Is there any framework or solution to do this? What's your ideas on this?

Answer 1

IF you are using Partial Views its obvious ajax is involved, what you have to do is that do the things of partial view via ajax.

For Example:

If you have form inside partial you need it to Ajax.BeginForm instead of Html.BeginForm and one more thing is that jquery.unobtrusive-ajax file in your master layout to make things work.

Same is the case for other things you must be dealing things via ajax if you are using partial view so that you don't lose context.

I hope it helps.

Answer 2

If you want to avoid full refreshes you'll have to use ajax and replace contents inside an id. This should be an easy task if that's what you're planning to do.

You should really only have to pass the partial view url to jQuery.get for example. jQuery.get

I hope that's what you're looking for.

Answer 3

Partial view meant to be for reusable views that will be used in many places across the website.

I find this very usefull if we load it via ajax.

Following is the example. This would also avoid full screen refresh

_Layout.cshtml (Or any view page which will load the partial page)

<div>
    <h2>This is Partial View content</h2>
    <div id="content"></div>
</div>

<script>
    $(function () {
        $("#content").html("Loading...");
        setTimeout(function () { LoadPartialView(); }, 5000);
    });
    function LoadPartialView() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetPartialView", "Home")',
            dataType: "html",
            success: function (data) {
                $("#content").empty();
                $("#content").html(data);
                $("#content").fadeIn('slow');
            },
            error: function (data) {
                $("#content").empty();
            }
        });
    };
</script>

Model

public class TestModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Address { get; set; }
}

Controller's Action

    [HttpPost]
    public PartialViewResult GetPartialView()
    {
        TestModel model = new TestModel();

        model.Name="SomeName";
        model.Address="Somewhere";
        model.Age=25;

        return PartialView("_PartialTestPage", model);
    }

UPDATED

For avoiding hardcoded access to the partial view, use overloaded action method which will redirect to the main view. something like this.

    [HttpGet]
    [ActionName("MyOverloadedName")]
    public ActionResult GetPartialView()
    {
        return RedirectToAction("Index", "Home"); //redirect to the main view
    }

You can make two different action method with same name by setting the HttpGet/HttpPost. Look at here for more alternative solution Can you overload controller methods in ASP.NET MVC?.