Update panel doesn't work in asp.net

Question

I am trying to show online train in my page without any refresh. So I think I have to use updatepanel. My panel should be updated every second.

Let explain my code.

I put this part of code in my page:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
    <ContentTemplate>
    </ContentTemplate>
</asp:UpdatePanel>

So I put an interval function to refresh my panel like this,

<script type="text/javascript">
    $(function () {
        setInterval("__doPostBack('<%=UpdatePanel1.ClientID%>', '');", 1000);
    });

In my code behind I put all fetched data,

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    foreach (var t in OnlineTrainList)
    {
        Response.Write("<div id='train-box' style='margin-left:" + (t.XTrainLocation - 8) + "px;margin-top:" + t.YTrainLocation + "px;background:" + t.Train.TrainColor + "'>" +
                           "<span>" +
                                t.TrainId +
                           "</span>" +
                       "</div>");
        List<Sensor> PassedSensor = new List<Sensor>();
        PassedSensor = SensorRepository.FindBy(i => i.CurrentTrainId == t.TrainId).ToList();
        string color = TrainRepository.FindBy(i => i.Id == t.TrainId).First().TrainColor;
        foreach (Sensor sensor in PassedSensor)
        {
            Response.Write("<div class='CurrentColor-Sensor' style='margin-left:" + (sensor.XLocation - 1) + "px;margin-top:" + (sensor.YLocation + 8) + "px;background:" + color + "'></div>");
        }
    }
}

So my problem is the panel doesn't refresh .And my panel UpdatePanel1_Load just call one time.

Answer 1

So your code is:

foreach (var t in OnlineTrainList)
{
    Response.Write("<div id='train-box' style='margin-left:" + (t.XTrainLocation - 8) + "px;margin-top:" + t.YTrainLocation + "px;background:" + t.Train.TrainColor + "'>" +
                       "<span>" +
                            t.TrainId +
                       "</span>" +
                   "</div>");
    List<Sensor> PassedSensor = new List<Sensor>();
    PassedSensor = SensorRepository.FindBy(i => i.CurrentTrainId == t.TrainId).ToList();
    string color = TrainRepository.FindBy(i => i.Id == t.TrainId).First().TrainColor;
    foreach (Sensor sensor in PassedSensor)
    {
        Response.Write("<div class='CurrentColor-Sensor' style='margin-left:" + (sensor.XLocation - 1) + "px;margin-top:" + (sensor.YLocation + 8) + "px;background:" + color + "'></div>");
    }
}

first thing i must bring your attention to the id that you assign to all those divs, it must be unique and never the same. you could use an increment variable and append it to your div's id eg: div0, div1... etc

now lets have a look at the first row inside the loop. what it basically has, is a <span> nested inside a <div> and containing some attributes with text.

the Asp.Net way of handling elements would be object oriented instead of just html string:

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    //clear the update panel
    UpdatePanel1.ContentTemplateContainer.Controls.Clear();
    //var to generate unique div id's 
    int divIDIncrement = 0;
    foreach (var t in OnlineTrainList)
    {
        //increment the id generator 
        divIDIncrement++;
        // create a a DIV element
        HtmlGenericControl _tempDIV = new HtmlGenericControl("div");
        //set the attributes for the div
        _tempDIV.ID = "train-box" + divIDIncrement.ToString();
        _tempDIV.Style["margin-left"] = (t.XTrainLocation - 8).ToString() + "px";
        _tempDIV.Style["margin-top"] = t.YTrainLocation.ToString() + "px";
        _tempDIV.Style["background"] = t.Train.TrainColor.ToString();
        //create the inner span
        HtmlGenericControl _tempSPAN = new HtmlGenericControl("span");
        //set the span's innerText
        _tempSPAN.InnerText = t.TrainId.ToString();
        //add the span into the Div
        _tempDIV.Controls.Add(_tempSPAN);
        //add the Div into your UpdatePanel
        UpdatePanel1.ContentTemplateContainer.Controls.Add(_tempDIV);


        List<Sensor> PassedSensor = new List<Sensor>();
        PassedSensor = SensorRepository.FindBy(i => i.CurrentTrainId == t.TrainId).ToList();
        string color = TrainRepository.FindBy(i => i.Id == t.TrainId).First().TrainColor;
        foreach (Sensor sensor in PassedSensor)
        {
            // create another div for the sub stuff
            HtmlGenericControl _tempSubDIV = new HtmlGenericControl("div");
            _tempSubDIV.Attributes["class"] = "CurrentColor-Sensor";
            _tempSubDIV.Style["margin-left"] = (sensor.XLocation - 1).ToString() + "px";
            _tempSubDIV.Style["margin-top"] = (sensor.YLocation + 8).ToString() + "px";
            _tempSubDIV.Style["background"] = color.ToString();
            //add the sub stuff to the update panel
            UpdatePanel1.ContentTemplateContainer.Controls.Add(_tempSubDIV);
        }
    } 
}