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 Boxes

In this lesson we will learn about module boxs, which are very handy in designing a module. M# generates the boxes as HTML elements like div, span, fieldset, h3. Boxes are available only in the “Elements” section of View and Form modules and are used to group module elements. M# offers different types of boxes, which are discussed below:

Creating a Box

M# creates a box type element when you select the “Box” option shown in the screenshot above.

The screenshots above show that we have added a box in the element section of our module and have given it a name “LeftBox”.

Assigning Module Box

As explained in the beginning of this lesson, boxes are used to group elements of the module, usually to implement required page design e.g. float some elements on right and left of the page etc. Boxes without elements are of no use. So, in the screenshots below we have added an element in the “LeftBox”.

Note: The screenshot above shows “View Module” on an entity type “Employee” and the inset highlighted list is a list of all the properties on entity Employee, which are referred as module elements.

By clicking inside the box, M# shows a list of all the elements available in the module. You can select the required elements one by one as shown above.

An element can also be assigned to a box using “box” property of the element. The screenshot below shows that we have added another box “RightBox” which is then assigned the above shown element.

Box Properties

Box Templates

M# offers different types of boxes to fulfil different design requirements. You can change the type of a box by using its “Template” property. “Box with left icon” is set as the default box type. The screenshot below shows a list of all the available templates for a box:

The screenshots above show that we have selected “Just H3 Header” template and M# generated h3 tag with the id and text based on given box name.

Text

This property is used to specify the text of the box. This property works only with the template which allow box heading e.g. the above shown “Just H3 Header”.

The inner text of h3 tag is updated as the specified text property

Container Css Class

This property is used to specify a css class for the box container element. M# wraps the box inside a span HTML element and applies the specified class.

Css Class

This property is used to apply a css class on the actual box mark-up.

Container Layout

This class is used to define custom mark-up for box container.

Must Run at Server

This property specifies whether the box should have “runat=server” attribute. Some of the boxes are not affected by this property as they always run at server by default.

Use Update Panel

This property specifies whether the box should be wrapped inside an update panel.

Visibility

M# Provides many properties to manage visibility of a box ranging from strand rules to query string and roles as shown in the screenshot below: