javascript - 如何将内联 svg 字符串发布到我的 Controller ？

Question

我想将内联 svg 字符串以及其他一些属性发送到我的 Controller 。

当我用普通字符串(例如“blabla”)替换 svg 字符串时，它可以毫无问题地到达我的 Controller 。但对于实际的 svg 字符串，它永远不会到达 Controller 。

还尝试用 ' 而不是 "包裹我的 svg 字符串，但也没有帮助。

我的数据

     var data = {
        Properties: propertyDict,
        AlphaCode: alphaCode,
        OrderingCode: orderingCode,
        ImageId: $("#imageId").val(),
        Svg: mySvgString
    }

我的ajax

      $.ajax({
        url: '/MyController/MyMethod',
        datatype: "text",
        type: "POST",
        data: $.param({ model: data }),
        success: function (data) {
         // do stuff
        }
    });

我的 svg 字符串

   "<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 880 700"><rect width="880" height="700" style="fill:white;" /><clipPath id="7eb925"><rect x="80" y="80" width="720" height="540" /></clipPath><text x="80" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">10</text><line x1="80" y1="620" x2="80" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="242.93195758226" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">15</text><line x1="242.93195758226" y1="620" x2="242.93195758226" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="358.53402120887" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">20</text><line x1="358.53402120887" y1="620" x2="358.53402120887" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="521.46597879113" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">30</text><line x1="521.46597879113" y1="620" x2="521.46597879113" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="637.06804241774" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">40</text><line x1="637.06804241774" y1="620" x2="637.06804241774" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="726.735969226827" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">50</text><line x1="726.735969226827" y1="620" x2="726.735969226827" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="800" y="634" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">60</text><line x1="800" y1="620" x2="800" y2="80" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="440" y="660" dy="0.35em" font-size="16" text-anchor="middle" style="fill:black;">q [l/s]</text><text x="66" y="597.724788827474" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.3</text><line x1="80" y1="597.724788827474" x2="800" y2="597.724788827474" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="511.023241107517" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.4</text><line x1="80" y1="511.023241107517" x2="800" y2="511.023241107517" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="443.772296000701" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.5</text><line x1="80" y1="443.772296000701" x2="800" y2="443.772296000701" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="388.824272920821" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.6</text><line x1="80" y1="388.824272920821" x2="800" y2="388.824272920821" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="342.366381369908" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.7</text><line x1="80" y1="342.366381369908" x2="800" y2="342.366381369908" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="302.122725200864" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.8</text><line x1="80" y1="302.122725200864" x2="800" y2="302.122725200864" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="266.625304734126" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">0.9</text><line x1="80" y1="266.625304734126" x2="800" y2="266.625304734126" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="234.871780094048" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">1</text><line x1="80" y1="234.871780094048" x2="800" y2="234.871780094048" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="66" y="112.672811907353" dy="0.35em" font-size="14" text-anchor="middle" style="fill:black;">1.5</text><line x1="80" y1="112.672811907353" x2="800" y2="112.672811907353" clip-path="url(#7eb925)" style="stroke:lightgray;stroke-width:1;" /><text x="26.6666666666667" y="350" dy="0.35em" transform="rotate(-90,26.6666666666667,350)" font-size="16" text-anchor="middle" style="fill:black;">L02 [m]</text><line x1="80" y1="80" x2="800" y2="80" clip-path="url(#7eb925)" style="stroke:black;stroke-width:1;" /><line x1="800" y1="80" x2="800" y2="620" clip-path="url(#7eb925)" style="stroke:black;stroke-width:1;" /><line x1="800" y1="620" x2="80" y2="620" clip-path="url(#7eb925)" style="stroke:black;stroke-width:1;" /><line x1="80" y1="620" x2="80" y2="80" clip-path="url(#7eb925)" style="stroke:black;stroke-width:1;" /><text x="440" y="40" dy="0.35em" font-size="18" text-anchor="middle" style="fill:black;">Throw Length</text><text x="440" y="60" dy="0.35em" font-size="16" text-anchor="middle" style="fill:black;">DYBH-125+ATTD-100-125-1</text><line x1="80" y1="620" x2="800" y2="80" clip-path="url(#7eb925)" style="stroke:green;stroke-width:1;" /><line x1="80" y1="343.848538986532" x2="448.201948017958" y2="343.848538986532" clip-path="url(#7eb925)" style="stroke:blue;stroke-width:1;stroke-dasharray:5 5;" /><line x1="448.201948017958" y1="620" x2="448.201948017958" y2="343.848538986532" clip-path="url(#7eb925)" style="stroke:blue;stroke-width:1;stroke-dasharray:5 5;" /><ellipse cx="448.201948017958" cy="343.848538986532" rx="5" ry="5" clip-path="url(#7eb925)" style="stroke:blue;fill:blue;" /></svg>";

我的方法

   [HttpPost] 
   public async Task<string> MyMethod(MyClass model)
    {
     //do stuff
    }

我的类(class)

    public class MyClass
{
    public string AlphaCode { get; set; }
    public MyClass2 OrderingCode { get; set; }
    public string ImageId { get; set; }
    public Dictionary<string, string> Properties { get; set; }
    public string Svg { get; set; }

}

Answer 1

您需要对 svg 图像文本进行编码，因为它包含很多符号，例如 \、" 这会产生问题。

对于编码，您可以使用。

var svgEnc = encodeURIComponent(svgString);

在 Controller 中获取此文本后，您需要解码svg编码文本。