M# Tutorials

Learn to build .NET applications with M#. Our step-by-step tutorials will get you up-to-speed rapidly.
If you already know ASP.NET and C#, you can master M# in a week or two.

Module Hosting

In this lesson we will learn to host /add modules on the page and how we can define a layout for them. (For more information about modules or pages please read lesson Entities, Page, Module in chapter 1).

M# allows developers to host as many modules as required on page. You can add new or existing modules. M# provides a separate section under heading of “Modules” where all the modules are hosted and managed. By default, M# renders the modules in the sequence they are hosted on the page, which can be changed by selecting the module and pressing “Up/Down” while holding “Ctrl” key.

The picture shown above highlights the module hosting section of a page. In order to host a module please follow the steps below:

• Click in the module section of the page

• Select the required module i.e. List, View, Form, Menu (You can type the required module type and name of entity to filter the options of the module menu)

The picture above shows we are adding a “View Module” on entity type Employee. After selecting the desired module M# hosts it on the page and allows development of the hosted module or customization by specifying additional attributes, as shown in screenshots below:

We will add another module but this time a list module see how M# generates markup

As shown above, M# has added the modules on the page in the sequence they are hosted in M#. We can change the layout of a page and implement a custom design to layout the hosted modules.

M# provides another time saving functionality to ease the process of adding existing modules to other pages. Just select the module you want to copy and hit “Ctrl + C”. Select the target page where you want to add the module and hit “Ctrl+V”. M# seamlessly copies the entire module to the target page.

Managing Hosted Module Layout

M# provides “Layout” property of the page to manage and arrange hosted modules on a page as shown below:

The Layout property shown above allows developers to write HTML mark-up in order to define the page layout. Each hosted module on the page is represented by its order number contained in a special tag “[##]” e.g. the modules shown in above screenshot will be represented in layout as:

“View:Employee” module will be represented by [#1#]

“List:EmployeePhoto” module will be represented by [#2#]

The screenshot above shows that we have given a table layout by having our “View:Employee” Module in first column and “List:Employee” module in second column. Now if we look at our asp.net mark-up we will see that the modules are places as we have specified in the layout mark-up.