Brick River Razor Helpers

Brick River sites are created by web designers using HTML, CSS, Javascript and C# Razor.  Dynamic content is rendered on site pages using C# Razor Helpers.  If you are a web design ninja but have never used ASP.NET - don't be nervous - we'll do all the heavy lifting.

The Blog and News pages of this site provide great examples of Brick River Data Helpers - the Helpers used to display fields from Content and Contacts records on site pages. 

On the page below are examples of a few other important Brick River Helpers

@BRT.PhotoGallery() - used to display photo galleries and carousels

@BRT.Calendar Helpers - to create event calendar and detail pages

@BRT.Login Helpers - to create secure pages


Brick River Photo Gallery Example

The Custom Helper @BRT.PhotoGallery() makes it easy to display a gallery of images stored in a folder.

The example below uses the Helper, along with Bootstrap styles and functions to display a carousel of images in the content/images/gallery folder.

To see this example come together, review

  • Images - located in the folder: content/images/gallery
  • Layout 2 - @BRT.PhotoGallery() retrieves the images and formats the display
  • Style: the file - content/root.css - contains a few tweaks to the .carousel class 


Brick River Calendar Example

The Custom Helpers @BRT.Calendar() and @BRT.CalendarDetail() can be used to easily render calendars with links to Event pages.

The calendar below was added to this page with a single line of code.

@BRT.Calendar( DetailPage:"eventdetail")

Event links launch the page: eventdetail, which contains a two line of code:

<button onclick="goBack()" class="btn btn-primary btn-block">Back to the Calendar</button>

@BRT.CalendarDetail(returnPage:"demo")

The example below displays the default calendar style with a single customization - the cal.day.weekend class is modified in our local stylesheete to change the background color of Saturday and Sunday.

To see this example come together, review:

  • Page - Calendar Detail - @BRT.CalendarDetail() renders the display of Event details along with a simple 'Back to Calendar' button.
  • Layout 2 - @BRT.Calendar() renders the calendar
  • Content Menu - displays event records.  Create new events and refresh the calendar if you feel like it...
  • Style: the file - content/root.css - contains a tweak to the class: .cal.day.weekend

September 2017

SunMonTueWedThuFriSat
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

iCal


Brick River Secure Portal Example

The @BRT.Login() Helpers can be included on Site Layouts to require User authentication for Site Pages. This Demo website uses 'Secure Layout' create secure pages for Contacts to update their profile information using web data forms.

Each Contact in the Demo system uses the "First Name" as both the User Name and Password.  Use the following link to Log In as any of the contacts - open the User Profile form and make any changes you like to that Contact's Profile information. (Try anna / anna to edit the profile of Anna Gonzales)

Enter the Secure Portal

Click the button above to open the Secure Page - which is linked to 'LayoutSecure'

Secure Layout includes the following Helpers:

  • @BRT.LoginForm() - directs User to a simple Login Form
  • @BRT.Logout() - re-directs User to a designated Page upon Log out
  • @BRT.LoginHelp() - prompts User for an email address to send a password reset link
  • @BRT.UserRecord() - sets a User identity following a  successful Log in.
  • @BRT.DataLink() - opens a Contact record for editing  using the 'Update Profile' Data Form and 'Update Profit' View

To see this example come together, review:

  • Pages - Secure Page and its child Page - Secure Page Help
  • LayoutSecure - is linked to Secure Page and Secure Page Help
  • Contacts Menu - the People View is used for User authentication.  Log in as any contact using the 'First Name' as both the User Name and Password.  The 'Update Profile' View is used to open a Contact record for editing.
  • Data Form: the Update Profile data form renders a Contact Profile for editing.