Database call vs Passing attributes in ASP.NET AJAX Web Service

Question

I have a food menu application with many food items. Each item has several options which I provide via radio and check buttons. Each button has attributes (i.e., name, code, database id, etc.).

Right now, when the user selects a food item, my jquery code calls a server side Web Service that makes database calls to generate and return the HTML for the buttons and their attributes for the food item.

Radio and Check Button examples:

<input type="radio" value='6 inch:6":538:0.00:116:152:False' />

<input type="checkbox" itemid="152" abbreviation="HP" additionalcost="0.50" ingrdname="Pepper Jack" stdingrd="False" ingid="428" inggroupid="74" />

When the user clicks the buttons to customize the food item and adds the item to their order, the jquery code generates a big string with the button attribute values and sends it to the Web Service that parses the string and adds the info to the database.

The part of the string for the above button examples would look like this:

[6 inch:false:116:538:6":False,Pepper Jack:true:74:428:HP:False]

So all the attribute info is passed back and forth. Of course, the number of buttons for the user is very big.

Question: Should I keep this like it is, or should I just pass a minimal amount of info back and forth (i.e. database id and checked or not checked) , and make additional database calls back on the server to get the needed attribute info when the user adds the item to the order?

All thoughts welcomed.

Answer 1

A backend web service should not return HTML, or even anything to do with HTML constructs. Have it return an object structure and use a templating engine, or a bunch of jquery code to interpret the object data and build the html structures in the UI layer, aka.. your html/js.

If you're using c#, look into WebAPI. It will return and accept JSON objects and translate them into .Net objects/DTO's.

http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

As an example:

Your data service could return some object in JSON:

[{size: "6 inch", sizeAbbrev: '6"', otherProp: 538, otherProp2:116, otherProp3: 152: otherProp4: false}]

Then jquery could do something like:

data.forEach(function(obj, i){
   $('#myDiv').append('<input type="radio" value= "' + obj.size + ':' + obj.sizeAbbrev + '"/>';
});

Templating libs like handlebars do this more cleanly, but jQuery works too..

Now your backend service just serves up data and if you no longer want to use an input box or radio.. you don't need to recompile your svc.. you just change a little lightweight js.