本章節是此次.Net圖表開發工具JDash.Net教程的最后一章，我們講解如何為DisplayDashboard.aspx添加設計功能。

步驟一

打開DisplayDashboard.aspx文件，添加一個更新面板和Repeater。 Repeater將會被用于將dashlet模版列表，用戶點擊dashlet模版可以將它添加到dashboard中。

請注意：DashboardView的UserDesignMode屬性已變更。

代碼：

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<jdash:ResourceManager ID="ResourceManager1" runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Repeater runat="server" id="modulesList" OnItemCommand="modulesList_ItemCommand">
<ItemTemplate>
<asp:LinkButton runat="server" Text='<%# Eval("title") %>' CommandArgument='<%# Eval("id") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
<jdash:DashboardView ID="myDashboard" UserDesignMode="full" runat="server" />
</div>
</form>

步驟二

在頁面加載處理程序中，使用查詢字符串參數得到DashboardView組件加載dashboard的ID，dashlet模版已經與repeater綁定。

代碼：

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack && !string.IsNullOrEmpty(Request.QueryString["id"]))
{
myDashboard.DashboardId = Request.QueryString["id"];
myDashboard.DataBind();
modulesList.DataSource = JDashManager.Provider.SearchDashletModules().data;
modulesList.DataBind();
}
}

步驟三

最后一步是創建一個dashlet，代碼如下：

protected void modulesList_ItemCommand(object source, RepeaterCommandEventArgs e)
{
var moduleId = e.CommandArgument.ToString();
var module = JDashManager.Provider.GetDashletModule(moduleId);
var newDashlet = new DashletModel(module);
myDashboard.CreateDashlet(newDashlet);
}

操作完成之后，JDash.Net框架會自動管理，你可以很方便創建你想要的dashlets。

下載JDash.Net：>>點擊這里<<

所有教程一覽：

• .Net圖表開發工具JDash.Net使用教程：添加組件
• .Net圖表開發工具JDash.Net使用教程：設置SQL Server Providers
• .Net圖表開發工具JDash.Net使用教程：創建Dashlet
• .Net圖表開發工具JDash.Net使用教程：創建dashboard
• .Net圖表開發工具JDash.Net使用教程：展現及設計Dashboard