Server side and client side method

Question

I'm using ASP.NET with C# 2.0. I have created some objects for a database and each of these objects has properties which can be called natively or are called in a similar manner and create a RESTful JSON API from them.

I have a lot of tab-like things I like to call 'modules' on this site - the function of a module is to convert data to HTML to be displayed on the page. Idealy this needs to be done in both server side C# code for the first tab to load, then use Ajax to load the others when the tabs are clicked, however for old browsers and search engines, the tab is still a link that will load the same HTML code server side.

Currently I've writting the JavaScript code completely separately from the C# code that converts each module to HTML, but the method is virtually the same, just a different language. Similar to this example.

C# code

public override string GetHtml()
{
    IJsonObjectCollection<Person> response = ((Village)page).People;
    string html = "<div id=\"test\">";
    foreach (Person person in response)
    {
        html += "<div class=\"person\">";
        html += person.Name;
        if(canEdit) html += "*";
        html += "</div>";
    }
    return html + "</div>";
}

JavaScript code

function getHtml() {
    JsonRequest('/json/villages/1/people', function(response) {
        var html = '<div id="test">';
        for (int i = 0; i < response.length; i++)
        {
            var person = response[i];
            html += '<div class="person">';
            html += person.name;
            if(canEdit) html += '*';
            html += '</div>';
        }
        return html + '</div>';
    });
}

You can probably see where I'm going with this question. What would be the most efficient way of doing this? I was thinking of a few different alternatives -

1. Each ModuleToHtmlMethod could be a class that defines the method of turning this data object into HTML. I attempted this, but I stopped because I was getting too complicated.

2. Write my own scripting language that can be interpreted as C# but also 'compiled' into JavaScript code.

3. Just write the lot in C# and use Ajax to simply request the HTML content from C#

4. Keep the code separated and write every method twice.

I'd like to eventually allow other developers to write these 'modules', so maybe option 2 is the best option?

Answer 1

I would discard option 4 as it will make maintenance more difficult and you may end up out of synch between the HTML generated via the Javascript and the one from the C# code. I would also discard the option 2 as that may make the code more difficult for other developers and also probably unnecessary.

I would definitely generate the HTML in one place and probably expose RESTful HTML API that uses the C# existing function to return the HTML snippets. So from your Javascript you would call:

function getHtml() {
    MyHtmlRequest('/html/villages/1/people', function(response) {
        var html = response.Text;
        return html;
    });
}

Answer 2

A couple of suggestions.

• Have a generic GetHtml method that reflects the html. This can be hard as UI is not something that maps easily and uniformly to data fields.
• Have a meta description of your 'modules', use this to create your generic GetHtml methods
• Finally try this: It will allow you just to create JavaScript methods, you can then call them from C#

I would go for the second, meta description option as this is what I do for my data layers. I basically have a file defining my domain model. I use this to generate all my data acccess pocos, nhibernate config files, etc. I then have a meta data file which adds information to these objects, like UI rendering information and field validation info.

Tnx

Guido