I'm trying to display a series of divs in my view, the width of each being dependent on the amount of items in a child list in my view model. I'm determining what the width of the divs ought to be in my controller and am trying to alter the width of the divs in my view by changing the value of the HTML style attribute. However, I can't seem to insert a value from my model into a style attribute in the same way I can insert it into a class attribute. Here's a little bit of my code:

@for (int i = 0; i < Model.IntegrationActivityList.Count; i++)
{
    <div data-integration-id="@Model.IntegrationActivityList[i].WorkflowIntegrationActivityParentId" style="width:@Model.IntegrationActivityList[i].IntegrationActivityDivWidth;">
        /* more code here, iterate through child list items */
    </div>
}

data-integration-id="@Model.IntegrationActivityList[i].WorkflowIntegrationActivityParentId" works fine, but style="width:@Model.IntegrationActivityList[i].IntegrationActivityDivWidth;" does not render a style attribute at all.

I've tried a couple other methods, such as using Html.Raw to generate the markup, also to no avail: <div @Html.Raw("style='width: " + Model.IntegrationActivityList[i].IntegrationActivityDivWidth + ";'")>.

How can I modify the width of my div using Razor and information from my model? (I'm also open to any other suggestions on better ways to accomplish this.)

Related posts

Recent Viewed