如何SVG編輯集成到ASP.NET MVC應用程序

0

我回答我的問題。研究後，我建議部署整個SVG-EDIT lib放到MVC架構，然後修改嵌入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>

來源

2015-01-26 17:41:52 user3808477

0

在這裏，我有一個保存和準備模塊加載功能：有這麼多的工作，以完美的算法做的，但因爲這只是一個測試項目來找出整合的可能性該模塊到環境中，我把足夠的努力來理解與社區分享知識：

這裏是我的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社會的偉大工具。

來源

2015-01-26 23:52:19 user3808477

0

接下來我計劃視圖模式添加到這個模塊從sequal服務器打開的數據，如果該模式是admin，讓用戶編輯現有的數據。我會保持這張貼更新。

1的一種方法是從客戶端刪除過時的工具，但它有一定的限制，即是，CSS不調整

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(); 
 
}); 
 

 
});

這是一個有效的方法，但應該有一個更好的方法來查看參數很少的對象也可以重新調整窗口的大小。我也將繼續這個話題。

來源

2015-01-27 17:31:43 user3808477

+0

function RemoveTools（）{ var frame = document.getElementsByClassName（「iFrameHtmlTag」）[0]; doc = frame.contentWindow.document; （doc！= null）var Tools = ['tool_top'，'tools_left'，'tools_bottom'，'sidepanels'，'main_icon'，'標尺'，'sidepanels'，'canvashadow']; for（i = 0; i user3808477

如何SVG編輯集成到ASP.NET MVC應用程序

回答

相關問題