Question

I’ve been trying to figure out a way of presenting data dynamically but have been having no luck.
I have an alert system (which consists of a SQL Server DB table) and then I want that for each (relevant) row in that table, to construct a string to be presented in the ASP page, and also to insert a checkBox (just so I can mark the alert as “read”).

I already have the data and all (I think I’m doing it correctly) but have been completely unable to present this data on the page in the way I desire.

Here is the C# code:

protected void getAlertas(string matricula)
{
    string query = "SELECT * FROM ALERTAS A ";
    query += "WHERE EXISTS ( ";
    query += "SELECT ID, MATRICULA FROM VEICULOS V WHERE V.MATRICULA = @matricula ";
    query += "AND A.IDVEICULO = V.ID ";
    query += "AND LIDA = 0)";

    SqlCommand comm = new SqlCommand(query, Utils.connectDB());
    matricula = matricula.ToString().Replace("\"", "'");
    comm.Parameters.AddWithValue("@matricula", matricula);

    StringBuilder builder = new StringBuilder();
    DataTable dt = new DataTable();
    SqlDataAdapter da = new SqlDataAdapter();
    StringCollection alertValues = new StringCollection();

    StringBuilder HTML = new StringBuilder();

    try
    {
        comm.Connection.Open();
        SqlDataReader reader = comm.ExecuteReader();
        dt.Load(reader);

        foreach (DataRow row in dt.Rows)
        {
            Label label = new Label();
            CheckBox cBox = new CheckBox();

            foreach (DataColumn column in dt.Columns)
            {
                alertValues.Add(row[column].ToString());
            }

            builder.Append(alertValues[0]); //ID do alerta
            builder.Append(":");

            builder.Append(matricula);

            if (int.Parse(alertValues[10]) == 0) //se motor desligado
            {
                //string output =  "Motor desligado às " + alertValues[3] + "do dia " + alertValues[4];
                builder.Append("Motor desligado às ");

            }
            else if(int.Parse(alertValues[10]) == 1) //se motor ligado
            {
                //string output = "Motor ligado às " + alertValues[3] + "do dia " + alertValues[4];
                builder.Append("Motor ligado às ");
            }

            builder.Append(alertValues[3]); //hora
            builder.Append("do dia ");
            builder.Append(alertValues[4]); //data

            //HTML.Append(" <div id=\"notifications\" runat=\"server\" class=\"notifications\">");
            //HTML.Append(" <div class=\"notificationText\">");
            //HTML.Append("<asp:Label ID=\"Label1\" runat=\"server\" Text=\"" + builder.ToString() + "\"></asp:Label>");
            //HTML.Append("</div>");
            //HTML.Append("<div class=\"setRead\">");
            //HTML.Append("<asp:CheckBox ID=\"" + alertValues[0] + "\" runat=\"server\" />");
            //HTML.Append("</div>");
            //HTML.Append("</div>");


            label.Text = builder.ToString();
            cBox.ID = alertValues[0];
        }
    }
    finally
    {
        comm.Connection.Close();
    }
}

And here is the ASP page where I want to present the data:

<div id="contentRight">
        <div id="head">
            <p>
                <b>Notificações</b></p>
        </div>
        <div id="notifications" runat="server" class="notifications">
            <div class="notificationText">
                <asp:Label ID="Label1" runat="server" Text="Nada para mostrar"></asp:Label>
            </div>
            <div class="setRead">
                <asp:CheckBox ID="AlertIDRead" runat="server" />
            </div>
        </div>
        <hr />
        <div id="OkBtn" align="center">
            <asp:Button ID="OkButton" class="Button" runat="server" Text="Ok" />
        </div>
    </div>

The objective is to be able to present the constructed string to the page, and for each of these lines, also provide a CheckBox which will have the same ID as the alertID (on the DB) just for the sake of simplicity of marking them as read.

I’m really lost here, and could use some help.

Answer 1

You could add the items dynamically. However, this is a bit of a pain. You have to add them each time, not just the first time the page loads. Also, you need to add them early in the page lifecycle (e.g. in the Page_Init event) if you want the viewstate to be preserved between postbacks and to remember which boxes were checked.

A simpler approach would be to use a control such as the ListView. In ASP.NET 4.0 you can easily get the control names exactly as you want them, but you’ll probably be OK with the auto-generated control names in ASP.NET 3.5. Here’s an example of what the ASPX page might look like:

<asp:ListView runat="server" ID="listView" DataKeyNames="AlertId">
    <LayoutTemplate>
        <div id="contentRight">
            <div id="head">
                <p>
                    <b>Notificações</b></p>
            </div>
            <div id="notifications" runat="server" class="notifications">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </div>
        </div>      
    </LayoutTemplate>
    <ItemTemplate>
        <div class="notificationText">
            <asp:Label ID="Label1" runat="server" Text='<%#Eval("AlertText")%>' />
        </div>
        <div class="setRead">
            <asp:CheckBox ID="AlertChecked" runat="server" />
        </div>
    </ItemTemplate>
</asp:ListView>
<hr />
<div id="OkBtn" align="center">
    <asp:Button ID="OkButton" class="Button" runat="server" Text="Ok" onclick="OkButton_Click" />
</div>
<asp:Label runat="server" ID="lblDisplay" />

And here’s some sample code-behind. Note that I’ve replaced the data access code with a hard-coded list. I assume you’re comfortable replacing this with the code required to load the data from your database.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Creates a list of alerts and binds them to the list view.
            // You would use your sql data reader here instead.  You could convert the data
            // into a list or just bind the data reader directly to the list view.  If you
            // bind the data reader to the list view then be sure to update the Eval statements
            // in the list view templates.
            var alerts = new[]
            {
                new { AlertId = 1, AlertText = "This is alert #1."},
                new { AlertId = 2, AlertText = "This is the second alert."},
                new { AlertId = 3, AlertText = "This is the third alert."},
                new { AlertId = 5, AlertText = "This is alert #5."}
            };
            listView.DataSource = alerts;
            listView.DataBind();
        }
    }

    protected void OkButton_Click(object sender, EventArgs e)
    {
        // get the list of alerts that have been checked
        var checkedAlerts = new List<int>();
        foreach (var listViewItem in listView.Items)
        {
            var checkbox = (CheckBox)listViewItem.FindControl("AlertChecked");
            if (checkbox.Checked)
            {
                checkedAlerts.Add((int)listView.DataKeys[listViewItem.DataItemIndex].Value);
            }
        }
        // now do something to record them as read; we'll just display them in a label for this sample.
        lblDisplay.Text = "The following alerts were marked read: " + String.Join(",", checkedAlerts);
    }