asp.net - 如何使用 MVC Razor 生成 SVG

Question

我们正在尝试为我的 MVC3 应用程序制作 SVG 生成的单选按钮控件。理想情况下，控件将是部分 View ，我们将传入一个模型，其中包含有关如何使用 Razor 生成 SVG 的数据。

我们尝试将 SVG 正常写入 Razor，但除了编译错误之外什么也没得到。

我们如何使用 MVC3 Razor 生成 SVG？

错误是:表达式必须返回要渲染的值

编辑:错误不是来自部分 View 内，而是当我们调用 @Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions) 时 它给出了错误。

    @using SmartQWeb.Models.Entities
@model IEnumerable<ResponseOption>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="300"
   height="400"
   id="radio">
  <script type="application/ecmascript"><![CDATA[
      var innerCircleExpandedSize = 11;
      function ResponseOptionClicked(evt) {
          console.log('Response option clicked');

          // Remove circle in enabled element
          var enabledElem = document.getElementsByClassName('enabled')[0];
          if (enabledElem != undefined) {
              console.log('Removing a inner circle');
enabledElem.getElementsByClassName('response-innercircle')[0].setAttribute('r', 0);
              enabledElem.className.baseVal = enabledElem.className.baseVal.replace('enabled', 'disabled')
          }

          // Add circle in radio button
          console.log('Adding a inner circle');
evt.currentTarget.getElementsByClassName('response-innercircle')[0].setAttribute('r', innerCircleExpandedSize);
          evt.currentTarget.className.baseVal = evt.currentTarget.className.baseVal.replace('disabled', 'enabled');
      }
  ]]></script>
    <g id="base">
        @{
            int iteration = 1;
        }
        @foreach (ResponseOption option in Model)
        {
            <g id="response-never" class="response-option disabled" transform="translate(50,@{ (iteration++ * 1).ToString(); })" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
                <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
                <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
                <text x="40"  y="6.5" font-size="1.5em" fill="blue" class="response-text">@option.Label</text>
            </g>
        }
    </g>
</svg>

Answer 1

替换:

@Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions)

与:

@{Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions);}

或者如果您愿意:

@Html.Partial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions)

此外，您的部分中的以下表达式也很糟糕:

@{ (iteration++ * 1).ToString(); })

你的意思是不是:

@(iteration++)