ASP.NET Ajax Render Html from Client or Server?

Question

I am using an html <select> (not the server control) on my asp.net webform, which I bound using asp.net ajax via a webservice call. In my webservice I basically do this:

Private Function GetStores() As String
  dim stores as DataTable = GetStores()
  dim html as new StringBuilder
  for each row as DataRow in stores.Rows
    html.append("<option>")
    html.append(row("store"))
    html.append("</option>")
  next
  return html.tostring()
End Function

From my js, I would then simply use:

$get("myddl").innerHTML = "<select>" + result + "</select>";

The reason why I do this is because the server is faster in creating the required HTML. If I were to fill the ddl from the client-side by just returning the dataTable, then I think it will take a bit longer, depending on the rows.

Also please note that I do this only once when the page is loaded.

What do you think about this? Is this bad? If yes, why?

Answer 1

I think it is bad because I have seen many issues from various browsers arise when you just set the innerHTML of an element.

If you try to create elements by just putting the html markup for them into some controls innerHTML, the html DOM does not always get updated. This can cause your values to not get passed back on form submits, or even make it impossible to refer to the elements using javascript.

You should instead have you WebService return JSON or XML data with just the info you need, (just the store name.) And then use javascript to dynamically create and add the options to the dropdown.

Something like this would work well:

// do your AJAX call and pass back the responseText to this function (For a JSON response)
function FillDDL(text)
{
    eval("var data="+text);
    var ddl=document.getElementById('ddlID');

    for( var i=0; i<data.items.count; i++ )
    {
        var option = document.createElement("option");
        option.text=data.items[i];
        option.value=data.items[i]; //IE wont automatically copy the text to the value
        ddl.options.add(option,0); //FF will error if you dont tell it where to add the option
    }
}

And if you aren't familar with JSON, this is the format to use with the code above:

{items:['name','name2','name3']}

Just return a string like the above from your WebService and you should be all set.

Answer 2

Your server-side method doesn't seem to filter that list of options, so if you are just displaying a select list, why not render it with the initial page, rather than making a subsequent request.

As far as performance in concerned, sending back the data in JSON format is less verbose, so less kilobytes. If we're talking 50 items in the drop down list, you will hardly notice the overhead of creating this using JavaScript vs doing it on the server.

Also, there is a known bug in some versions of Internet Explorer that mean you need to replace the entire select rather than simply updating the options - just in case you run into it!