如何在我的 ASP.NET MVC 应用程序中使用 ACE? [英] How do I use ACE with my ASP.NET MVC application?

问题描述

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

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

解决方案

假设您有一个强类型模型，它有一个名为 Editor 的属性，其中包含数据.现在使用一个普通的

来加载数据:

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

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

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

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

<%=Html.HiddenFor(m=>m.Editor, new { @id = "hidden_​​editor" }) %><!-- 这是 jQuery，但您可以为此使用任何 JS 框架--><脚本>$("form").submit(function () {$("#hidden_​​editor").val(editor.getSession().getValue());});

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

[HttpPost]公共 ActionResult 索引(IndexModel 模型){var data = model.Editor;//将数据保存到数据库中}

I want to use the ACE online code editor in my project. How do I use it in ASP.NET MVC?

I'd like to save whatever edits are made with that editor in the database. How do I do that?

解决方案

Let's assume you have a strong typed model with a property called Editor with the data in it. Now use a normal <div> to load the data:

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

Now you can create an ace editor in place of the div with javascript:

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

Now when you want to save the data, for instance via a form post, use something like this to bind it back to the Editor property of the model:

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

In your controller you can now save the data to the database

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

这篇关于如何在我的 ASP.NET MVC 应用程序中使用 ACE?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！