Use partial views for custom MVC html controls

Question

I have a bunch of button-styled links throughout my web app:

<a href="@Url.Action("Index", "Home")" class="btn btn-default btn-lg btn-right">
    <span class="glyphicon glyphicon-home"></span>
    <h3>Store Home</h3>
</a>

Sometimes they get an additional tag to indicate a direction arrow, or some other decoration:

<a href="@Url.Action("Payment", "Checkout")" class="btn btn-primary btn-lg btn-right">
    <h3><<</h3>
    <span class="glyphicon glyphicon-credit-card"></span>
    <h3>Back to Payment</h3>
</a>

My question is, rather than peppering my markup with subtly different flavors of this button copy and pasted, is it appropriate to use a partial view so that the knowledge of how to make a button and its various flavors is all in one place? EDIT: for clarity, I mean a partial view with nothing other than the button markup, and potentially a "button view model" object with the various settings for the view to act on.

It seems like the purpose of partial views is to promote reusability and maintainability, but I'm not sure if I'm taking that too far, or if there's some kind of performance constraint I'm unaware of that makes this a bad idea.

Answer 1

I'd rather go with a custom HTML helper but using a partial to isolate common functionality such as this one seems appropriate as well.

With a custom helper your code might look like this:

@Html.MySuperButton("Store Home", "Index", "Home")

or:

@Html.MySuperButton("Back to Payment", "Payment", "Checkout", "<")

In all cases if you have repeating common functionality, it would be better to encapsulate it into a reusable helper. For such small portions of HTML, a custom helper seems like the most appropriate solution.