如何将生成的 xml 的 mxgraph 传递给控制器的 Action？

Question

我已经使用 asp.net mvc5 启动了一个项目，然后从 github https://github.com/jgraph/mxgraph

的原始来源下载了 mxGraph 项目

我已经在我的 mvc 项目中加载了 mxgraph www 文件夹和 src 文件夹，并编辑了我的 Index.cshtml 文件，如下所示


    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><! 
    [endif]-->
    <!DOCTYPE html>
    <html>
    <head>
        <title>Grapheditor</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="/styles/grapheditor.css">
        <script type="text/javascript">
            var urlParams = (function(url)
            {
                var result = new Object();
                var idx = url.lastIndexOf('?');
                if (idx > 0)
                {
                    var params = url.substring(idx + 1).split('&');
                    for (var i = 0; i < params.length; i++)
                    {
                        idx = params[i].indexOf('=');
                        if (idx > 0)
                        {
                            result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                        }
                    }
                }
                return result;
            })(window.location.href);
            mxLoadResources = false;
        </script>
        <script type="text/javascript" src="/js/Init.js"></script>
        <script type="text/javascript" src="/deflate/pako.min.js"></script>
        <script type="text/javascript" src="/deflate/base64.js"></script>
        <script type="text/javascript" src="/jscolor/jscolor.js"></script>
        <script type="text/javascript" src="/sanitizer/sanitizer.min.js"></script>
        <script type="text/javascript" src="/src/js/mxClient.js"></script>
        <script type="text/javascript" src="/js/EditorUi.js"></script>
        <script type="text/javascript" src="/js/Editor.js"></script>
        <script type="text/javascript" src="/js/Sidebar.js"></script>
        <script type="text/javascript" src="/js/Graph.js"></script>
        <script type="text/javascript" src="/js/Format.js"></script>
        <script type="text/javascript" src="/js/Shapes.js"></script>
        <script type="text/javascript" src="/js/Actions.js"></script>
        <script type="text/javascript" src="/js/Menus.js"></script>
        <script type="text/javascript" src="/js/Toolbar.js"></script>
        <script type="text/javascript" src="/js/Dialogs.js"></script>
    </head>
        <body class="geEditor">
            <script type="text/javascript">

            (function() {
                var editorUiInit = EditorUi.prototype.init;
                EditorUi.prototype.init = function() {
                    editorUiInit.apply(this, arguments);
                    this.actions.get('export').setEnabled(false);
                    if (!Editor.useLocalStorage)
                    {
                        mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req) {
                            var enabled = req.getStatus() != 404;
                            this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
                            this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
                            this.actions.get('save').setEnabled(enabled);
                            this.actions.get('saveAs').setEnabled(enabled);
                            this.actions.get('export').setEnabled(enabled);
                        }));
                    }
                };
                mxResources.loadDefaultBundle = false;
                var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

                mxUtils.getAll([bundle, /*STYLE_PATH +*/ '/styles/default.xml'], function(xhr) {
                    mxResources.parse(xhr[0].getText());
                    var themes = new Object();
                    themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

                    new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
                }, function() {
                    document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
                });
            })();
        </script>
    </body>
    </html>

此页面加载正常。我的 init.js 如下：

// URLs for save and export
    window.EXPORT_URL = window.EXPORT_URL || '/export';
    window.SAVE_URL = window.SAVE_URL || 'save';
    window.OPEN_URL = window.OPEN_URL || '/open.html';
    window.RESOURCES_PATH = window.RESOURCES_PATH || '/resources';
    window.RESOURCE_BASE = window.RESOURCE_BASE || window.RESOURCES_PATH + '/grapheditor';
    window.STENCIL_PATH = window.STENCIL_PATH || '/stencils';
    window.IMAGE_PATH = window.IMAGE_PATH || '/images';
    window.STYLE_PATH = window.STYLE_PATH || '/styles';
    window.CSS_PATH = window.CSS_PATH || '/styles';
    window.OPEN_FORM = window.OPEN_FORM || '/open.html';
    window.mxBasePath = window.mxBasePath || '/src';
    window.mxLanguage = window.mxLanguage || urlParams['lang'];
    window.mxLanguages = window.mxLanguages || ['de'];

现在我想在绘制图表并单击 File/Save 后将生成的 xml 传递给我的 Action。

Answer 1

感谢您的回复。我找到了我的意思的解决方案。

@{
    Layout = null;
}
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <!--head is as past and jquery added-->
    //previous repeated code collapsed for brevity 

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body class="geEditor">
    <script type="text/javascript">
        // Extends EditorUi to update I/O action states based on availability of backend
        (function () {
            var editorUiInit = EditorUi.prototype.init;

            EditorUi.prototype.init = function () {
                editorUiInit.apply(this, arguments);
                this.actions.get('export').setEnabled(false);

                //previous repeated code collapsed for brevity 

                this.editor.setFilename('doc1.xml');

                //save editorUi object
                var editorUI = this;

                //this part shal be inserted
                //override EditorUi.saveFile function for customization
                this.save = saveXml;
                function saveXml() {

                    if (editorUI.editor.graph.isEditing()) {
                        editorUI.editor.graph.stopEditing();
                    }

                    var xml = mxUtils.getXml(editorUI.editor.getGraphXml());
                    //xml = encodeURIComponent(xml);

                    if (xml.length < MAX_REQUEST_SIZE) {
                        $.ajax({
                            type: "POST",
                            url: "home/save",
                            processData: false,
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify({ 'xml': xml }),
                            success: function (response) {
                                //alert(response.message);
                            },
                            error: function (ex) {
                                alert(ex.message);
                            }
                        });
                    }
                    else {
                        mxUtils.alert(mxResources.get('drawingTooLarge'));
                        mxUtils.popup(xml);

                        return;
                    }

                };

                //reset onload open function                               
                this.open = defaultOpen;
                function defaultOpen() {};

            };

        })();
    </script>
</body>
</html>

如何将生成的 xml 的 mxgraph 传递给控制器的 Action？

how to pass mxgraph generated xml to Action of controller?

.net

c#

model-view-controller

asp.net-mvc

mxgraph

如何将生成的 xml 的 mxgraph 传递给控制器​​的 Action？

how to pass mxgraph generated xml to Action of controller?

.net

c#

model-view-controller

asp.net-mvc

mxgraph

如何将生成的 xml 的 mxgraph 传递给控制器的 Action？