Site icon Ryadel

ASP.NET Core - Resolve HTML naming conflicts in Partial Views

How to fix the "No executable found matching command dotnet-ef" error in Visual Studio with .NET Core

If you've stumbled upon this post, it most likely means you're struggling with a nasty issue that often affects ASP.NET applications heavily based on partial views: the naming conflict between multiple HTML input elements that handle different ViewModels (or multiple instances of the same ViewModel class) having properties with the same name, when they are placed inside a Razor Page (or View) featuring multiple Razor Partial Views.

In this post, we'll see how to fix this issue using the use the TemplateInfo.HtmlFieldPrefix property.

The Problem

Before presenting the solution, let's clarify the problem. Suppose we have the following Razor View:

And the following Partial View:

As we can see, the first Razor Page will likely contain several Partial Views - one for each user: if we run the project and take a look at the generated HTML, we would see the following markup:

Notice how the model values are correctly applied to each Partial View, but the id and name attributes of the HTML input fields are always the same. This creates an evident naming conflict that will easily create issues, especially if we need to perform some DOM manipulation using JavaScript.

The problem can be easily spotted even without JavaScript: after rendering the above page on our favorite browser, we just have to click (or tap) on the <label> element. As we probably know, doing that would be supposed to move the focus to the input element having the ID defined in the for attribute of the label: however, our page contains multiple input elements with that same id, hence the focus will be always moved to the first of them - even if the selected label pertains to a different form.

The Solution

Luckily, the ASP.NET Core framework provides an easy fix for these kinds of issues: we just have to use the TemplateInfo.HtmlFieldPrefix property, which - if present - will be used to prepend a customizable prefix to all the relevant HTML form fields.

The property can be applied in several ways. For example, we can set it at the controller level:

or when calling the partial view from the main Razor page/view:

or even within the view itself:

As soon as we do that, all naming conflicts will be resolved.

Conclusion

That's it: we hope that this solution will help other ASP.NET Core developers looking for a way to fix this nasty naming conflict issue.

Exit mobile version