model-view-controller - 如何将 svg-edit 集成到 ASP.NET MVC 应用程序

Question

我即将将svg-edit集成到 ASP.NET MVC 项目中。有没有人有关于如何开始的建议或教程？

谢谢你。

score 0 · Accepted Answer

我正在回答我自己的问题。经过研究，我建议将整个 SVG-EDIT lib 部署到 mvc 架构中，然后修改 embed api 如下：

这是我的部分视图和 JS 文件，它调用嵌入 api 并将其放入部分视图中的 iframe 中：

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
// Make sure to add the embedapi into the html file, becuase the intialization function runs actually in that file, all this call does is basically to take the iframe from html and inialize the api within that tag. 

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });

@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
    <input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>

</body>




</html>

score 0 · Accepted Answer

接下来，我计划向该模块添加一个查看模式，该模式从一个同步服务器打开数据，如果模式是管理员，则允许用户编辑现有数据。我会保持更新。

1-一种方法是从客户端删除工具，但它有一定的限制，那就是css不会调整a

function RemoveTools() {

    var frame = document.getElementsByClassName("iFrameHtmlTag")[0];
    doc = frame.contentWindow.document;
   
    if (doc != null) {
        var Tools = [
            'tools_top', 'tools_left', 'tools_bottom', 'sidepanels', 'main_icon', 'rulers', 'sidepanels', 'canvashadow'];
        for (i=0; i<Tools.length;i++)
        {
        doc.getElementById(Tools[i]).style.display = "none";
        }
   } else
        alert("Doc was null");
};

$(document).ready(function () {
$("#hide").click(function () {
    RemoveTools();
});

});

这是一种有效的方法，但应该有更好的方法来查看带有少量参数的对象并重新调整窗口的大小。我也会继续这个话题。

score 0 · Accepted Answer

在这里，我为模块准备了保存和加载功能：为了完善算法，有很多工作要做，但由于这只是一个测试项目，以确定将模块集成到环境中的可能性，所以我放了足够多努力理解与社区分享知识：

这是我的cshtml文件：

@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>
</body>
</html>

这是js文件：

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
document.write("<script src='~/Scripts/jquery-1.10.2.js'></script>");

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });

$(document).ready(function () {
    // jquery selectro

    $("#save1").click(function () {
        $("#DivData").append("<b>Appended text</b>");
    });

});

$(document).ready(function(){
        $("#CloseSVG").click(function () {
            $("#svg").hide();
        });
    });

function HandleSvgData(data,error) {
    if (error) {
        alert('Error:' + error);
    } else {
        $('#DivData').append(data);
        alert(data);
    }
}

function handleSvgData(data, error) {
    alert("handling Data");
    if (error) {
        alert('error ' + error);
    } else {
        alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
    }
}




function save1() {
    alert("saving");
   // svgCanvas.getSvgString()(handleSvgData);
    $("#svgedit").append($('This is the test classed appended after DivDat'));
}

function AddNewElemnt()
{
    var newElement = document.createElement("Test");
    var newNode = document.createTextNode("This is my new node!");
    newElement.appendChild(newNode);

    var referenceElement = document.getElementById("mainBody");
 
    var tagInsert = document.getElementById("TestId");
    referenceElement.insertBefore(newElement, tagInsert);
   // alert("added");

}

function Postt(data) {
    

}

function Post(data) {
    var mainBody = document.getElementById("mainBody");
    var SvgDataId = prompt("give me primary id");
    var SvgUser = prompt("give me UserName");
    var form = document.createElement("form");
    form.setAttribute("id", "PostData");
    form.setAttribute("action", "/SvgDatas/Create");
    form.setAttribute("method", "post");
    mainBody.appendChild(form);
    var PostData = document.getElementById("PostData");
    var InputSvgDataId = document.createElement("input");
    InputSvgDataId.setAttribute("name", "SvgDataId");
    InputSvgDataId.setAttribute("value", SvgDataId);
    PostData.appendChild(InputSvgDataId);
    var InputSvgUser = document.createElement("input");
    InputSvgUser.setAttribute("name", "SvgUser");
    InputSvgUser.setAttribute("value", SvgUser);
    PostData.appendChild(InputSvgUser);
    var InputData = document.createElement("input");
    InputData.setAttribute("name", "Data");
    InputData.setAttribute("value", data);
    PostData.appendChild(InputData);
    form.submit();

}






function save() {


    var doc, mainButton,
    frame = document.getElementById('svgedit');
    svgCanvas = new EmbeddedSVGEdit(frame);
    // Hide main button, as we will be controlling new, load, save, etc. from the host document
    doc = frame.contentDocument || frame.contentWindow.document;
    mainButton = doc.getElementById('main_button');
    mainButton.style.display = 'none';

// get data
    svgCanvas.getSvgString()(function handleSvgData(data, error) {
        if (error) {
            alert('error ' + error);
        } else {
            alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
            Post(data);
        }
    });
}

/*
function BuidUrl(SVGUser) {
    var uri = prompt("Give me url where the serach function lives, if empty then I will use Razor syntax to call within MVC architescture");
        if (uri)
            return uri;
        else {
            var urlHelper = ('http://localhost:53546/SvgDatas/Search?id='+SVGUser);
            return urlHelper;
        }
    }
*/


function returnedData_IntializeEditor(data, status) {

    if ((data != null) && (status == "success")) {
        var frame = document.getElementById('svgedit');
        svgCanvas = new EmbeddedSVGEdit(frame);
        doc = frame.contentDocument || frame.contentWindow.document;
        mainButton = doc.getElementById('main_button');
        tool_Bottum = doc.getElementById("#tool_button");
        
        mainButton.style.display = 'none';
        // Open Data into the frame
        // var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
        svgCanvas.setSvgString(data.Data);
    } else {
        $("#svg").append("<li>There is not such a data available in the database!</li>");

    }

}

function LoadExample() {
    var SVGUser = prompt("Enter the SVG ID");
    $.getJSON("http://localhost:53546/SvgDatas/Search?id=" + SVGUser, returnedData_IntializeEditor );
}

这是模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace IntegrationOfSVG.Models
{
    public class SvgData
    {
        public string SvgDataId { get; set; }
        public string SvgUser { get; set; }
        public string Data { get; set; }
    }

   }

感谢 SVG-EDIT 社区提供的出色工具。

model-view-controller - 如何将 svg-edit 集成到 ASP.NET MVC 应用程序

3 回答 3

Related

Reference