3 Layouts - lilpug/ModFrame GitHub Wiki

The Layouts folder is where all layouts are stored within ModFrame, its main purpose is to allow layouts to be self-contained. By default, ModFrame has a layout called "Default", this layout is used on all Controllers and Actions that have views unless a different layout is supplied. It is worth noting that all ModFrame layouts still follow the MVC principal and will not be pulled into a view which has the "@{Layout = null;}" specified.

A single ModFrame layout folder should consist of the following structure:-

Layouts\
         NewLayout\
                    css\*.css
                    files\**
		    filter\filter.cs
		    includes\
			      header\*.cshtml
			      footer\*.cshtml
		    js\*.js
		    views\*.cshtml
                    plugins.json

The following is a brief description of what is required from each of the folders and files above:-

CSS: The location where all the custom styles are stored.

Files: The location where any files required in the layout are placed i.e. images etc.

Filter: The location where the layouts action filter is stored.

Includes: The location where all the CSS and JS HTML includes are stored.

JS: The location where all the custom scripts are stored.

Views: The location where all the ".cshtml" view files are stored.

Plugins.json: The file where any NPM and Bower plugin requirements are defined.

The filter file in a layout folder is used to define an action filter that can then be used to change the layout in any modules within ModFrame.

The code for the action filter file should look like the following with the layoutName, includeViewDataName and masterPageLocation parameters being modified to suit the layout:-

public static partial class ModFrameLayouts
{
    //This can be used on each controller to choose which menu to use
    public class DefaultLayout : BaseLayout
    {
        public DefaultLayout()
        {
	    //Sets the name of the layout
            layoutName = "Default Layout";

            //Sets the includes ViewData name to use for this layouts include .cshtml files
            includeViewDataName = "defaultLayout";

            //Sets the master layout page location
            masterPageLocation = "~/layouts/default/views/main.cshtml";
        }
    }
}

The following example shows how to attach a particular layout to every action which returns a view in that controller.

[ModFrameLayouts.defaultLayout]
public partial class ExampleController : MyController
{
    
    [Route("")]   
    public IActionResult Index()
    {
        ... 
    }
}

The following example shows how to attach a particular layout to a single action which returns a view.

public partial class ExampleController : MyController
{
    [ModFrameLayouts.defaultLayout]   
    [Route("")]   
    public IActionResult Index()
    {
        ... 
    }
}

When creating layouts, ModFrame needs two main functions to be included in the header and footer ".cshtml" files to ensure it can pull through all the dynamic CSS and JS links supplied throughout ModFrame.

This function brings in all the CSS includes into the layout.

@*Imports the header file*@
@Html.ModFrameHeader()

This function brings in all the JS includes.

@*Imports the footer file*@
@Html.ModFrameFooter()

When creating a layout view you might want to split it up into multiple ".cshtml" files.

You will need to use the LayoutView() function to include other ".cshtml" that are in the same layout views directory.

@*Imports the .cshtml file in the layout views directory *@
@Html.LayoutView("Layout Folder Name Here", ".cshtml file here")

@*Imports the .cshtml file in the layout views directory *@
@Html.LayoutView("Layout Folder Name Here", ".cshtml file here", Model)

These built in functions could be helpful for any kind building a type of CMS system.

This functions can be called by ModFrame.GetLayouts().

This function returns a dictionary of all the classes and their layout names that exist in ModFrame.

Dictionary<string, string> layouts = ModFrame.GetLayouts();

This function can be called by ModFrame.ContainsLayoutFilter("layout filter path here").

This function returns a boolean on whether it can find the layout filter path throughout all the layouts in ModFrame.

bool check = ModFrame.ContainsLayoutFilter("ModFrameLayouts.DefaultLayout");

This function can be called by ModFrame.ContainsLayoutName("layout filter name here").

This function returns a boolean on whether it can find the layout filter name throughout all the layouts in ModFrame.

bool check = ModFrame.ContainsLayoutName("Default Layout");