ASP.NET Ajax从客户端或服务器渲染Html？

问题描述：

我在我的asp.net webform上使用了一个html <select>（不是服务器控件），我通过web服务调用使用asp.net ajax绑定。在我的web服务我基本上做到这一点：ASP.NET Ajax从客户端或服务器渲染Html？

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，那么我认为需要更长的时间，具体取决于行。

另请注意，当页面加载时，我只做一次。

您对此有何看法？这不好吗？如果是，为什么？

答

我认为这很糟糕，因为我看到很多来自各种浏览器的问题都出现在您设置元素的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 
    } 
}

如果你不familar与JSON，这与上面的代码使用的格式：

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

只返回一个字符串就像上面的WebService一样，你应该全部设置好。

感谢您的信息。现在，因为我只在PageLoad上这样做，我应该考虑使用asp：dropdownlist控件并直接从服务器绑定它？ – vikasde 2009-10-01 15:32:31

@ TJMonk15：关于“我看过很多问题......”的喧哗声是模糊不清的。每种方法都有问题，包括你自己的答案（你很好地评论道）。我肯定会对一些支持这些问题的链接感到满意。如http://*.com/questions/1066443/ie-innerhtml-error或http://*.com/questions/155426/why-does-ie-give-unexpected-errors-when-setting-innerhtml – 2009-10-01 15:43:04

但是，对于记录，OP的具体示例在任何当前浏览器中都有** no **问题。 – 2009-10-01 15:43:34

答

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

就性能而言，以JSON格式发回数据不那么冗长，所以减少了千字节。如果我们在下拉列表中讨论50个项目，那么您几乎不会注意到使用JavaScript创建此项与在服务器上创建此项的开销。

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

ASP.NET Ajax从客户端或服务器渲染Html？

相关推荐