Producing dynamic HTML with Data-Binding

When we have many possible reports to show about data,

status-report

we may prefer to represent them using the same page so that the user can choose one of them from a dropdownlist.

    <h2>Reports</h2>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"
            UpdateMode="Conditional">
            <ContentTemplate>
                Report Name
<asp:DropDownList ID="rptChooser" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rptChooser_SelectedIndexChanged">
    <asp:ListItem Text="" Value="0" />
    <asp:ListItem Text="Report One" Value="1" />
    <asp:ListItem Text="Report Two" Value="2" />
    <asp:ListItem Text="Report Three" Value="3" />
</asp:DropDownList>
                <br />
                <br />
                <table border="1">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <asp:Label ID="labelTB1" runat="server"
                                        Text='<%# Eval("Name")%>' /></td>
                                <td>
                                    <asp:TextBox ID="txtTextBox1" runat="server"
                                        Text='<%# Eval ("InitVal") %>' /></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
                <br />
                <asp:Button
                    ID="RunReport" Text="Run Report" runat="server"
                    OnClick="RunReport_Click" OnClientClick="showEmpty()" Enabled="false" />
                <script>
                    function showEmpty() {
                        $('#<%= ShowReport.ClientID %>').val("running...");
                    }
                </script>
                <asp:TextBox ID="ShowReport" ReadOnly="true"
                    TextMode="MultiLine" Rows="5" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>

Notice the Eval from Data-Binding
Then we need to change the selection parameters for that specific report accordingly.

public class RptParameter
{
    public string Name { get; set; }
    public string InitVal { get; set; }
    public RptParameter(string name,string inval)
    {
        Name = name;
        InitVal = inval;
    }
}
 protected void rptChooser_SelectedIndexChanged(object sender, EventArgs e)
 {
     var dt = new List();
     int count = Convert.ToInt32(rptChooser.SelectedItem.Value)-1;
     Dictionary rptParams = new Dictionary();
     rptParams[0] = new RptParameter[2]
     {
         new RptParameter("my par 1","aa"),
         new RptParameter("my par 2","bb")
     };
     rptParams[1] = new RptParameter[1]
     {
         new RptParameter("the only par 1","xx")
     };
     rptParams[2] = new RptParameter[3]
     {
         new RptParameter("the only par 1","xx"),
         new RptParameter("my par 1","aa"),
         new RptParameter("my par 2","bb")
     };
     if (count >= 0 )
     {
         foreach (RptParameter rptParameter in rptParams[count])
         {
             dt.Add(rptParameter);
         }
     }
     this.Repeater1.DataSource = dt;
     this.Repeater1.DataBind();
     this.RunReport.Enabled = count >= 0;
 }

 
 protected async void RunReport_Click(object sender, EventArgs e)
 {
     await Task.Delay(2000);
     string parameters = "";
     foreach (var item in this.Repeater1.Items)
     {
         var par = (RepeaterItem)item;
         var labL = (Label)par.FindControl("labelTB1");
         var txtBox = (TextBox)par.FindControl("txtTextBox1");
         var parName = labL.Text;
         var parVal = txtBox.Text;
         parameters += parName+" = " + parVal + "\n";
     }
     this.ShowReport.Text = "report completed!\n" + parameters;
 }

Finally we wrap the partial html page inside an UpdatePanel, to boost performance and reduce network traffic, as already explained in my previous articles under the Web menu! Furthermore it enables also the nice UpdateProgress feature.

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel1" DisplayAfter="100">
            <ProgressTemplate>
                <div class="progress">
                    <img src="Content/transparent-blue-loading-image-gif-5.gif" /><%-- please wait...--%>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s