來自客戶端還是服務器的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中存在一個已知的錯誤，這意味着您需要替換整個選擇而不是簡單地更新選項-以防萬一！