来自客户端还是服务器的ASP.NET Ajax渲染HTML？

Question

我在asp.net网络表单上使用html <select> （不是服务器控件），我通过webservice调用使用asp.net ajax绑定了该表单。 在我的网络服务中，我基本上是这样做的：

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

从我的js，然后我会简单地使用：

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

我这样做的原因是因为服务器可以更快地创建所需的HTML。 如果我只是通过返回dataTable从客户端填充ddl，那么我认为这将花费更长的时间，具体取决于行。

另外请注意，页面加载后我只会执行一次。

你怎么看待这件事？ 这不好吗？ 如果是，为什么？

Answer 1

我认为这很糟糕，因为当您只设置元素的innerHTML时，我已经看到各种浏览器会出现许多问题。

如果您尝试通过仅将元素的html标记放入某些控件innerHTML中来创建元素，则html DOM不会总是得到更新。 这可能导致您的值无法在表单提交时传递回，甚至无法使用javascript来引用元素。

相反，您应该让WebService仅返回需要的信息（只是商店名称）来返回JSON或XML数据，然后使用javascript动态创建选项并将其添加到下拉列表中。

这样的事情会很好地工作：

// 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
    }
}

而且，如果您不熟悉JSON，则可以使用上面的代码：

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

只需从WebService返回类似上面的字符串，就应该准备就绪。

Answer 2

您的服务器端方法似乎并未过滤该选项列表，因此，如果您仅显示选择列表，为什么不使用初始页面呈现它，而不是发出后续请求。

就性能而言，以JSON格式发送回数据的详细程度较小，因此千字节更少。 如果我们要说的是下拉列表中的50个项目，那么您几乎不会注意到使用JavaScript与在服务器上进行创建所产生的开销。

另外，某些版本的Internet Explorer中存在一个已知的错误，这意味着您需要替换整个选择而不是简单地更新选项-以防万一！