jsPlumb在html与cshtml显示问题
0
悬赏园豆：5
[待解决问题]
最开始我用idea做了一个流程图的页面可以显示出来，可是为啥我用.net下的cshtml却显示不出连线，html和js代码我都是从idea复制的
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="">
<style>
.start {
background-color: #fc8801;
border-radius: 25em;
-moz-border-radius: 25em;
height: 38px;
width: 92px;
/ padding: 5px; /
/ padding-left: 18px; /
padding-top: 11px;
/ line-height: 20px; */
text-align: center;
height: 32px;
float: left;
}
.approve {
background-color: #00b4fe;
width: 92px;
/* padding: 5px; */
/* padding-left: 18px; */
padding-top: 11px;
/* line-height: 20px; */
text-align: center;
height: 32px;
float: left;
}
.copy {
background-color: #ffd966;
width: 92px;
/* padding: 5px; */
/* padding-left: 18px; */
padding-top: 11px;
/* line-height: 20px; */
text-align: center;
height: 32px;
float: left;
}
.end {
background-color: #fc8801;
border-radius: 25em;
-moz-border-radius: 25em;
height: 38px;
width: 92px;
/* padding: 5px; */
/* padding-left: 18px; */
padding-top: 11px;
/* line-height: 20px; */
text-align: center;
height: 32px;
float: left;
}
</style>
</head>
<body>
<div id="diagramContainer">
111
<div style="margin-top: 200px">
<div class="start" id="start"><span>开始</span></div>
<div style="margin-left: 100px" class="approve" id="step1">审批1</div>
<div style="margin-left:150px" class="approve" id="step2">审批2</div>
<div style="margin-left: 170px" class="copy" id="copy">分发</div>
<div style="margin-left: 200px" class="end" id="end">结束</div>
</div>
</div>
<script src="~/js/jquery/jquery-1.12.4.min.js"></script>
<script src="~/js/jquery/jquery-ui.js"></script>
<script src="~/js/jquery/jsplumb.min.js"></script>
<script>
var jsText = 'jsPlumb.ready(function () {\n' +
' var flowConnector = {\n' +
' // connector: ["Bezier", { curviness: 0 }],\n' +
' //anchors: ["BottomCenter", "TopCenter"],\n' +
' connector:'Straight',\n' +
' paintStyle: { lineWidth: 2, strokeStyle: "#61B7CF", fillStyle: "transparent" },\n' +
' //paintStyle: { lineWidth: 2, strokeStyle: "#61b7cf", joinstyle: "round", outlineColor: "white", outlineWidth: 2 },\n' +
' overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],\n' +
' endpoint: ["Dot", { radius: 1 }]\n' +
' };\n' +
' var returnConnector = {\n' +
' connector: "Bezier",\n' +
' //anchors: ["BottomCenter", "TopCenter"],\n' +
' paintStyle: { lineWidth: 2, strokeStyle: "red", fillStyle: "transparent" },\n' +
' //paintStyle: { lineWidth: 2, strokeStyle: "#61b7cf", joinstyle: "round", outlineColor: "white", outlineWidth: 2 },\n' +
' overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],\n' +
' endpoint: ["Dot", { radius: 1 }]\n' +
' };\n' +
' var connection1= jsPlumb.connect({\n' +
' source: 'start',\n' +
' target: 'step1',\n' +
' anchor: ['Right', 'Left']\n' +
' },flowConnector)\n' +
' var connection2= jsPlumb.connect({\n' +
' source: 'step1',\n' +
' target: 'step2',\n' +
' },flowConnector)\n' +
' var connection3= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'copy',\n' +
' },flowConnector)\n' +
' var connection4= jsPlumb.connect({\n' +
' source: 'copy',\n' +
' target: 'end',\n' +
' },flowConnector)\n' +
' connection1.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通过</span>);\n' +
' var returnStep1= jsPlumb.connect({\n' +
' source: 'step1',\n' +
' target: 'start',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep1.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
' var returnStep2= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'step1',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep2.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
' var returnStep3= jsPlumb.connect({\n' +
' source: 'step2',\n' +
' target: 'start',\n' +
' anchor: ['Top', 'Top']\n' +
' },returnConnector)\n' +
' returnStep3.setLabel(<span style=\'display:block;padding:10px;opacity: 0.8;filter: alpha(opacity=80);font-family: helvetica;height:auto;background-color:white;border:1px solid #346789;text-align:center;font-size:12px;color:black;border-radius:0.5em;\'>通不过</span>);\n' +
'\n' +
' })'
var jscode = new Function(jsText)();
</script>
</body>
</html>
我在用cshtml页面打开是没有连线的，用idea打开是有的，是不是cshtml与html有啥不一样
