Comment puis-je utiliser ACE avec mon application ASP.NET MVC?
-
27-10-2019 - |
Question
Je veux utiliser l'éditeur de code en ligne ACE dans mon projet. Comment puis-je utiliser dans ASP.NET MVC?
Je voudrais sauver ce modifications sont apportées avec cet éditeur dans la base de données. Comment puis-je faire?
La solution
Supposons que vous avez un solide modèle typé avec une propriété appelée Editor
avec les données qu'il contient. Maintenant, utilisez une <div>
normale pour charger les données:
<div id="editor"><%=Model.Editor %></div>
Vous pouvez maintenant créer un éditeur ace à la place du div avec javascript:
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor = ace.edit("editor");
};
</script>
Maintenant, quand vous voulez enregistrer les données, par exemple au moyen d'un poste de forme, utilisez quelque chose comme ça pour se lier de nouveau à la propriété Editor
du modèle:
<%=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>
Dans votre contrôleur, vous pouvez maintenant enregistrer les données dans la base de données
[HttpPost]
public ActionResult Index (IndexModel model) {
var data = model.Editor;
// save data in database
}
Autres conseils
Voici une solution en utilisant les technologies les plus récentes (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.");
}
});
});
});
contrôleur:
[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
}
Voici comment j'ai fini par le faire dans Vues Razor
@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>
Dans mon contrôleur Ajouter / Modifier la méthode
[HttpPost]
[ValidateInput(false)]
public ActionResult AddEdit(Article article, FormCollection formCollection)
{
article.CompanyId = OperatingUser.CompanyId;
article.CascadingStyles = article.CascadingStylesHdn;
article.JavaScript = article.JavaScriptHdn;