Geek Answers Handbook

How to create SVG with MVC Razor

We are trying to create an SVG control switch for my MVC3 application. Ideally, management will be a partial view, and we will move on to a model that will contain data on how to generate SVG using Razor.

We tried to write SVG in Razor normally, but we get nothing but compilation errors.

How can we generate SVG with MVC3 Razor?

Error: Expression Must Return a Value To Render

EDIT : the error does not come from a partial view, but when we call @ Html.RenderPartial ("SvgRadioButtonControl", ((IResponseLabeledItem) Model) .ResponseOptions) it gives an 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>
+4
source share
1 answer

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 partial expression just stinks:

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

You didn’t mean:

 @(iteration++)
+6
source

More articles:


All Articles