Come posso usare ACE con la mia applicazione ASP.NET MVC?

Question

Voglio utilizzare il ACE editor di codice in linea nel mio progetto. Come si usa in ASP.NET MVC?

mi piacerebbe salvare quello modifiche sono fatti con quella redattore nel database. Come faccio a farlo?

Answer 1

Supponiamo di avere un forte modello tipizzato con una proprietà denominata Editor con i dati in essa contenuti. Ora utilizzare un <div> normale per caricare i dati:

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

Ora è possibile creare un editor asso al posto del div con javascript:

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

Ora, quando si desidera salvare i dati, ad esempio, tramite un post modulo, utilizzare qualcosa di simile per legare di nuovo alla proprietà Editor del modello:

<%=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>

Nel vostro controller è ora possibile salvare i dati nel database

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

Answer 2

Ecco una soluzione che utilizza le tecnologie più recenti (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.");
                    }                        
                });
        });
    });

In Controller:

    [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
    }

Answer 3

In questo modo ho finito per fare in rasoio Visualizzazioni

@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>

Nel mio controller Aggiungi / Modifica Metodo

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