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.

Custom element

In the previous lesson we saw how to add an element from an association, and earlier how to create a Master-Detail form. But in some cases you will have to create your own inner form and integrate it in the master form. In this lesson we will learn how to do this for editing data.

Creation of the inner form

To keep things simple, we will create a form on a company and inside this one add another form for editing a specific employee in this company.
Please read the lesson on Referencing Other Modules if you don't know how to reference a module.
Here are the steps for creating our web page:

  1. Create a form on Company
  2. Create a form on Employee
  3. Reference this form in your Company form
  4. In the company form add a new element to display the referenced module

You should get the following result:

Integration

Currently there is no communication between the company form and the employee form, let's implement this.

Load

The inner form works like a standard form, you can set the data source by using a query string parameter for example. But this approach is not the best one, you have to think reusability and maintainability. The inner form must be as loosely coupled as possible.
We will create a new property in the module and set this property as the data source. By doing this the data source can be specified by another module and you don't have to rely on a query string which can have a different name on same pages.

Now the data source of this module is the public property "EmployeeToEdit" which means we can specify it from outside. In the company module M# provides us an attribute for doing this: "Custom initializer".
In this example we will just display the first employee of the company to make things as simple as possible, but in a real-world application that will be for example the admin user of this company.

You can now display the page and check at the result, it starts looking good, but we have two save button, one for each module and we do not want this. Delete the two buttons in the employee module and refresh the page. It is much better but the problem is that now we cannot save information about the employee.

Save

Remember, above we said that the inner module should be loosely coupled. If you don't know how to implement this you can find a clue in the Input elements page. We will set the attribute SaveInDatabase of the employee module to True so we can now have a populate and public save method available from outside.

Let's go back to our company module and let's call this method with the help of the Custom data save attribute.

Now try to edit data in the form and you can see that employee details are saved in the same time as company information, but there is still one problem they don't belong to the same validation group.

Validation

We didn't set a specific validation group for the company module, but by default M# names it "Company".

Add this name to the validation attribute on the employee module to merge those two validation summaries.

Summary

In this tutorial we learnt how to create a reusable custom element and communicate with it. The use of inner modules often reduces the complexity of the application and helps to improve maintenance.
The final implementation: