Why is my Model object always null on my Razor Page in dotnet core 2.x Razor Page app?

Question

I'm creating a Partial View as a part of my Index.cshtml. I am following the basics outlined in the Microsoft article => https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-2.1

The summary of it is that I'm : Adding a span to my Index.cshtml file which is actually loaded with the HTML from a Razor Page. The relevant HTML in Index.cshtml looks like the following:

<span id="basicView">
    @{ 
        Model.UserName = "IndexUser";
        await Html.RenderPartialAsync("BasicPartial", Model);
    }
</span>

I have added public property to my IndexModel named UserName in the RazorPage and it looks like the following:

namespace FirstCore.Pages
{
    public class IndexModel : PageModel
    {

        public string UserName;
        public void OnGet()
        {

        }
    }
}

It is kept very simple for this example. So, in the HTML in the Index.cshtml you can see that I set the value of that public property to "IndexUser" and then I pass the name of the Razor Page ("BasicPartial" - View) and the Model object to the BasicaPartial Razor Page.

The BasicPartial page is very simple -- was generated from the Visual Studio 2017 template - Add...Razor Page... The entire things looks like:

@page
@model IndexModel
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
<div>This is the text and the user name is @(Model.UserName).</div>

Actually, the only important part is the and the place where I'm reading the property value of UserName out of the passed in Model. You can see I've also defined the @model as an IndexModel at the top.

The Main Problem - Model is ALWAYS Null

When I run this very simple example. The application tells me that the Model object is null.

You may believe that it is the UserName that is null, but if I put a very simple directive at the top like

<div>@Model</div> 

Then it tells me that Model is null, even though I know I'm passing it in.

Do you know why it is null?

Answer 1

If I make one change to the BasicPartial.cshtml file then the Model is no longer null.

All I have to do is remove the @page directive so the BasicPartial.cshtml file now looks like the following:

@model IndexModel
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
<div>This is the text and the user name is @(Model.UserName).</div>

Now it works perfectly. The Model object is a the valid object with the property value set as expected. (See highlighted text in the image below.)