[FIXED] How to load a partial view into a container in _Layout.cshtml

Issue

Hi can someone please tell me how I can load a PartialView into a div container I have prepared located in _Layout.cshtml (that is completely separate from the link itself). I want it loaded into the container on the click of the following action link:

<a href="@Url.Action("RenderColorbox", "ContactPartial", new { path = "_ContactPartial" })" class="colorboxLink"><span>ContactUs</span></a>

I would like to do this without javascript because I need to create a model in my controller and pass it to the PartialView and I dont think its possible to pass a strongly typed model to a view using javascript.

If I wanted to I could use:

$('.colorboxLink').click(function () {
     $('.colorbox_container').load(this.href);
});

but as I mentioned this does not give me the chance to create and pass a strongly typed model to the partial view...its important that I can create and pass a model to the view because Im getting a null reference exception when I try something like foreach(var item in Model.ItemList) in the partial view.

Heres what my controller looks like:

    public virtual ActionResult RenderColorbox(string path)
    {
        return PartialView(path, null);
    }

However, currently, clicking the action link simply renders the PartialView in a new blank page rather than inside the container I have set up.

Thank you all for your help.

EDIT: To load the colorbox I used the following as suggest:

    $('.colorboxLink').click(function () {
    $('.colorbox_container').load(this.href, function () {
        var colorboxOptions = {
            inline: true,
            scrolling: false,
            opacity: ".9",
            fixed: true,
            onLoad: function () {
                $('#cboxContent').css({
                    "background": "white"
                });
                $('#cboxLoadedContent').css({
                    "margin-bottom": "28px",
                    "height": "558px"
                });
            }
        }
        $('#contactColorbox').colorbox(colorboxOptions);


    });

But still loads without colorbox, but rather as a pop up modal.

Solution

but as I mentioned this does not give me the chance to create and pass a strongly typed model to the partial view.

It gives you such chance. You are sending an AJAX request to the RenderColorbox action on the ContactPartial controller. Inside this action you can prepare and send whatever complex view model you want to the partial:

public ActionResult RenderColorbox(string path)
{
    SomeComplexModel model = ...
    return PartialView(path, model);
}

Also make sure that you cancel the default action of the link by returning false from the click handler:

$(function() {
    $('.colorboxLink').click(function () {
        $('.colorbox_container').load(this.href);
        return false;
    });
});

If you don't do this, when you click on the link, your AJAX call has barely any chance to execute before the browser redirects away to the target page.

Answered By - Darin Dimitrov

Answer Checked By - David Marino (PHPFixing Volunteer)