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.

Customising Layout: Buttons

In this lesson we will learn the attributes of a button available in M#, which can be used to customise the layout of a button. M# supports maximum customisation and provides keywords which can be used in modification as required. Below are the attributes we can use to customise a button.

Hidden Markup

This property is used to display custom mark-up when button is not visible. M# allows developers to define visibility rules or criteria which are discussed later. You cannot use this property without specifying visibility criteria.

Hover Mark-up

This property is very useful in causes where you want to display contents on “MouseOver” event of a button.

Image Template

In M# you can define button image template under project settings (For more information on buttons templates please read lesson Button Templates). You can use this property to specify button themes. “Blue button” is set as the default template when a button is created. Two default templates are shown below:

Link Template

This property can only be used when the button “Style” is selected as link button and is used to specify template mark-up.

Markup Template

This property allows custom mark-up for button wrapper to be defined as shown below. “[#Button#]” is M# keyword which represents the markup of button generated by M#.

Repeat Data Source

This property is very useful when you want to render multiple buttons based on a DataSource. M# generates an ASP.NET Repeater Control with the specified DataSource and places the button as the “ItemTemplate” of the Repeater Control.

Let's say, We want to display “Employee Photos” as an image button which, can redirect users to the full profile of the employee. For this purpose we can get a list of all the employee photos as the DataSource of this property and then can use the “DataItem” to get the photo of the employee as shown below:

Separator Template

This property is used in junction with the previous property “Repeat Data source”. Contents specified in this property are placed in the SeparatorTemplate of ASP.NET Repeater control. You can specify dynamic content or simple static HTML mark-up.

Referencing Buttons in a module

M# provides keyword "[#BUTTONS(NameofButton)#]" which is used to reference a button in the module. M# by default generates modules button on the bottom of the page, we reference the button in this example in our Module “Header” attribute to render it at the top of the page, as shown in the screenshot below (For more information on Module headers, please read lesson Module Header and Footer in this chapter).

Important: M# provides keyboard shortcut to copy the reference of a button. Simply select the button and press "Ctrl+C". M# displays the full reference of the button in a modal window.