WebForms Controls vs. data model

MultiColContentWithImage.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MultiColContentWithImage.ascx.cs" Inherits="MultiColContentWithImage" %>
<div class="grid">
    <div class="grid-col grid-col_10of10">
        <div class="info">
            <div class="info-title">
                <h1><%= Title %></h1>
            </div>
            <div class="info-hd info-hd_intro">
                <p><%= Description %></p>
            </div>
        </div>
        <ul class="blocks blocks_2upTo5up">
            <% foreach (var infoGraphic in InfoGraphics) { %>
            <li>
                <div class="infoGraphic">
                    <div class="infoGraphic-img">
                        <img src="<%= infoGraphic.ImageUrl %>"/108/97" alt="" />
                    </div>
                    <div class="infoGraphic-hd">
                        <h3><%= infoGraphic.Heading %></h3>
                    </div>
                    <div class="infoGraphic-bd">
                        <p><%= infoGraphic.Body %></p>
                    </div>
                </div>
            </li>
            <% } %>
        </ul>
    </div>
</div>

MultiColContentWithImage.ascx.cs

using PurinaOne.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using umbraco;

public partial class MultiColContentWithImage : BaseWidget
{
    protected string Title { get; set; }
    protected string Description { get; set; }
    protected List<InfoGraphic> InfoGraphics { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        BindData();
    }

    private void BindData()
    {
        Title = Node.GetProperty<string>("title");
        Description = Node.GetProperty<string>("description");

        var listItemsSource = Node.GetPropertyValueOrDefault("columns");
        if (string.IsNullOrWhiteSpace(listItemsSource)) return;
        
        var doc = XElement.Parse(listItemsSource);
        InfoGraphics = doc.Descendants("item").Select(x => new InfoGraphic(x)).ToList();
    }
}

public class InfoGraphic
{
    public string ImageUrl { get; set; }
    public string Heading { get; set; }
    public string Body { get; set; }

    public InfoGraphic(XElement element)
    {
        var image = element.Descendants("columnImage").FirstOrDefault();
        var title = element.Descendants("columnTitle").FirstOrDefault();
        var content = element.Descendants("columnContent").FirstOrDefault();

        ImageUrl = image != null ? uQuery.GetMedia(image.Value).GetImageUrl() : string.Empty;
        Heading = title != null ? title.Value : string.Empty;
        Body = content != null ? content.Value : string.Empty;
    }
}

Old_MultiColContentWithImage.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MultiColContentWithImage.ascx.cs" Inherits="MultiColContentWithImage" %>


<section class="module-page clear">
    <header class="mod-header">
        <h3 class="heading-primary" id="h3Wrapper" runat="server"><asp:Literal ID="titleLit" runat="server"></asp:Literal></h3>
        <h4 class="heading-sub-module"><asp:Literal ID="descriptionLit" runat="server"></asp:Literal></h4>
    </header>

<asp:ListView runat="server" ID="Items">
    <LayoutTemplate>
        <div class="wrapper-column clear sub-columns">
            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
        </div>
    </LayoutTemplate>
    <itemtemplate>
        <div class="sub-column <%# Eval("ColCount") %>">
            <div class="column-bumper">
                <purina:AdaptiveImage runat="server" CssClass="img-accent" ID="MainImage" MediaIdString='<%# Eval("ImgId") %>'/>
                <h4 class="heading-module"><%# Eval("Title") %></h4>
                <div class="content-module"><%# Eval("Content") %></div>
            </div>
        </div>
        <!-- /column -->
    </itemtemplate>
    <EmptyDataTemplate>
        <p class="error">No content item set or inappropriate content item set</p>
    </EmptyDataTemplate>
</asp:ListView>
      <!-- /wrapper-column -->
      </section>

Old_MultiColContentWithImage.ascx.cs

using System;
using System.Linq;
using System.Xml.Linq;
using PurinaOne.Extensions;

using umbraco;
using umbraco.cms.businesslogic.media;

public partial class MultiColContentWithImage : BaseWidget
{
    protected void Page_Load(object sender, EventArgs e)
    {

        BindData();
    }

    private void BindData()
    {
        titleLit.Text = Node.GetPropertyAsString("title");
        descriptionLit.Text = Node.GetPropertyAsString("description");
        h3Wrapper.Attributes["class"] += " "
                                         +
                                         ColorStyleHelper.GetStyleByColor(
                                                                          Node.GetPropertyValueOrDefault(
                                                                                                         "sectionTitleColor",
                                                                                                         true));

        var listItemsSource = Node.GetPropertyValueOrDefault("columns");
        if (!string.IsNullOrWhiteSpace(listItemsSource))
        {
            // ReSharper disable PossibleNullReferenceException
            var doc = XElement.Parse(listItemsSource);
            Items.DataSource = doc.Descendants("item").Select(x => new
                {
                    ImgId = x.Descendants("columnImage").FirstOrDefault().Value,
                    Title = x.Descendants("columnTitle").FirstOrDefault().Value,
                    Content = x.Descendants("columnContent").FirstOrDefault().Value,
                    ColCount = GetColCountStyle(doc.Descendants("item").Count())
                });
            // ReSharper restore PossibleNullReferenceException
        }

        Items.DataBind();
    }

    private string GetColCountStyle(int count)
    {
        switch (count)
        {
            case 2:
                return "two";
            case 3:
                return "three";
            case 4:
                return "four";
            case 5:
                return "five";
            case 6:
                return "six";
            default:
                return "one";
        }
    }
}