Partial Razor View not allowing to pass paramaters

Question

I am currently trying to made a dynamic button row, featuring the ability to declare in a view which buttons you want rendering and then calling a partial razor view to render the content dynamically depending on parameters passed in. I get a null reference exception but I'm not entirely sure why. Any pointers would be much appreciated.

Base View that I'm trying to render buttons from:

@page
@using MyPages.Pages.Shared.components
@model MyPages.Pages.Waste.ContainerChallenge.IndexModel
@{
    const string title = "Title for page";
  
}
<div class="col-9 justify-content-center mx-auto mb-4">
  
    @Html.Partial("Shared/components/ButtonRow",new ButtonRowModel(){Button = ButtonRowModel.ButtonType.Start, TargetURL = "/YourPropertyDetails"}) 
</div>

The buttons.cs file:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyPages.Pages.Shared.components
{
    public class ButtonRowModel : PageModel
    {
        public void OnGet()
        {
        }

        public enum ButtonType
        {
            Start,
            Next,
            Submit
        }

        public ButtonType Button { get; set; }
        public string TargetURL { get; set; }
        public string? PreviousURL { get; set; }
    }
}

The view for the buttons I'm trying to import:

@page
@model MyPages.Pages.Shared.components.ButtonRowModel
@{
}

@if (@Model.Button == ButtonRowModel.ButtonType.Start)
{
    <div class="col-6 d-none d-lg-block">
        <button class="col-3" id="startBtnLG" href="@Model.TargetURL">Start now</button>
    </div>

    <button class="col-12 d-lg-none" id="startBtnSm" href="@Model.TargetURL">Start now</button>
}

@if (@Model.Button == ButtonRowModel.ButtonType.Next)
{
    <div class="col-6 d-none d-lg-block">
        <button class="col-3" id="previousBtnLG" href="@Model.PreviousURL">Previous</button>
        <button class="col-3" id="nextBtnLG" href="@Model.TargetURL">Next</button>
    </div>

    <div class="col-12 d-lg-none">
        <button class="col-6" id="previousBtnSM" href="@Model.PreviousURL">Previous</button>
        <button class="col-6" id="nextBtnSM" href="@Model.TargetURL">Next</button>
    </div>
}

@if (@Model.Button == ButtonRowModel.ButtonType.Submit)
{
    <div class="col-6 d-none d-lg-block">
        <button class="col-3" id="previousBtnLG" href="@Model.PreviousURL">Previous</button>
        <button class="col-3" id="submitBtnLG" href="@Model.TargetURL">Submit</button>
    </div>

    <div class="col-12 d-lg-none">
        <button class="col-6" id="previousBtnSM" href="@Model.PreviousURL">Previous</button>
        <button class="col-6" id="submitBtnSM" href="@Model.TargetURL">Submit</button>
    </div>
}

I've tried several ways of calling the partial and different ways of newing up a model to pass in but they all seem to result in the same error:

Answer 1

You define Partial View in the wrong way. according to the Microsoft document, the Partial View is .cshtml file without an @page directive.

Partial View is a Razor markup file (.cshtml) without an @page directive that renders HTML output within another markup file's rendered output.

Document link: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-6.0

On the other hand, PageModel used for creating Razor Page code behind and is not suitable for creating a model for Partial View or any other type of view. a simple class do the job for you. apply these changes and your code will work like champ.