Edit / @Edit Object in Razor / .net

The entire Edit-UI is JavaScript based, so all the buttons, events etc. are client side scripts. Writing this JS would be complicated to say the least, so the Edit object provides the Razor-Template an intelligent, fast way to generate what's necessary.

Discover More in the Razor Tutorials

We have an rich series of Razor tutorials. You should really check them out 👍.

How to use

Here's a quick example of using the Edit object in a Razor template:

<h1 @Edit.TagToolbar(Content)>
    @Content.Title
</h1>
<div>...</div>

This example shows the title and will add the standard editing-buttons for the Content item.

Here's an Inner Content (Content Within Other Content) example:

<div class="app-blog-text sc-content-block-list" @Edit.ContextAttributes(post, field: "DesignedContent")>
    @foreach(var cb in @post.DesignedContent) {
        @cb.Render();
    }
</div>

In this example, the Edit.ContextAttributes will add some attributes with JSON, which will help the toolbars inside that loop to correctly edit those items, and not the main item around it.

What's In the Edit Object

The Edit-object is always available in all Razor-templates. Read the API: IEditService.

A short summary of what's inside

Check or Enable Editing Mode

  • Edit.Enable(...)
    allows you to enable editing functionality even if it's not available by user permissions, see more

  • Edit.Enabled (boolean)
    Tells you if it's edit-mode or not, allowing your code to output other things if edit is enabled.

Work with Toolbars

Creates a Toolbar, see Razor Edit Toolbar.

  • Edit.TagToolbar(...) attribute (2sxc 9.40+, recommended) it is used inside a tag like
    <div @Edit.TagToolbar(Content)>
    to create best-practice hover toolbars

  • Edit.Toolbar(...) (2sxc 8.04+)
    is used like a tag (it generates an invisible <ul> tag) and is used for non-hover toolbars.

Create HTML Attributes if in Edit Mode

Edit.Attribute create any attribute on the condition that the user may edit the page, using
Edit.Attribute(name, string|object)
for use in things like
<div class="..." @Edit.Attribute("data-enable-edit", "true") >...</div>

Create Context-Attributes for the UI (advanced use cases)

Edit.ContextAttributes(...)
creates Context-Information for other edit-functionality. This is advanced, and currently only needed for Inner Content (Content Within Other Content)) - read about it on [Razor Edit.ContextAttributes](xref:Razor.ContextAttributes]

You should find some code examples in this demo App

History

  1. Introduced in 2sxc 8.04
  2. Enhanced with Enable(...) method in 9.30
  3. Enhanced with TagToolbar(...) in 9.40