In the documentation here:
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-2.2
The runtime searches for the view in the following paths:
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}
How can I add another path here?
I'd like to have my view components with their respective controllers in one project folder named components like this.
/Components/{View Component Name}/{View Name}
My motivation:
I find out my view components have their own JS and CSS files. I have all JS bundled and minimized in one site.min.js and all CSS bundled and minimized in their site.min.css. The JS are always something like $(function() { ... }) and the CSS are always written in a way that order does not matter so bundling all without knowing the order is not a problem.
Some of those view components have javascripts which change their state on server e.g. AJAX call to a controller's action which returns some JSON or the whole view component's HTML.
Since Controllers are just a C# classes they can be in any folder but it feels stupid to move the controller with the relevant AJAX action to the "Views" folder.
In the end I'd like to have a "component" (not really a "view component" only) like this:
/Components/SomeViewComponent/Default.cshtml
/Components/SomeViewComponent/SomeViewComponentController.cs
/Components/SomeViewComponent/SomeViewComponent.cs
/Components/SomeViewComponent/SomeViewComponent.css
/Components/SomeViewComponent/SomeViewComponent.js
/Components/SomeViewComponent/SomeViewComponent.en.resx
/Components/SomeViewComponent/SomeViewComponent.cs-CZ.resx
So after an hour digging into the aspnetcore repository, I found the component's search path is hardcoded and then combined with normal view search paths.
// {0} is the component name, {1} is the view name.
private const string ViewPathFormat = "Components/{0}/{1}";
This path is then sent into the view engine
result = viewEngine.FindView(viewContext, qualifiedViewName, isMainPage: false);
The view engine then produces the full path, using the configurable view paths.
Views/Shared/Components/Cart/Default.cshtml
Views/Home/Components/Cart/Default.cshtml
Areas/Blog/Views/Shared/Components/Cart/Default.cshtml
If you want to place your view components into a root folder named "Components" as I wanted, you can do something like this.
services.Configure<RazorViewEngineOptions>(o =>
{
// {2} is area, {1} is controller,{0} is the action
// the component's path "Components/{ViewComponentName}/{ViewComponentViewName}" is in the action {0}
o.ViewLocationFormats.Add("/{0}" + RazorViewEngine.ViewExtension);
});
That's kind of ugly in my opinion. But it works.
You can also write your own expander like this.
namespace TestMvc
{
using Microsoft.AspNetCore.Mvc.Razor;
using System.Collections.Generic;
public class ComponentViewLocationExpander : IViewLocationExpander
{
public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations)
{
// this also feels ugly
// I could not find another way to detect
// whether the view name is related to a component
// but it's somewhat better than adding the path globally
if (context.ViewName.StartsWith("Components"))
return new string[] { "/{0}" + RazorViewEngine.ViewExtension };
return viewLocations;
}
public void PopulateValues(ViewLocationExpanderContext context) {}
}
}
And in Startup.cs
services.Configure<RazorViewEngineOptions>(o =>
{
o.ViewLocationExpanders.Add(new ComponentViewLocationExpander());
});
You can add additional view location formats to RazorViewEngineOptions. As an example, to add a path that satisfies your requirement, you can use something like this:
services
.AddMvc()
.AddRazorOptions(o =>
{
// /Components/{View Component Name}/{View Name}.cshtml
o.ViewLocationFormats.Add("/{0}.cshtml");
o.PageViewLocationFormats.Add("/{0}.cshtml");
});
As can be seen above, there are different properties for views (when using controllers and actions) and page views (when using Razor Pages). There's also a property for areas, but I've left that out in this example to keep it marginally shorter.
The downside to this approach is that the view location formats do not apply only to view components. For example, when looking for the Index view inside of Home, Razor will now also look for Index.cshtml sitting at the root of the project. This might be fine because it's the last searched location and I expect you're not going to have any views sitting at the root of your project, but it's certainly worth being aware of.
Invoking a View Component as a Tag Helper was introduced in ASP.NET Core 1.1. (See “Invoking a view component as a Tag Helper”). But the following only returns the Test for VC part of the view. It seems that <vc:annual-orders>…</vc:annual-orders> part does not get invoked at all.
Views\Shared\Components\AnnualOrders\Default.cshtml:
#{
Layout = "";
}
<div>Test for VC</div>
<div>
<vc:annual-orders>
</vc:annual-orders>
</div>
myProj\ViewComponents\AnnualOrdersViewComponent.cs:
public class AnnualOrdersViewComponent : ViewComponent
{
private readonly OrdersContext _context;
public AnnualOrdersViewComponent(OrdersContext context)
{
_context = context;
}
public async Task<IViewComponentResult> InvokeAsync()
{
var lastOrders = _context.Where(t => t.orderType == "new");
return View(await lastOrders);
}
}
NOTE:
I'm using ASP.NET Core 1.1 and the View Components without Tag Helpers are working fine.
I also followed MSDN's official tutorial, “Invoking View Components as Tag Helpers” where it explains that PascalCase class names and method parameters for the Tag Helper are translated into their lower kebab-case.
This doesn't address your specific situation since your view component is parameterless, but as it's closely related, I’m leaving it here for anyone that needs to hear it:
Even if the tag helper is correctly registered in e.g. the _ViewStart.cshtml, as per #alan-savage's answer, it will not render unless you include all parameters from the InvokeAsync() method.
This may seem self-evident, but it can be confusing since it doesn't respond with an exception, nor is there any (obvious) design-time validation built into Visual Studio.
Note: There actually is design-time validation, it’s just not obvious. In the code editor, correctly referenced view components will show up with bold property names. But this is easy to miss if you're not looking for it. And there isn't e.g. a warning that shows up in the Error List panel, or as part of the build output.
So, for example, if you instead had:
public class AnnualOrdersViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string labelName)
{
…
}
}
And then called your tag helper as:
<vc:annual-orders></vc:annual-orders>
Your code will compile without warning, and your page will run without exception—but the view component will not be rendered.
In fact, prior to ASP.NET Core 6, this would even happen if you made the view component parameter optional, as the tag helper syntax didn’t honor optional parameters:
public class AnnualOrdersViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string labelName = null)
{
…
}
}
Note: As of ASP.NET Core 6 Preview 6, View Components called as Tag Helpers will now honor optional parameters (source).
Obviously, in either of the above examples, this could be fixed by simply including all parameters:
<vc:annual-orders label-name="Contrived Example"></vc:annual-orders>
Again, this doesn't address the specifics of your problem, but I imagine developers running into this issue will likely come across this thread, so I wanted to include this as another troubleshooting step in case the tag helper has already been correctly registered.
I have been struggling with this and finally managed to get tag helpers for view components to work.
The issue I had was that the tag helpers were not working on the views within Areas. To resolve this, I copied the _ViewImports.cshtml and _ViewStart.cshtml pages from the /Views directory into /Areas/<AreaName>/Views directory. The the tag helpers now work and Visual Studio is giving me IntelliSense on my properties.
Don't forget to add to the _ViewStart.cshtml files (where <AssemblyName> is the name of the assembly containing the View Components:
#addTagHelper *, <AssemblyName>
this does Not work.
#addTagHelper *, MyProject.Components
this works
#addTagHelper *, MyAssemblyName
it takes assembly name, not name space.
I'm totally new to MVC. Now I'm trying to create a View in the folder Sample( which is under the folder of Views). I right-clicked the Sample folder and selected "Add View", then hit the view name as Test. After the view has been created, I typed in following code:
<!DOCTYPE html>
<html>
<head>
<title>Sample View</title>
</head>
<body>
<p>
Test
</p>
</body>
</html>
Build. Then I tried to navigated the address http://localhost:24694/Sample/Test in my browser. But the browser read "The resource cannot be found.". Why? I've also other cshtml files in the Sample folder(which was generated by others), they worked fine. For example, there is a file called "Message.cshtml" under the folder of Sample, and I can navigate the address http://localhost:24694/Sample/Message with ease. Is there anything that I should add?
3 Step Process
1 - Define the Route
routes.MapRoute("Test", "test",
new { controller = "NameOfController", <- In your case TestController
action = "Index", <- Name of action in controller returning view
parameter = "parameterName - leave empty if no params needed"
});
2 - Create the controller
So if you follow the above method and call your route Test and the view Test then you need to create the controller called TestController. MVC automagically sows these together thanks to your route config you did earlier (RouteConfig.cs)
3 - View
In your case you just make sure the view is returning something.
Easy as that. Good luck.
you cannot use
http://localhost:24694/Sample/Test
to navigate to view because you can only access a view through a controller. so follow these steps
First of all create a new controller inside controllers folder and name it 'SamplController'.
By default there will be an action method named Index().
Create a new Action method named 'Test' inside 'SampleController'
Now right click inside 'Test' action method and click on Add View. it will add a new view insides Views folder named 'Test.cshtml'. You can use it. if you want to place this View inside other folder then you've to modify the return statement of 'Test' action method. For example you created a folder 'MyViews' inside Views folder and moved 'Test.cshtml' there. Now your return statement in 'Test' action method will be like this
return View("~Views/Sample/MyViews/Test.cshtml");
instead of
return View();
Now when you use
http://localhost:port/Sample/Test
it will create a new instance of 'Sample' Controller and will call 'Test' action method. This method will return specified view. i hope it will help :)
ASP.NET MVC is based on routing not in file system like asp.net webforms. Following the internals, views should be in the Views folder from the ASP.NET MVC application template, like Controllers should stay on the Controllers folder. It is not required, but it is setted by default from asp.net mvc framework.
In your a Controller (class), you could have some Actions (methods), which can return a view, image, file, etc, implementations that derive from ActionResult type. Theses actions, could return a view using the View method from the controller base class. By default, the asp.net mvc will search for a view (.cshtml or .aspx file) inside the ´Views` folder and in a folder with the same name of the Controller, for sample, if you have a controller like this:
public class ProductController : Controller
{
public ActionResult Index()
{
return View();
}
}
It will find a view in Views/Product/Index.cshtml and render it for you. I recommend you reading more in http://asp.net/mvc
I have an MVC4 project with language selection:
en
nl
fr
de
1 main part with:
About
Common (for the menu)
Contact
Faq
Home
And 3 areas:
Admin
Customers
Shop
In each area I have at least one controller, for example in Admin I have the controller overview with the corresponding view folder overview which contains an index.aspx page.
The home page and all the main pages (about, faq, etc.) work and can be visited).
However, when I follow the url: localhost:xxxx/en/admin/overview
I get the error:
The controller for path '/en/admin/overview' was not found or does not implement IController.
Even though the route is correct (I can see this with Route Debugger), the error page also shows that the error was thrown when I wanted to load my main menu items:
<nav id="site-navigation" class="eightcol">
#Html.Action("MenuItems", "Common")
</nav>
-- Code removed because irrelevant --
Everything seems to be in order, but MVC doesn't seem to be able to load the menu, which is located in the main part.
So, the root of the problem is:
Can I grant an area (e.g. Admin) access to the controllers in the main part (home, common, about, etc.) of my project?
I've found it.
When a page, that is located inside an area, wants to access a controller that is located outside of this area (such as a shared layout page or a certain page inside a different area), the area of this controller needs to be added.
Since the common controller is not in a specific area but part of the main project, you have to leave area empty:
#Html.Action("MenuItems", "Common", new {area="" })
The above needs to be added to all of the actions and actionlinks since the layout page is shared throughout the various areas.
It's exactly the same problem as here:
ASP.NET MVC Areas with shared layout
Edit: To be clear, this is marked as the answer because it was the answer for my problem. The above answers might solve the causes that trigger the same error.
In my case, the same error was not related to Area but thought to post the error caused in my case, which may be helpful for the people who come to this thread by searching "The controller for path was not found or does not implement IController"
The error was caused because of wrong entry in _Layout.cshtml file.
#Styles.Render("~/Content/misc")
The bundle with that name was removed in BundleConfig.cs but forgot to remove it in _Layout.cshtml
It was silly, but we programmers always do lot of silly mistakes :)
Yet another possible root cause for this error is if the namespace for the area registration class does not match the namespace for the controller.
E.g. correct naming on controller class:
namespace MySystem.Areas.Customers
{
public class CustomersController : Controller
{
...
}
}
With incorrect naming on area registration class:
namespace MySystem.Areas.Shop
{
public class CustomersAreaRegistration : AreaRegistration
{
...
}
}
(Namespace above should be MySystem.Areas.Customers.)
Will I ever learn to stop copy and pasting code? Probably not.
Also, for those who the solution above didn't work, here's is what worked for me:
I have a solution with multiple projects. All projects were in MVC3. I installed Visual Studio 2012 in my machine and it seems that some projects were automatically upgraded to MVC4.
I got this problem
The controller for path '/etc/etc' was not found or does not implement IController
because the project that handled that route was pointing to MVC4.
I had to manually update their references to use MVC3. You can also do that by opening the .csproj file with a text editor. Find the reference to MVC3 and remove this line:
<SpecificVersion>False</SpecificVersion>
This error can also be caused by the fact that Controllers must have (in their name) the word Controller; viz: HomeController; unless you implement your own ControllerFactory.
in my case, the problem was that the controller class has not been publicly announced.
class WorkPlaceController : Controller
the solution was
public class WorkPlaceController : Controller
Here is my problem and the solution that what worked for me.
I added a new controller with a single action returning a string to an existing application. But when I navigated to that controller via browser, I was getting the same error as mentioned above.
After doing lot of googling, I found out that I simply had to modify my Global.asax.cs file for it to recognize the new controller. All I did was added a space to Global.asax.cs file so that it is modified and it worked
In my case namespaces parameter was not matching the namespace of the controller.
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Admin_default",
"Admin/{controller}/{action}/{id}",
new {controller = "Home", action = "Index", id = UrlParameter.Optional },
namespaces: new[] { "Web.Areas.Admin.Controllers" }
);
}
Not sure if this hits the solution from a different angle to the accepted answer, but I found that one of my controllers in the Areas section was sitting in the wrong namespace. Correcting the namespace to:
Areas.{AreaName}.Controller
fixed the issue for me.
I suspect the key factor was to have all the controllers within a given area share the same namespace.
One other cause of this error: Accidental use of Html.Action in a Layout file where Html.ActionLink may have been intended. If the view referenced by the Html.Action uses the same Layout file you effectively have created an endless loop. (The layout view loads the referenced view as partial view which then loads the layout view which loads the referenced view...) If you set a breakpoint in the Layout file and single step through the Htlm.Action you will sometimes get a more helpful message about excessive stack size.
In my case I had #{ Html.RenderAction("HeaderMenu", "Layout", new { Area = string.Empty }); } in _Layout.cshtml but the LayoutController did not exist! (I had copied _Layout.cshtml from another solution but forgot to copy the controller)
In my case in global.asax/application_start method,
I was registering web api routes AFTER mvc routes like so:
RouteConfig.RegisterRoutes(RouteTable.Routes);
GlobalConfiguration.Configure(WebApiConfig.Register);
Reverting the order fixed the issue
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
This could be because the path was wrong. So check the path and the spelling of the controller first.
In my case, my controller was named CampsController, and the WebApiConfig.cs file had an extra path in it.
Instead of:
http://localhost:6600/Camps
It was:
http://localhost:6600/api/Camps
I had not noticed the api word in the WebApiConfig.cs file:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
Also it could be because the controller was incorrectly named. Here I called LayoutController, but should have called Layout instead:
<a class="nav-link" href="#">#Html.Action("GetCurrentUser", "LayoutController" })</a>
should be:
<a class="nav-link" href="#">#Html.Action("GetCurrentUser", "Layout")</a>
Another example, it could be because you have bad Route paths defined. Make sure your paths are correct.
Example:
[RoutePrefix("api/camps")]
public class CampsController : ApiController
[Route("{moniker}")]
public async Task<IHttpActionResult> Get(string moniker)
If appropriate to your design, you can make sure the access modifier on your controller class is 'public', not something that could limit access like 'internal' or 'private'.
I hope this helps someone else. I had this problem because, while I had the controller named properly, the class inside the file had a typo in it. I was looking for OrderSearch and the file was OrderSearchController.cs, but the class was OrdersSearchController.
Obviously, they should match, but they don't have to, and your route targets the class, not the filename.
Embarrassingly, the problem in my case is that I haven't rebuilt the code after adding the controller.
So maybe the first thing to check is that your controller was built and is present (and public) in the binaries. It might save you few minutes of debugging if you're like me.
Building on this answer by George, I found in my case that I had set my controller up properly as ThingController and I had a properly defined method on that controller Edit.
But.. I was referencing it in my view with
<a href="/App/ThingController/Edit" />
Where I should have been just using the name without the word controller like
<a href="/App/Thing/Edit" />
Somebody added this to a View.
#Scripts.Render("~/bundles/jqueryval")
Then they added the BundleConfig.cs file in the App_Start Folder.
In the RegisterBundles Method they had:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
However, they forgot to finish wiring this up in the Global.asax.cs File.
To Fix, all I had to do was add this to the Application_Start Method in Global.asax.cs:
RouteConfig.RegisterRoutes(RouteTable.Routes);
Note: I think the ordering/placement of this Line in the Application_Start Method matters,
so please keep that in mind.
I placed mine immediately after ViewEngines.
In another scenario just I would like to add is In my scenario, the name space was different for controller as it was mistake of copying controller from another project.
In my case of legacy application, the issue occurred when I added below entry in web.config file under the node <system.webServer>
<modules runAllManagedModulesForAllRequests="true"></modules>
When I removed it, the issue resolved.
This problem also occurs if you don't include your controller class for compile-process in the .csproj files.
<Compile Include="YOUR_CONTROLLER_PATH.cs" />
In my case, I was rendering another action method for my menu section in _layout.cshtml file using #Html.Action("Menu", "Menu") whereas I forgot to create Menu controller and as layout file was being used in my current controller action's view therefore I was getting this error in my current action render request. try to look in your layout and as well as view file if you did the same mistake
Or maybe you missed keyword "Controller" at the end of controller name ;)
For me, I was running the IIS Express https://localhost:1234/pg/Abc/Page
But register the web in IIS like https://localhost:1234/Abc/Page
So in calling web page I was calling the first link with /pg/ which is throwing Not Found Exception.