代码改变世界

AjaxPro 返回 DataSet/DataTable/DataView 如何呈现?

2007-07-30 01:43  晓风残月  阅读(...)  评论(... 编辑 收藏
此示例展示通过 AjaxPro 返回一个 DataSet 并在页面上通过 html table 输出。

主要代码
// js
    <script type="text/javascript">
    
function GetProductData()
    
{
        
var cb = function(res) {
            
if(res.error) return alert("发生错误\n" + res.error.Message);
            
//debugger;
            //alert(res);
            var ds = res.value;
            
var tbl = ds.Tables[0]; 
            
var tblHtml = "<table border=1>";
            
            
// 表头
            tblHtml += "<tr>";
            
for(var j = 0; j < tbl.Columns.length; j++{
                tblHtml 
+= "<th>" + tbl.Columns[j].Name + "</th>";
            }

            tblHtml 
+= "</tr>";
            
            
// 数据
            for(var i = 0; i < tbl.Rows.length; i++{
                tblHtml 
+= "<tr>";
                
for(var j = 0; j < tbl.Columns.length; j++{
                    tblHtml 
+= "<td>" + tbl.Rows[i][tbl.Columns[j].Name] + "</td>";
                }

                tblHtml 
+= "</tr>";
            }

            tblHtml 
+= "</table>";
            
var divPro = document.getElementById("divPro");
            divPro.innerHTML 
= tblHtml;
        }

        AjaxProSample.GetProductSet(cb);        
    }

    
</script>

// .aspx.cs
[AjaxPro.AjaxNamespace("AjaxProSample")]
public partial class AjaxPro_ReturnDataSet : System.Web.UI.Page
{
    
protected void Page_Load(object sender, EventArgs e)
    
{
        AjaxPro.Utility.RegisterTypeForAjax(
typeof(AjaxPro_ReturnDataSet));
    }



    [AjaxPro.AjaxMethod]
    
public static DataSet GetProductSet()
    
{
        
return CreateSampleProductSet();
    }


    
sample data    
}



AjaxPro 支持直接返回 DataTable 和 DataView ,客户端读取方式同 DataSet

var tbl = res.value;  // 直接访问 DataTable

需要注意的是,返回 DataView,实际上是返回 DataView 关联的 DataTable 。

完整代码下载