Server and Client Side Method

Question

I am using ASP.NET with C # 2.0. I created several objects for the database, and each of these objects has properties that can be called initially or called in a similar way, and create a RESTful JSON API from them.

I have many tabulated things that I like to call "modules" on this site. The function of the module is to convert the data to HTML that will be displayed on the page. Idealism should be performed both on the server side of C #, and on loading the first tab, and then use Ajax to load others when clicking on the tabs, however, for older browsers and search engines, the tab is still a link that will load on the same server side HTML code.

Currently, I find the JavaScript code completely separate from the C # code that converts each module to HTML, but the method is almost the same, just in a different language. Like in 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 what I came across with this question. What would be the most effective way to do this? I was thinking of several alternatives -

1. Each ModuleToHtmlMethod module can be a class that defines how this data object is converted to HTML. I tried to do this, but I stopped because I was getting too complicated.

2. Write your own scripting language, which can be interpreted as C #, but also "compiled" into JavaScript code.

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

4 .. Separate the code and write each method twice.

I would like, after all, to let other developers write these “modules”, so maybe option 2 is the best option?

Answer 1

I will give up option 4, as this will make maintenance difficult, and you may not have to sync between the HTML generated by Javascript and the C # code. I would also give up option 2, as this can make the code more complicated for other developers, and also probably redundant.

I would definitely generate HTML in one place and probably expose a RESTful HTML API that uses the existing C # function to return HTML fragments. 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 few suggestions.

• Have a general GetHtml method that reflects html. This can be tricky because the user interface is not something that displays data fields easily and evenly.
• Get a meta description of your "modules", use this to create your own common GetHtml methods.
• Finally try this : it will let you just create JavaScript methods, then you can call them from C #

I would choose the second option for describing metadata, 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 accoc pocos data, nhibernate configuration files, etc. Then I have a metadata file that adds information to these objects, such as UI mapping information and field validation information.

Tpx

Guido