Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
38 lines (24 sloc) 2.34 KB

vCard

The virtual business card (vCard) is a demo project on ASP.NET MVC that demonstrates how to use BEM tools for solving ordinary tasks.

LIVE DEMO

How it works

The user sees a form for personal data (first and last name, job title, and contact information). When the user fills in the form and submits it, the information is stored on the server. Then another page opens that shows a Yandex vCard with the information that the user entered in the first step.

Backend

All of the server logic is implemented in a single controller (HomeController.cs).

Controller methods:

  • Index (GET) – Displays the form.
  • Index (POST) – Accepts the submitted form and stores the data in Session.
  • Vcard (GET) – Retrieves the session data by key and displays the vCard.

The model of the Index method (POST) is automatically filled in with the form data using standard ASP.NET MVC Binders (the names of the form fields match the names of the model fields).

Frontend

The application interface is implemented using the BEM methodology. BEM infrastructure for the project: System.Web.Bem.

The project uses the block libraries bem-core and bem-components (they are integrated into the project from NuGet and added to the levels.js file as redefinition levels).

Application blocks:

  • b-page – Common part for all application pages.
  • b-form – The form for entering personal data.
  • b-vcard – The vCard.
  • link – Extension of the link block from the previous redefinition levels (changes the link color).

The common part of the pages is defined in the b-page block. The content of each page is defined by a separate block. A separate redefinition level describes the page blocks that contain the b-page block and sets the necessary content for it.

Page blocks: