Search code examples
c#asp.net-mvcasp.net-mvc-5umbraco7

Display an MVC view in the Umbraco Backend


I found this article here : http://jondjones.com/learn-umbraco-cms/umbraco-developers-guide/customising-umbraco-ui/how-to-display-an-mvc-view-in-the-umbraco-backend

It covers exactly what i want to do( display an mvc view in the umbraco backend in a section), however i can't seem to get it to work, and the article author is uncontactable.

I'm hoping someone might know this exact process and be able to go into more detail for me. The particular parts i am struggling with is the author does not describe where anything goes, what usings his code has, and what to do with the routeconfig if you don't already have one in an umbraco project. Added to this there are inconsistencies with the authors naming conventions in the examples, causing further confusion.

If anyone has done this before, please could you go into detail in how you use MVC to display a view, in a section, in the umbraco backend.


Solution

  • So i am still working on and improving the tools in the project, But this extension i created for umbraco has everything you need to be able to create a new custom section that uses MVC to display pages.

    https://github.com/Wolfkhan66/Escc.Umbraco.EditorTools

    When possible i will try to write a up a short tutorial that covers the absolute basics to create a custom MVC umbraco section.

    for now if you have a look at this project, the very basics you need to make a new section are the following classes and files.

    App_Start -> RouteConfig.cs
    lang -> en-US.xml, en.xml
    EditorTools -> EditorToolsSection.cs, EditorToolsTree.cs, StartUpHandler.cs 
    

    The ***Section.cs class file allows you to create an instance of the new section. The ***Tree.cs class file allows you to add the navigation tree nodes you see on any of the umbraco sections. The StartUpHandler.cs is to register your RouteConfig to allow MVC to work. The lang files allow you to merely change the name that is displayed for your section. Without it your section will appear is [example] instead of example.

    A few things i have noticed while creating this project, Creating controllers and nodes in the tree with the same name as umbraco sections sometimes causes a conflict. e.g. having a node in the tree class called ContentNode will break and not work. so in my tree i named it ContentToolsNode.

    To keep your extension contained it is best to have your views without your extension folder. however by default your actionresults will look at the root level of the project for a view folder. as such you must provide a string in your returned actionresults to point them to the correct view within your extension folder. e.g.

    return View("~/App_Plugins/EditorTools/Views/Content/Index.cshtml", model);
    

    If you navigate to your new section and find your navigation tree is missing. Try deleting the custom sections key in the trees.config file found in the Config folder and rebuilding the project. The next time you navigate to the custom section it should regenerate a new key and display the navigation tree.

    As the project is a work in progress and i am still making improvements, if you clone it you may find it has some umbraco files missing ( mostly config files . simply uninstall the umbracocms, umbraco.modelsbuilder and the umbracocms.core packages and delete any missing files in the project. You should then be able reinstall the umbracocms package. I have tried to document the installation progress in the readme.

    I hope this helps some people, Happy Coding!