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?

score 0 · Answer 1 · answered Oct 01 '09 at 15:26

0

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.

answered Oct 01 '09 at 15:26

FallenAvatar

4,079
1
21
24

Thanks for the info. Now since I am doing this only on the PageLoad, should I maybe consider using an asp:dropdownlist control and binding it directly from the server? – vikasde Oct 01 '09 at 15:32
@TJMonk15: the blurb about "I have seen many issues..." is vague and FUDdy-sounding. Every approach has issues, including your own answer (that you nicely commented by the way). Some links backing up these issues you've seen would be welcomed I'm sure. Such as http://stackoverflow.com/questions/1066443/ie-innerhtml-error or http://stackoverflow.com/questions/155426/why-does-ie-give-unexpected-errors-when-setting-innerhtml – Crescent Fresh Oct 01 '09 at 15:43
For the record however the OPs specific example has **no** issues in any current browser. – Crescent Fresh Oct 01 '09 at 15:43
@vikasde: Since you only do it on PageLoad, a asp:dropdownlist is a good approach (must have missed that on my first read through :) ) – FallenAvatar Oct 01 '09 at 17:17
@crescentfresh: sorry for not linking examples, I did not have any examples handy :-\ and as for being vague, I appologize. He was just asking for an opinion, so I was just talking for personal experience. Though I have not tried exactly what he was trying to do. – FallenAvatar Oct 01 '09 at 17:18

score 0 · Answer 2 · answered Nov 24 '10 at 14:35

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!

ASP.NET Ajax Render Html from Client or Server?

2 Answers2