sending an svg string using jquery ajax to mvc controller?

Question

I am trying to send an SVG string to the controller but it is null when it reaches the server.

$.ajax({

        type: "GET",
        url: "/chart/GetChartImage",
        data: JSON.stringify({ svgString: svg }),
        dataType: "text",
        contentType: "application/text; charset=utf-8"

    }).done(function (data) {

        debugger

    });

the data being sent:

"{"svgString":"<svg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"800\" height=\"400\"><desc>Created with Highcharts 3.0.1</desc><defs><clipPath id=\"highcharts-17\"><rect rx=\"0\" ry=\"0\" fill=\"none\" x=\"0\" y=\"0\" width=\"9999\" height=\"400\"></rect></clipPath><clipPath id=\"highcharts-18\"><rect fill=\"none\" x=\"0\" y=\"0\" width=\"780\" height=\"344\"></rect></clipPath></defs><rect rx=\"5\" ry=\"5\" fill=\"#FFF\" x=\"0\" y=\"0\" width=\"800\" height=\"400\"></rect><g class=\"highcharts-grid\" ></g><g class=\"highcharts-grid\" ><path fill=\"none\" d=\"M 10 316.5 L 790 316.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path><path fill=\"none\" d=\"M 10 247.5 L 790 247.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path><path fill=\"none\" d=\"M 10 178.5 L 790 178.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path><path fill=\"none\" d=\"M 10 109.5 L 790 109.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path><path fill=\"none\" d=\"M 10 40.5 L 790 40.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path><path fill=\"none\" d=\"M 10 384.5 L 790 384.5\" stroke=\"#C0C0C0\" stroke-width=\"1\"  opacity=\"1\"></path></g><g class=\"highcharts-axis\" ><path fill=\"none\" d=\"M 119.5 385 L 119.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 194.5 385 L 194.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 268.5 385 L 268.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 343.5 385 L 343.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 418.5 385 L 418.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 492.5 385 L 492.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 567.5 385 L 567.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 642.5 385 L 642.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 716.5 385 L 716.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 44.5 385 L 44.5 386\" stroke=\"#C0D0E0\" stroke-width=\"1\" opacity=\"1\"></path><path fill=\"none\" d=\"M 10 384.5 L 790 384.5\" stroke=\"#C0D0E0\" stroke-width=\"1\"  visibility=\"visible\"></path></g><g class=\"highcharts-axis\" ></g><g class=\"highcharts-series-group\" ><g class=\"highcharts-series\" visibility=\"visible\"  transform=\"translate(10,40) scale(1 1)\" clip-path=\"url(#highcharts-18)\"><path fill=\"none\" d=\"M 35.45454545454545 303.6 L 72.77511961722489 220.8 L 110.09569377990431 41.4 L 147.41626794258374 331.2 L 184.73684210526315 276 L 222.05741626794259 303.6 L 259.377990430622 262.2 L 296.69856459330146 317.4 L 334.01913875598086 289.8 L 371.3397129186603 303.6 L 408.66028708133973 289.8 L 445.98086124401914 303.6 L 483.3014354066986 276 L 520.622009569378 303.6 L 557.9425837320574 289.8 L 595.2631578947369 303.6 L 669.9043062200957 234.6 L 707.2248803827752 331.2 L 744.5454545454546 234.6\" stroke=\"#2f7ed8\" stroke-width=\"2\" ></path></g><g class=\"highcharts-markers\" visibility=\"visible\"  transform=\"translate(10,40) scale(1 1)\" clip-path=\"none\"><path fill=\"#2f7ed8\" d=\"M 744.5454545454546 230.6 C 749.8734545454546 230.6 749.8734545454546 238.6 744.5454545454546 238.6 C 739.2174545454546 238.6 739.2174545454546 230.6 744.5454545454546 230.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 707.2248803827752 327.2 C 712.5528803827751 327.2 712.5528803827751 335.2 707.2248803827752 335.2 C 701.8968803827752 335.2 701.8968803827752 327.2 707.2248803827752 327.2 Z\"></path><path fill=\"#2f7ed8\" d=\"M 669.9043062200957 230.6 C 675.2323062200957 230.6 675.2323062200957 238.6 669.9043062200957 238.6 C 664.5763062200957 238.6 664.5763062200957 230.6 669.9043062200957 230.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 595.2631578947369 299.6 C 600.5911578947369 299.6 600.5911578947369 307.6 595.2631578947369 307.6 C 589.9351578947369 307.6 589.9351578947369 299.6 595.2631578947369 299.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 557.9425837320574 285.8 C 563.2705837320574 285.8 563.2705837320574 293.8 557.9425837320574 293.8 C 552.6145837320574 293.8 552.6145837320574 285.8 557.9425837320574 285.8 Z\"></path><path fill=\"#2f7ed8\" d=\"M 520.622009569378 299.6 C 525.9500095693779 299.6 525.9500095693779 307.6 520.622009569378 307.6 C 515.294009569378 307.6 515.294009569378 299.6 520.622009569378 299.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 483.3014354066986 272 C 488.6294354066986 272 488.6294354066986 280 483.3014354066986 280 C 477.9734354066986 280 477.9734354066986 272 483.3014354066986 272 Z\"></path><path fill=\"#2f7ed8\" d=\"M 445.98086124401914 299.6 C 451.3088612440191 299.6 451.3088612440191 307.6 445.98086124401914 307.6 C 440.65286124401916 307.6 440.65286124401916 299.6 445.98086124401914 299.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 408.66028708133973 285.8 C 413.9882870813397 285.8 413.9882870813397 293.8 408.66028708133973 293.8 C 403.33228708133976 293.8 403.33228708133976 285.8 408.66028708133973 285.8 Z\"></path><path fill=\"#2f7ed8\" d=\"M 371.3397129186603 299.6 C 376.6677129186603 299.6 376.6677129186603 307.6 371.3397129186603 307.6 C 366.01171291866035 307.6 366.01171291866035 299.6 371.3397129186603 299.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 334.01913875598086 285.8 C 339.34713875598084 285.8 339.34713875598084 293.8 334.01913875598086 293.8 C 328.6911387559809 293.8 328.6911387559809 285.8 334.01913875598086 285.8 Z\"></path><path fill=\"#2f7ed8\" d=\"M 296.69856459330146 313.4 C 302.02656459330143 313.4 302.02656459330143 321.4 296.69856459330146 321.4 C 291.3705645933015 321.4 291.3705645933015 313.4 296.69856459330146 313.4 Z\"></path><path fill=\"#2f7ed8\" d=\"M 259.377990430622 258.2 C 264.70599043062197 258.2 264.70599043062197 266.2 259.377990430622 266.2 C 254.049990430622 266.2 254.049990430622 258.2 259.377990430622 258.2 Z\"></path><path fill=\"#2f7ed8\" d=\"M 222.05741626794259 299.6 C 227.3854162679426 299.6 227.3854162679426 307.6 222.05741626794259 307.6 C 216.72941626794258 307.6 216.72941626794258 299.6 222.05741626794259 299.6 Z\"></path><path fill=\"#2f7ed8\" d=\"M 184.73684210526315 272 C 190.06484210526315 272 190.06484210526315 280 184.73684210526315 280 C 179.40884210526315 280 179.40884210526315 272 184.73684210526315 272 Z\"></path><path fill=\"#2f7ed8\" d=\"M 147.41626794258374 327.2 C 152.74426794258375 327.2 152.74426794258375 335.2 147.41626794258374 335.2 C 142.08826794258374 335.2 142.08826794258374 327.2 147.41626794258374 327.2 Z\"></path><path fill=\"#2f7ed8\" d=\"M 110.09569377990431 37.4 C 115.42369377990431 37.4 115.42369377990431 45.4 110.09569377990431 45.4 C 104.7676937799043 45.4 104.7676937799043 37.4 110.09569377990431 37.4 Z\"></path><path fill=\"#2f7ed8\" d=\"M 72.77511961722489 216.8 C 78.10311961722489 216.8 78.10311961722489 224.8 72.77511961722489 224.8 C 67.44711961722489 224.8 67.44711961722489 216.8 72.77511961722489 216.8 Z\"></path><path fill=\"#2f7ed8\" d=\"M 35.45454545454545 299.6 C 40.782545454545456 299.6 40.782545454545456 307.6 35.45454545454545 307.6 C 30.126545454545454 307.6 30.126545454545454 299.6 35.45454545454545 299.6 Z\"></path><path fill=\"none\" d=\"M 25.454545454545453 303.6 L 35.45454545454545 303.6 L 72.77511961722489 220.8 L 110.09569377990431 41.4 L 147.41626794258374 331.2 L 184.73684210526315 276 L 222.05741626794259 303.6 L 259.377990430622 262.2 L 296.69856459330146 317.4 L 334.01913875598086 289.8 L 371.3397129186603 303.6 L 408.66028708133973 289.8 L 445.98086124401914 303.6 L 483.3014354066986 276 L 520.622009569378 303.6 L 557.9425837320574 289.8 L 595.2631578947369 303.6 L 669.9043062200957 234.6 L 707.2248803827752 331.2 L 744.5454545454546 234.6 L 754.5454545454546 234.6\" class=\"highcharts-tracker highcharts-tracker\" stroke-linejoin=\"round\" visibility=\"visible\" stroke-opacity=\"0.0001\" stroke=\"rgb(192,192,192)\" stroke-width=\"22\"  style=\"\"></path></g></g><text x=\"400\" y=\"25\" style=\"font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:10px;color:#274b6d;fill:#274b6d;\" text-anchor=\"middle\" class=\"highcharts-title\" ><tspan x=\"400\">Competitor Trend</tspan></text><g class=\"highcharts-legend\"  transform=\"translate(296,30)\"><rect rx=\"5\" ry=\"5\" fill=\"none\" x=\"0.5\" y=\"0.5\" width=\"208\" height=\"26\" stroke=\"#909090\" stroke-width=\"1\" visibility=\"visible\"></rect><g  clip-path=\"url(#highcharts-17)\"><g><g class=\"highcharts-legend-item\"  transform=\"translate(8,3)\"><path fill=\"none\" d=\"M 0 11 L 16 11\" stroke=\"#2f7ed8\" stroke-width=\"2\"></path><path fill=\"#2f7ed8\" d=\"M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z\"></path><text x=\"21\" y=\"15\" style=\"font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#274b6d;fill:#274b6d;\" text-anchor=\"start\" ><tspan x=\"21\">European Commission (2261)</tspan></text></g></g></g></g><g class=\"highcharts-axis-labels\" ></g><g class=\"highcharts-axis-labels\" ></g><g class=\"highcharts-tooltip\"  style=\"cursor:default;padding:0;white-space:nowrap;\" visibility=\"hidden\"><rect rx=\"3\" ry=\"3\" fill=\"none\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" fill-opacity=\"0.85\"  stroke=\"black\" stroke-opacity=\"0.049999999999999996\" stroke-width=\"5\" transform=\"translate(1, 1)\"></rect><rect rx=\"3\" ry=\"3\" fill=\"none\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" fill-opacity=\"0.85\"  stroke=\"black\" stroke-opacity=\"0.09999999999999999\" stroke-width=\"3\" transform=\"translate(1, 1)\"></rect><rect rx=\"3\" ry=\"3\" fill=\"none\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" fill-opacity=\"0.85\"  stroke=\"black\" stroke-opacity=\"0.15\" stroke-width=\"1\" transform=\"translate(1, 1)\"></rect><rect rx=\"3\" ry=\"3\" fill=\"rgb(255,255,255)\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" fill-opacity=\"0.85\"></rect><text x=\"8\" y=\"21\" style=\"font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;\" ></text></g></svg>"}"

the controller:

[HttpGet]
        public ActionResult GetChartImage(string svgString)
        {
            byte[] imageBytes;

            byte[] bytes = new byte[svgString.Length * sizeof(char)];
            System.Buffer.BlockCopy(svgString.ToCharArray(), 0, bytes, 0, bytes.Length);

            //var byteArray = Encoding.ASCII.GetBytes(svg);
            using (var stream = new MemoryStream(bytes))
            {
                var svgDocument = SvgDocument.Open(stream);
                var bitmap = svgDocument.Draw();
                bitmap.Save(stream, ImageFormat.Png);
                imageBytes = stream.ToArray();
            }

            return new FileContentResult(imageBytes, "image/png");
        }

Answer 1

尝试使用POST而不是GET，还将controller属性更改为HTTPPOST

Answer 2

try:

data: {svgString: svg}

in your ajax settings

I would also use default contentType to preserve url encoding of your svg string.

'application/x-www-form-urlencoded; charset=UTF-8'