Question

We am trying to make an SVG generated radio button control for my MVC3 application. Ideally, the control would be a partial view and we would pass in a model which would contain data on how to generate the SVG using Razor.

We have tried to write the SVG into Razor normally, but we get nothing but compile errors.

How can we generate SVG using MVC3 Razor?

The error is: Expression Must Return a Value To Render

EDIT: The error is not coming from within the partial view, but when we call @Html.RenderPartial(“SvgRadioButtonControl”, ((IResponseLabeledItem)Model).ResponseOptions)
it gives the error.

    @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

Replace:

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

with:

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

or if you prefer:

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

Also the following expression in your partial just stinks:

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

Didn’t you mean:

@(iteration++)