locked
Interaction between jquery control and code behind RRS feed

  • Question

  • User260076833 posted

    Hello,

    I would like to encapsulate the ACE Code editor in a user defined form (ascx):

    CodeEditor.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CodeEditor.ascx.cs" Inherits="MyProject.lib.CodeEditor" %>
    
    <style type="text/css" media="screen">
        #<%=editor.ClientID%>
        { 
            width:600px;
            height:300px;
        }
    </style>
    
    <div id="editor" runat="server">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.ClientID%>");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    </script>
    

    In the code behind, I would like to provide some public methods to interact with the jquery control.
    For example, this would be a method to enable/disable the control:

        public partial class CodeEditor : System.Web.UI.UserControl
        {
            public void setEnabled(bool enabled)
            {
             // this would be the JS code:
             /*
              editor.setOptions({
              readOnly: true,
              highlightActiveLine: false,
              highlightGutterLine: false})
              */
            }
        }
    

    I know this is discussed in many threads and I have seen a lot of workarounds, but I still don't have a standard solution for such cases.

    How would you generally call JS functions from code behind and how would you do it in this case?

    Thanks
    Magnus

    Thursday, November 9, 2017 8:31 AM

All replies

  • User-1716951449 posted

    the ui gadget looks like purely client side stuff, if indeed, u should purely using client side approach

    Friday, November 10, 2017 3:17 AM
  • User-1838255255 posted

    Hi Yeoman,

    According to your description, you use ACE coder editor then you want to enable/disable it, I think you could through the ACE control's setReadOnly method to realize it, then you can not input anything, doesn't need through code behind.

    Sample Code:

    <head runat="server">
        <title>ACE in Action</title>
        <style type="text/css" media="screen">
            #editor {
                ;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <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.9/ace.js"></script>
            <script>
                var editor = ace.edit("editor");
                editor.setTheme("ace/theme/monokai");
                editor.getSession().setMode("ace/mode/javascript");
                // The following code set the readonly property of editor  
                editor.setReadOnly(true)
            </script>
        </form>
    </body>

    Best Regards,

    Eric Du

    Friday, November 10, 2017 8:30 AM
  • User475983607 posted

    I know this is discussed in many threads and I have seen a lot of workarounds, but I still don't have a standard solution for such cases.

    How would you generally call JS functions from code behind and how would you do it in this case?

    JavaScript functions are not called from code behind.  The code behind writes JavaScript to the response stream.  The browser loads the dynamically generated JavaScript when the page loads in the browser.  

    ASP Web Forms has server controls for rendering JavaScript.

    https://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript(v=vs.110).aspx

    Friday, November 10, 2017 2:34 PM