• Basics
  • Abyss
  • Web APIs
  • C# & Razor
  • .net API
  • JS & TS API

    Show / Hide Table of Contents

    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]

    Demo App and further links

    You should find some code examples in this demo App

    • Blog App

    History

    1. Introduced in 2sxc 8.04
    2. Enhanced with Enable(...) method in 9.30
    3. Enhanced with TagToolbar(...) in 9.40
    • Improve this Doc
    Back to top Generated by DocFX