This project is read-only.


Microsoft WebMatrix provides an easy way to get started with Web development, and together with new Razor syntax for ASP.NET Web Pages it includes everything you need to get your Web site up, running and integrated with many different sites and networks. The WebMatrix helpers are designed to make your life easier when creating Web sites. They provide you a simple and consistent way of performing common Web development tasks that otherwise would require a great deal of custom coding. With one single line of code you should be able to consume an OData feed, store information in Windows Azure Storage, among other things.

The QuickEdit helper is designed to make your WebMatrix sites editable. When the helper is in place, the users from your site that belong to a group (or role) that you define, will see an Edit button that launches an editor to update the content displayed there. On the other side, unregistered users (or anonymous) will just see the edited content, not the button. You don't have to worry about where to store the edited content, you just need to provide your database name and QuickEdit helper will take care of storing the content there.

The helper includes the following files:

  • The QuickEdit.cshtml file located into the App_Code folder inside you WebMatrix site
  • A SaveContent.cshtml file under the QuickEdit folder that will handle the content data updates against the content database
  • A folder located in QuickEdit/jHtmlAreaFiles, with the jHtmlArea files ( needed to render the HTML content editor

Getting Started in 60 Seconds

The easiest way to get started with the QuickEdit helper is to use the Starter Site WebMatrix template (Quick Start page | Site From Template | Starter Site template), which includes Web site membership configured with the WebSecurity helper. Now, to start using the QuickEdit helper follow these steps:

  1. Open the Files workspace and add the following bolded line to the _AppStart.cshtml page of your WebMatrix site (create this page if it doesn't exists).
        WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);

    Where "StarterSite" is the name of your database. The QuickEdit helper will store the edited content there. Here you can also define which group of users (or roles) can edit the content (for example, @QuickEdit.Initialize("StarterSite", "myAdminGroup") ). The group (or role) used by default will be "admin".

  2. Run the web site and create a new user, by using the Register link on the top right corner of the page.
  3. Following the steps in the section "Creating Security for Groups of Users (Roles)" from this WebMatrix tutorial, create a new "admin" user group (or role) and assign it to the recently created user. quickedit-roles
  4. Add the highlighted lines from below in the page where you want to show editable content. The "homepage" value should be changed if necessary, by a unique name for each editable section. If you're using the Starter Site template, the GetHeaderHtml can be placed in _SiteLayout.cshtml and the GetContentHtml in Default.cshtml.
    <!DOCTYPE html>
  5. That's it! The QuickEdit helper will start managing the editable content of your web site automatically. Try logging in as the user you've created and see how the Edit button is displayed, as this user belongs to the "admin" group (or role).

Running the Bakery Sample Web site

Optionally, you can download a sample WebMatrix web site where you can see the helper in action. To download and run the sample, follow these steps.

  1. Browse to the QuickEdit Helper CodePlex site and download the QuickEdit Helper Sample.
  2. Extract the content of the package, right-click the QuickEdit.Bakery folder and select 'Open as a Web Site with Microsoft WebMatrix'. This will open the Bakery sample web site with WebMatrix.
  3. Click the Run button and play with the sample!

Helper Reference

static void Initialize (string connectionString, [string adminRoleName = "admin"])
  Initializes the QuickEdit helper. The connectionString parameter specifies the database where the editable content will be stored.
@helper GetHeaderHtml ([string htmlEditorFolder])
  Outputs the necessary HTML headers for using the QuickEdit helper. A folder with custom jHtmlArea files ( can be specified to customize the content editor.
@helper GetContentHtml (string contentKey, [string SavePage])
  Displays editable content on the page. When the authenticated user belongs to the Admin role, an Edit button is also displayed.
static string GetContent (string contentKey)
  Retrieves the content data for a specific content key.
static void SaveContent (string contentKey, string contentValue)
  Stores content data into the content storage.
static void SaveContentFromPost ()
  Stores content data sent from a form POST.

Last edited Jan 13, 2011 at 8:26 PM by jsenior, version 96


No comments yet.