Làm cách nào để sử dụng ACE với ứng dụng ASP.NET MVC?

Question

Tôi muốn sử dụng trình chỉnh sửa mã trực tuyến ACE trong dự án của mình. Làm thế nào để sử dụng nó trong ASP.NET MVC?

Tôi muốn lưu bất kỳ chỉnh sửa nào được thực hiện với trình chỉnh sửa đó trong cơ sở dữ liệu. Làm thế nào để làm điều đó?

Answer 1

Giả sử bạn có mô hình được nhập mạnh với thuộc tính được gọi là Editor với dữ liệu trong đó. Bây giờ sử dụng một bình thường <div> để load dữ liệu:

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

Bây giờ bạn có thể tạo một trình soạn thảo ace ở vị trí của div với javascript:

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

Bây giờ khi bạn muốn lưu các dữ liệu, ví dụ thông qua một hình thức bưu điện, sử dụng một cái gì đó như thế này để ràng buộc nó trở lại Editor tài sản của mô hình:

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

trong điều khiển của bạn bây giờ bạn có thể lưu dữ liệu vào d atabase

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

Answer 2

Đây là một giải pháp sử dụng công nghệ mới nhất (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."); 
        }       
       }); 
     }); 
    }); 

Trong Bộ điều khiển:

[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

này là làm thế nào tôi đã kết thúc làm việc đó trong 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> 

Trong con tôi troller Add/Edit Method

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