在ASP.NET中使用C#创建家谱视图是一种展示数据关系的有效方式。传统的方法可能需要大量的HTML表格代码和复杂的按钮、标签以及图片布局。但本文将展示一种更简洁的方法，仅需20-25行代码即可实现。将使用Google组织图来创建树状视图，目标是从数据库中获取数据并按照父节点和位置（左和右）来展示数据。
首先，需要处理数据库部分。在这里，只关注名字和父节点编号。如果只有一个子节点，它将直接显示在父节点下面（既不在左边也不在右边），如果有两个孩子，他们将根据数据库中的位置分别显示在左边和右边。因此，在处理这些小但非常有效的细节时需要格外小心。
接下来，将讨论Google组织图。首先，来看它是如何工作的。这里，将展示生成树状视图的代码。更多信息，请访问。
<script>
google.charts.load('current', {'packages':['orgchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addRows([
['Mike', ''],
['Jim', 'Mike'],
['Alice', 'Mike'],
['Bob', 'Jim'],
['Carol', 'Jim']
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true});
}
</script>
上述代码与网站上的代码不完全相同。只取了帮助完成主要任务的部分。其他功能可以稍后添加。
所有这些代码都基于数据。例如，Mike、Jim、Alice、Bob等的数据。如果可以用来自数据库的值替换它，那么工作就完成了。首先，让从数据库中获取数据并形成一个字符串。
string s = "";
DataTable table = new DataTable();
table.Columns.Add("name", typeof(string));
table.Columns.Add("parent", typeof(string));
table.Rows.Add("Mike", "");
table.Rows.Add("Jim", "Mike");
table.Rows.Add("Alice", "Mike");
table.Rows.Add("Carol", "Jim");
for (int i = 0; i < table.Rows.Count; i++)
{
s = s + "['" + table.Rows[i][0].ToString() + "','" + table.Rows[i][1].ToString() + "'],";
}
s = s.TrimEnd(',', ' ');
只使用了一个DataTable并绑定了一些虚拟数据。需要将其与SQL绑定以从数据库中获取数据。现在字符串"s"已经准备好作为一组数据传递给Google组织图了。接下来，如何将这些数据添加到JavaScript函数中以调用或传递它。
String csname1 = "PopupScript";
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
StringBuilder cstext1 = new StringBuilder();
cstext1.Append("");
cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());
}