Come utilizzare ACE con la mia applicazione ASP.NET MVC?

Question

Voglio usare l'editor di codice ACE on-line nel mio progetto. Come lo uso in ASP.NET MVC?

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

Answer 1

Supponiamo di avere un forte modello tipizzato con una proprietà denominata Editor con i dati in essa contenuti. Ora utilizzare un normale <div> 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, per esempio tramite un post modulo, utilizzare qualcosa di simile per legare di nuovo al Editor di proprietà 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 al d atabase

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

Answer 2

Ecco una soluzione che utilizza più recenti tecnologie (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

questo è come ho finito per fare in 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> 

Nel mio Con troller 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;