any ideas for avoiding duplicate code in C# and javascript

Question

i have an asp.net mvc website where i build up most of the page using C# for example building up html tables given a set of data from my viewmodel

i also have a lot of javascript that then dynamcially modifies these tables (add row for example).

the javascript code to add a new row looks extremely similar to my "rendering" code i have in C# that is used to build up the html table in the first place.

Every time i change the c# code to a add a new field, i have to remember to go back to the javascript code to do the same.

is there a better way here?

Answer 1

One way to do this is to expose the logic that generates the markup as a web service on your server and have JavaScript get that markup via an AJAX call rather than duplicating the logic.

This way you can call something like a CreateRow method from JavaScript that will actually invoke the same exact logic that you used on the server when you rendered the page.

Answer 2

Look at Scott Gu's article: ASP.NET MVC 2: Model Validation

Basically, you define the validations at the model property level, and ASP.NET MVC 2 can automatically generate the proper client-side validation as well.

Unfortunately, this may mean you'll have to refactor everything into MVC, but a lot of ppl here would probably view that as a plus.

(disclaimer: I have not worked with ASP.NET MVC at all)

Answer 3

Contrary to accepted and popular answer by @Andrew Hare. I would rather implement the markup generation only in javascript (and reuse that for building HTML tables) than implement markup only in C# (if javascript needs that functionality too, of course).

Because:

1. Javascript is is better than C# for HTML, because it can modify the already rendered DOM. So with Javascript you can do much more than just static HTML. And maybe you don't need it now, but nowadays are not rare the requirements that aim for the application becoming more like a Rich Internet Application.
2. AJAX calls are more likely to be slower than the worst Javascript implementation which handles server-side data and transforms that into new rows of an existing table. And also slower than making the table from scratch in Javascript.
3. Less server requests (and more client side requirements, but that usually is not a problem).
4. There a several very good Javascript frameworks that makes really nice tables (and much more).

I know that ASP.NET MVC has a lot of nice examples on how to use HTML Helpers for your controls, resulting in clean and fast development. But if you end up creating Javascript functions anyway then I think you should consider again the separation of concerns, and stick with Javascript and discard the duplication in the HTML Helpers.

Because expanding your Javascript functions to create the whole table if you are already creating the rows should not be that hard I guess. Here is an idea of how to pass the data to Javascript and then using the function "createRow" that you already have in Javascript:

<script>
    var data = [];
    <% foreach (var item in Model) { %>
        data.push({
            Id: <%= Html.Encode(item.Id) %>
            , Title: <%= Html.Encode(item.Title) %>
        });
    <% } %> 
    createTableHeader();
    for (var i = 0; i < data.length; i++) {
        createRow(data[i]);
    }
    createTableFooter();
</script>