Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
App_Start
Bem
Controllers
Models
Properties
Views
edge
package/content/Bem
ApplicationInsights.config
Global.asax
Global.asax.cs
README.md
README.ru.md
Vcard.csproj
Web.config
package.json
packages.config

README.md

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: