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

发布时间：2020-12-16 06:47:49 所属栏目：asp.Net 来源：网络整理

导读：我们正在尝试为我的MVC3应用程序创建一个SVG生成的单选按钮控件.理想情况下,控件将是局部视图,我们将传入一个模型,其中包含有关如何使用Razor生成SVG的数据. 我们试图将SVG正常编写到Razor中,但除了编译错误之外我们什么也得不到. 我们如何使用MVC3 Razor生

我们正在尝试为我的MVC3应用程序创建一个SVG生成的单选按钮控件.理想情况下,控件将是局部视图,我们将传入一个模型,其中包含有关如何使用Razor生成SVG的数据.

我们试图将SVG正常编写到Razor中,但除了编译错误之外我们什么也得不到.

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

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

编辑：错误不是来自局部视图,而是当我们调用@ Html.RenderPartial(“SvgRadioButtonControl”,((IResponseLabeledItem)模型).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>

解决方法

更换：

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

有：

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

或者如果您愿意：

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

你的部分中的以下表达式只是臭：

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

你的意思是：

@(iteration++)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!