Render whole page with PartialView (and data) on page load

Question

Currently we have a page where you select some parameters and click on a button to load data and display it in a grid, but there is no functionality to display the data on page load (via url parameters) yet. I've added the necessary routing configurations and Action, but I'm having troubles to render the page, it only displays the PartialView without styles.

How can I get the whole page to render and not just the PartialView?

Below is my simplyfied code for the View and Controller.

Views/Planing/Index.cshtml

@model PlaningTool.Web.Models.PlaningViewModel
<div class="row">
    <div>
        @using (Ajax.BeginForm("GetDataRows",
            "Planing",
            new AjaxOptions
            {
                HttpMethod = "Get",
                UpdateTargetId = "gridPlaceholder",
                LoadingElementId = "loadingIndicator"
            }))
        {
            <!-- some comboboxes to select project and year -->

            <input type="submit" value="Load data" />
        }
    </div>
</div>

<div id="gridPlaceholder">
    <div id="loadingIndicator" style="display: none;">
        <img src="~/Content/images/loading-image.gif" />
    </div>
</div>

Controllers/PlaningController.cs

 public partial class PlaningController : Controller
 {
    public virtual ActionResult Index()
    {
        return View();
    }

    public virtual ActionResult Plan(long projectID, int year)
    {
        var viewModel = new PlaningViewModel
            {
                ProjectID = projectID,
                Year = year
            };

        // return GetDataRows(viewModel);
        return RedirectToAction("GetDataRows", viewModel);
    }

    [RestoreModelStateFromTempData(typeof(PartialViewResult))]
    public virtual PartialViewResult GetDataRows(PlaningViewModel viewModel)
    {
        // Load data from database with viewModel.ProjectID
        // and viewModel.Year as parameters
        [...]

        var vm = new PlaningViewModel
            {
                // Set ViewModel for loaded data
                [...]
            };

        return PartialView("Shared/_PlaningViewModelRows", vm);
    }

    [...]
}

Answer 1

I finally found a solution. I'm pretty sure it's not the best way to do this but it works.

If the Model is already set I render the PartialView .

<div id="gridPlaceholder">
    @{
        if (Model != null)
        {
            Html.RenderPartial("Shared/_PDataViewModelRows", Model);
        }
    }

    <div id="loadingIndicator" style="display: none;">
        <img src="~/Content/kendo/Bootstrap/loading-image.gif"/>
    </div>
</div>

And in my Controller I've changed to this, so my ViewModel gets loaded independently and I simply return the same view as I would for Index with the new ViewModel .

public virtual ActionResult Plan(long projectID, int year)
{
    var viewModel = new PlaningViewModel
        {
            ProjectID = projectID,
            Year = year
        };
    return View("Index", LoadViewModel(viewModel));
}

public PlaningViewModel LoadViewModel(PlaningViewModel viewModel)
{
    // Load data from database with viewModel.ProjectID
    // and viewModel.Year as parameters
    [...]

    var vm = new PlaningViewModel
        {
            // Set ViewModel for loaded data
            [...]
        };

    return vm;
}