How to make these 2 blocks of almost identical code reusable?

Question

I need advice on what I need to do to make the following two blocks of code reusable. I have to produce another table of funds and while I'm doing that, I'd like to create FundsTable.ascx partial view that all Views that need to display a fund table can use.

// Inherits="System.Web.Mvc.ViewPage<CompanyViewModel> // this is a company
<%foreach (var fund in Model.PageFunds){%>

    <% foreach (var shareClass in fund.ShareClasses) {%>

        <tr class="shareclass">
            <td>
                // displays an image if the ViewModel's Company is not unlisted
                <%= Html.TearsheetImage((Model.Company.ListingType != ListingType.UNLISTED))%>
            </td>
        </tr>
<% } }%>

and

// Inherits="System.Web.Mvc.ViewPage<GroupViewModel> // this is a group of companies
<%foreach (var fund in Model.PageFunds){%>

    <% foreach (var shareClass in fund.ShareClasses) {%>

        <tr class="shareclass">
            <td>
                // displays an image if any Company in the ViewModel's 
                // List<Company> is not unlisted
                <%= Html.TearsheetImage(
                        (Model.Companies.WithCompanyId(fund.Company.Id) != ListingType.UNLISTED))%>
            </td>
        </tr>
<% } }%>

I think I need to abstract the differences away somewhere, but I'm not sure where to put it. Is there any rule-of-thumb I should be following here?

Should both CompanyViewModel & GroupViewModel implement an interface that decides whether the item is Unlisted? Also, what type should my FundTable.ascx be? I was thinking both CompanyViewModel & GroupViewModel could extend FundViewModel (or something) and I could make FundTable a ViewUserControl<FundViewModel> but I don't think that'll work because the functionality needed to determine whether to display the image needs to come from CompanyViewModel & GroupViewModel independently.

Plus, the more I think about this the more I'm cunfusing my self! Any ideas or suggestions? Thankss

Answer 1

If I'm reading this right the code only differs in how you determine whether to display the image.

If this is right this is the perfect place to do a little functional programming!

Create a view model for your .ascx. we'll call it FundsTable.

It will have two properties:

Func<PageFund,bool> ShowImage {get;set;}
IEnumerable PageFund Funds {get;set;}

Make your FundsTable.ascx strongly typed to this object.

Now your logic on whether to display can be passed in:

FundsTable ft = new FundsTable();
ft.ShowImage = f => f.SomeCombinationOfLogic == SomeOtherThing; //<-- Your function can be anything that returns a bool

Now you can do:

<%foreach (var fund in Model.Funds){%>

<% foreach (var shareClass in fund.ShareClasses) {%>

    <tr class="shareclass">
        <td>
            // displays an image if any Company in the ViewModel's 
            // List<Company> is not unlisted
           <% if(Model.ShowImage(fund)) {%>
               <%= Html.TearsheetImage(fund)%>
           <% } %>
        </td>
    </tr>

<% } }%>

Now, its kind of hard for me to tell how the classes relate to each other so you might have to shift the types and logic, but an approach like this should work. Whne you setup your view model for the table simply pass in the function that will determine whether to show the image. Add another Func property if that Tearsheet lookup needs that complexity.

Answer 2

To me a problem like this has its roots in the fact that Company viewmodel and Group of Companies view model are essentialy the same thing (or should be) and you somehow, probably inadvertently, managed to make two different viewmodels out of it. The common logic would be, that a group of companies should just be a List<CompanyViewModel>. You can send a List to the view or viewusercontrol. You don't have to invent a new viewmodel class for it just to include the collection as a property in that class.

check out what you wrote in the commented two lines and think about it.