Helper functions - hoping for DRYness

Question

I love the idea of using helper function but I'm struggling a little with design.

I have a Javascript function that can add an entity to a listbox - looks more or less like this:

function MyEntityAdd(o) {
    var li = $('<li />').append(o.Product.Name);
    $('#SomeListbox').append(li);
}

...which gets called in two ways: 1) for displaying items when the page gets loaded:

$(function() {
    @foreach (var item in Model) {
        @: MyEntityAdd({ Product: { Name: '@item.Product.Name' }});
    }
}

and, 2) for adding an item to the existing page when the user (through an ajax call) creates a new entity:

$.ajax({ type: 'post',
    url: '/MyEntity/Create',
    data: { ... },
    success: function(o) {
        MyEntityAdd(o)
    }
});

Now my problem: I need to format product and I accomplish it via a helper function:

@helper FormatProduct(MyEntity e)
{
    <strong>@e.Product.Name</strong> @e.Version
}

so now I can redefine my Js like this (the parameter is now flat, not an object with embedded objects):

function MyEntityAdd(o) {
    var li = $('<li />').append(o.Product);
    $('#SomeListbox').append(li);
}

to call like this:

$(function() {
    @foreach (var item in Model) {
        @: MyEntityAdd({ Product: '@Html.FormatProduct(item.Product)' });
    }
}

...all nice. Except that now the success ajax call doesn't work because the Create action returns a JSON object... so I'd have to format the product inside the controller ie instead of returning:

[HttpPost]
public ActionResult Create(string Name)
{
    MyEntity e = new MyEntity(Name);
    db.MyEntities.Add(e);
    db.SaveChanges();

    return Json(e);
}

I'd have to replicate the formatting functionality at this end as well:

[HttpPost]
public ActionResult Create(string Name)
{
    MyEntity e = new MyEntity(Name);
    db.MyEntities.Add(e);
    db.SaveChanges();

    return Json(new { Product = MyServerSideFormattingFunction(e) });
}

which is eeky (not DRY). inspirations anyone?

Answer 1

You are right to question this. Personally I love DRY but the worst thing I see about the final idea which you quite rightly dislike is that you will be adding HTML in your Controller which is fundamentally bad practice since that is the job of your Views.

I think helper functions are great but while they are only server side they are not the correct tool for your client side use.

So I would rewrite your MyEntityAdd function to be:

function MyEntityAdd(o) {
    var productDisplay = '<strong>' + o.Product.Name + '</strong> ' + o.Version;
    var li = $('<li />').append(productDisplay);
    $('#SomeListbox').append(li);
}

And everything should fall into place as it was before you used the helper method and it is DRY of course. Sometimes the simplest ways are the best :)