locked
Set div content from code behind? RRS feed

  • Question

  • User260076833 posted

    Hello,

    I am using the ACE code editor, embedded in a user defined control:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CodeEditor.ascx.cs" Inherits="MyProject.ctl.CodeEditor" %>
    
    <style type="text/css" media="screen">
        #editor
        { 
            width:600px;
            height:300px;
        }
    </style>
    
    <div id="editor" >function foo(items) {
        var x = "All this is syntax highlighted";
        return x;
    }</div>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    </script>
    
    

    I need to change the contents of the editor from code behind.

    • When I use the code above, I cannot access the div from code behind.
    • When I use runat="server", I can access the div from code behind,
      but then the editor doesn't work anymore:
    Unhandled exception at line 1, column 360827 in https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js
    0x800a139e - JavaScript runtime error: ace.edit can't find div #editor

    How can I set the div content from code behind while keeping the exception away?

    Thanks
    Magnus

    Tuesday, November 7, 2017 4:23 PM

All replies

  • User475983607 posted

    Use an ASP Panel and set the ClientIDMode to Static.  ASP creates unique IDs when server controls are nested within other service controls.

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CodeEditor.ascx.vb" Inherits="VbWebFormsDemo.CodeEditor1" %>
    
    <style type="text/css" media="screen">
        #editor {
            width: 600px;
            height: 300px;
        }
    </style>
    
    <asp:Panel ID="editor" runat="server" ClientIDMode="Static">
        function foo(items) {
                var x = "All this is syntax highlighted";
                return x;
            }
    
    </asp:Panel>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    </script>
    
    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="MyPage.aspx.vb" Inherits="VbWebFormsDemo.MyPage" %>
    <%@ Register Src="~/UserControls/CodeEditor.ascx" TagPrefix="uc1" TagName="CodeEditor" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <uc1:CodeEditor runat="server" id="CodeEditor" ClientIDMode="Static" />
    </asp:Content>
    
    
    



    Tuesday, November 7, 2017 6:01 PM
  • User260076833 posted

    Dear mgebhard,

    thanks! In the meantime, I found (one more time) that the ID is modified by ASP, so that ace.edit couldn't find the div.
    I solved it like this:

    var editor = ace.edit("<%=editor.ClientID%>");

    I tried your method and I found that the ID is not modified in this case.

    Now I wonder which method better suits my use case.
    Note that I want to use a code editor both in the ItemTemplate and the EditTemplate of a FormView. Maybe it would be better to have unique IDs then?

    Thanks
    Magnus

    Thursday, November 9, 2017 3:59 PM
  • User475983607 posted

    Yeoman

    Note that I want to use a code editor both in the ItemTemplate and the EditTemplate of a FormView. Maybe it would be better to have unique IDs then?

    Yes, in HTML elements should have a unique ID. 

    I used the static Id approach according to the user control design as multiple editors will cause multiple API references which can cause issues.  It seemed the intent was a single editor that contained all the necessary references and styles.  

    You might need to tweak the design.

    Thursday, November 9, 2017 4:06 PM
  • User260076833 posted

    Hi mgebhard,

    when I use <%=editor.ClientID%> then multiple editors will not be a problem, right?

    BTW: Are there really two editors at the same time when there is one in the ItemTemplate and the other one in the EditItemTemplate?

    Thanks
    Magnus

    Thursday, November 9, 2017 4:40 PM
  • User475983607 posted

    Yeoman

    when I use <%=editor.ClientID%> then multiple editors will not be a problem, right?

    Each user control will load the JS API and style.  You'll need to read the editor docs or try loading the API multiple times to see if it works as expected. So we are on the same page I'm referring to this...

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js" type="text/javascript" charset="utf-8"></script>

    Yeoman

    BTW: Are there really two editors at the same time when there is one in the ItemTemplate and the other one in the EditItemTemplate?

    It's not a problem if there is one bound record as item templates and edit templates are different views.

    Again, the design intent is not clear so I made a few assumptions.  The basic issue is the editor API expects an ID and ASP.NET renders unique IDs when there are nested controls on the page.

    Thursday, November 9, 2017 4:53 PM