Reusing database driven dropdown list - partial view or something else?

Question

I'm building a web app that uses .NET 6, Razor pages and Entity Framework. It'll have a reporting section with about 40 reports. I'd like the user to be able to select the report from a dropdown list and I was planning on putting this in a partial view so I'm not repeating the same code 40 times. It works well if the dropdown list is just static items, however, the dropdown list needs to be dynamically generated based on user permissions in my database. I was thinking I could add a model to my partial view but that throws an exception:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'myApp.Pages.Reports.SearchModel', but this ViewDataDictionary instance requires a model item of type 'myApp.Pages.Shared._ReportSearchPartialModel'.

Is a partial view the best way to do this or is there a better option? If the partial view is the best way how should I pass dynamically generated data to it?

Thanks in advance.

Answer 1

A view component might be a better tool because a view component does not use model binding and can execute code to fetch its own data.

View components in ASP.NET Core

Answer 2

If you're sticking with Razor then a partial view makes sense if you need to build a custom UI around that list. However if your sole goal is to display a single dropdown with data then a partial view is overkill as it doesn't solve anything. In the case of a partial view you'll need to reference it in some view. If your partial view requires a model then the parent view has to pass that model as part of the call.

<partial name="_MyList" model="Model.ListDataForPartialView" />

That means the parent view is responsible for getting the data for the partial view as well. Hence the partial view isn't really adding anything here if it just shows the drop down. You might as well just use the dropdown directly as you'll need the same data. I think this article has a good example of what you would need to do for a partial view.

This article has a better solution to me in which you use javascript to call back to the server and fetch the data instead. If your javascript is good (or you're using a library like Angular or React) then you can retrieve the data once and then store it on the client side to use to populate your drop down list. This is more code but eliminates the need for the parent view to retrieve the data for its child views as well. Either solution will work however, it depends on how you want to solve it.