如何在我的 ASP.NET MVC 应用程序中使用 ACE？

Posted 2023-05-07

【中文标题】如何在我的 ASP.NET MVC 应用程序中使用 ACE？

【英文标题】：How do I use ACE with my ASP.NET MVC application?

【发布时间】：2012-01-10 17:54:28

【问题描述】：

我想在我的项目中使用ACE 在线代码编辑器。如何在 ASP.NET MVC 中使用它？

我想将使用该编辑器所做的任何编辑保存在数据库中。我该怎么做？

【参考方案1】：

假设您有一个强类型模型，其中包含一个名为Editor 的属性，其中包含数据。现在使用普通的<div> 来加载数据：

<div id="editor"><%=Model.Editor %></div>

现在您可以使用 javascript 创建一个 ace 编辑器来代替 div：

<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() 
    var editor = ace.edit("editor");
;
</script>

现在，当您想要保存数据时，例如通过表单发布，使用类似这样的方法将其绑定回模型的 Editor 属性：

<%=html.HiddenFor(m=>m.Editor, new  @id = "hidden_editor" ) %>

<!-- this is jQuery, but you can use any JS framework for this -->
<script>
    $("form").submit(function () 
        $("#hidden_editor").val(editor.getSession().getValue());
    );
</script>

在您的控制器中，您现在可以将数据保存到数据库中

[HttpPost]
public ActionResult Index (IndexModel model) 
    var data = model.Editor;
    // save data in database

【参考方案2】：

这是使用最新技术（Razor/MVC/Ajax）的解决方案：

    $(document).ready(function() 
        $("#btnSave").on("click", function ()                 
                $.ajax(
                    url: '@Url.Action("YourAction", "YourController")',
                    type: 'POST',
                    data:  id: @Model.ID,
                            html: ace.edit("editor").getValue() ,
                    cache: false,
                    success: function (response) 
                        alert("Changes saved.");
                                            
                );
        );
    );

在控制器中：

    [AjaxAuthorize]
    [HttpPost, ValidateInput(false)]
    public ActionResult YourAction(string id, string html)
    
        if (id == null || String.IsNullOrEmpty(id))
        
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        
        // do you stuff
    

【参考方案3】：

这就是我最终在 Razor Views 中这样做的方式

@model OfficeGx.Cms.Model.ClassName
<div class="form-group row">
    <div class="col-lg-11">
        @Html.HiddenFor(x => x.CascadingStylesHdn, new  @id = "hidden_cssEditor" )
        @Html.LabelFor(x=>x.CascadingStyles)
        <div id="cssEditor">@Model.CascadingStyles</div>
    </div>
</div>
<div class="form-group row">
    <div class="col-lg-11">
        @Html.HiddenFor(x => x.JavaScriptHdn, new  @id = "hidden_jsEditor" )
        @Html.LabelFor(x => x.JavaScript)
        <div id="jsEditor">@Model.JavaScript</div>
    </div>
</div>
<script>
    var cssEditor;
    var jsEditor;
    window.onload = function() 
        cssEditor = ace.edit("cssEditor");
        cssEditor.getSession().setMode("ace/mode/css");
        cssEditor.setTheme("ace/theme/twilight");

        jsEditor = ace.edit("jsEditor");
        jsEditor.getSession().setMode("ace/mode/javascript");
        jsEditor.setTheme("ace/theme/xcode");
    ;
    $("form").submit(function () 
        $("#hidden_cssEditor").val(window.cssEditor.getSession().getValue());
        $("#hidden_jsEditor").val(window.jsEditor.getSession().getValue());
    );
</script>
<style>
    #cssEditor, #jsEditor 
        position: relative;
        height: 400px
    

    @Model.CascadingStyles
</style>

在我的控制器中添加/编辑方法

[HttpPost]
        [ValidateInput(false)]
        public ActionResult AddEdit(Article article, FormCollection formCollection)
        
            article.CompanyId = OperatingUser.CompanyId;
            article.CascadingStyles = article.CascadingStylesHdn;
            article.JavaScript = article.JavaScriptHdn;