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 Markup

In this lesson, we discuss the layout of different modules and pages. We will take a look at the code generated by M#. We will discuss the layout of modules Views, Forms and Lists. And also take a look at the code generated for data access. For details on styling of modules, please read lesson “Css and Styling” in chapter 7.

Important: M# generates ASP.NET User Control “.ascx” called “Module” and is placed in “@Modules” folder in “Website” project. M# uses “div” design pattern to layout modules. M# allows developers to create as many modules as necessary on “Model Entities” or special type modules like menus or generic. These Modules are then used on pages to design and layout the individual web page “.aspx”. Modules can be referenced in other modules in order to get access to public methods and properties to perform actions or consume functionality.

View Module

M# refers to “View” screens as the user controls used to display information on a web page. View modules have one default property, on type of the “Model Entity”, which is used to display the related information in the UI. Below is an example of a view module of entity type “Employee”.

BackEnd Generated Code

The backend contains one default property “Item” on entity type “Employee” as the Object source for the view. The example below populates the Item property using M#’s extension method “Get" (For more information, please read lesson Get VS Find in chapter 4) on “HttpRequest” instance. A developer then uses M# to further develop properties and methods as required.

Note: The default “Item” property’s name cannot be changed but, the object source can be changed using M#.

Frontend Generated Code

M# uses “Item” property to populate the frontend information related to the chosen entity type. M# generates a heading body of the module using HTML tags and classes, as shown below:

M# uses “Server.HtmlEncode” to prevent script injection issues where required, as highlighted above. M# allows developers to specify custom “style classes on each level highlighted above.

Form Module

Any page which is developed to take input from the end user is called a “Form”. M# generates Form modules based on “Model Entity Type”, which is then used to populate and load related data on form for inserting or updating records respectively. Let’s have a look on a simple Form Module on our Employee entity type.

Backend Generated Code

M# generates some “Protected” and “Public” properties and methods which are used to populate, load and reference entity related data, shown and described below:

M# generates two default buttons, described below

• Save Button

Calls the “SaveInDatabase” method which calls “PopulateModel” and saves the data captured from frontend to insert or update a record. Further actions on the button can be added in M# e.g. redirecting to another page after saving, showing a message etc. M# generates a server side event handler for this button.

• Cancel Button

M# generates this button with no event handler and let’s the developer decide to implement any non-call to action events e.g. redirecting to previous page.

Important: The picture above contains two properties on Employee entity type. As a good practice, the protected “Item” property should only be used to display read-only information on frontend or to perform custom actions in backend, even though, properties “Employee” and “Item” hold the same instance of “Employee Entity”. Public Employee property is usually used by M# generated code and allows access to the “Employee Entity” instance when referenced in other modules.

Frontend Generated Markup

M# generates frontend of a “Form Module” by wrapping the form inside a server side “Panel”, which has a default button as “Save Button”. M# uses div design pattern to layout the form input controls and then groups individual input control and respective label.

M# generates a form with all the validation in place. A “validation Summary” control is also generated which shows the errors in a Message Box by default (this behaviour can be changed using M#).

Button are grouped separately from the input controls, to give developers more control over the design and layout. M# allows developers to specify custom “Style classes” on each level highlighted below

List Modules

List modules are used to display a collection of records and are of great importance. In M# list modules are also based on a Modal Entity. You cannot have a generic list module. List modules have most of the properties similar to other modules. Let’s take the “Employee” entity for this list module and create a list module to see how M# generates code.

Backend Generated Code

List Module has the simplest generated code when a module is created.

List modules only contain the “OnLoad” event, which calls methods of the base class in order to load and bind the list. Because you always select an entity for a list module, M# by default gets the full record set and displays this in the list.

M# generates an ASP.NET “GridView” control, which can be changed to “ListView” using “RenderMode” attribute in M#. As we specify the attributes e.g. data source, M# generates the related methods (Please read though chapter 11 for more information on list module)

Frontend Generated Markup

M# generates the front end with an ASP.NET update panel which contains an ASP.NET grid view control. With all the available properties of the entity selected at the time of creating the list module. Like all other modules M# generates a header for this module as well.

You can use module attributes in M# to further customize the module functionality and mark-up e.g. adding pagers, changing grid view to list view, defining custom mark-up.

Menu Modules

Menu modules are a special type of module, which are used to render static or dynamic navigation options in the website. You can render a menu horizontally or vertically and customize the layout and design by using attributes and applying css classes (For more information on using and customizing menus please read through chapter 10).

Backend Generated Code

When you add a menu, M# generates some methods in the backend (C#) file, which are used to mark the selected Item in the menu by matching the sitemap keys or any custom code specified by the developer.

Frontend Generated Markup

This module doesn’t contain any heading tags and all the elements are wrapped inside one container element having a class “menu-module”. Each Menu Item is placed inside one container element marked as server side.