pass list of string to javascript that is sent by asp code behind method

Question

I am trying to show online train in my page without any refresh.So i think i have to use javascript to do this .so i am so beginner in javascript .so let me explain my problem .

I have to execute this part of code using javascript:

  <%
            OnlineTrainList = TimeTableRepository.GetAll().ToList();
            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>");
                }
            }
             %>

This code every time is refreshed and get the online train positon and show that on the page ,but i have to do this with javascript.

So i create a .asmx file like this :

namespace ShirazRailWayWeb.Service
{

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
        public class SiteLocationService : System.Web.Services.WebService
    {
        public TimeTableRepository TimeTableRepository = new TimeTableRepository();
        public SensorRepository SensorRepository = new SensorRepository();
        public List<TimeTable> OnlineTrainList = new List<TimeTable>();
        public TrainRepository TrainRepository = new TrainRepository();
        [WebMethod]
        public string myfunc()
        {

        }
    }
}

my problem is how can i pass list of value to javascript .i should load my data in َُ**asmx** file and call this function in my page .But i don't know how can i pass a list of array online train list to my page .

Here is my repository that generate the data .but this data is a list and i don't know how can i pass this data to my page.!!

 public TimeTableRepository TimeTableRepository = new TimeTableRepository();
            public SensorRepository SensorRepository = new SensorRepository();
            public List<TimeTable> OnlineTrainList = new List<TimeTable>();
            public TrainRepository TrainRepository = new TrainRepository();

Any idea.

best regards

have a look at this first, might make your life easier: msdn.microsoft.com/en-us/library/vstudio/… — Banana
– Banana, Commented Jun 20, 2014 at 6:44
You mean i can use this panel can solve my problem like javascript ? — Ehsan Akbar
– Ehsan Akbar, Commented Jun 20, 2014 at 6:47
the update panel implements behind the scene javascript .ajax calls to partially render the page (update only part of the page without refreshing the whole page). so instead of you writing the whole thing using web services, you can use the update panel that has the implementation built in — Banana
– Banana, Commented Jun 20, 2014 at 6:49
So @Banana i put my code i mean that part that i need to be update every 1 second,but it doesn't work — Ehsan Akbar
– Ehsan Akbar, Commented Jun 20, 2014 at 7:04
yes, for that you need another piece of code, one moment ill post an answer with an example — Banana
– Banana, Commented Jun 20, 2014 at 7:05

Banana · Accepted Answer · 2014-06-20 07:16:48Z

1

Instead of implementing the whole thing, you can use the Asp.Net UpdatePanel to handle partial page rendering for you.

in order to have the content of your UpdatePanel updated every second as you requested, you need to use javascript to call the auto-rendered Asp.Net postback function with the update panel's id as an argument.

here is a full example of a serverside clock:

on your aspx page's html part add this block:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
    <ContentTemplate>
        <label id="Label_For_Server_Time" runat="server"></label>
    </ContentTemplate>
</asp:UpdatePanel>

here you can see a label that runs at server so we could access it from code behind;

on your aspx page's header, add this:

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

this is the piece of code responsible for updating the updatepanel every second, or rather 1000 milliseconds.
the function __doPostBack() is an asp.net generated function and by calling setInterval we are making the updatepanel post back every second.
the $(function (){}); wrapper here only meant to keep the code from executing before DOM fully loads. you tagged your question with jQuery, so i assume its fine with you.

in your code behind, you need to add the updatepanel's load handler, which runs when the panel posts back:

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    Label_For_Server_Time.InnerText = DateTime.Now.ToString();
}

answered Jun 20, 2014 at 7:16

Banana

7,4843 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Banana Over a year ago

note that in your case, instead of calling a response.write you can dynamically clear your update panel and add HtmlGenericControl in it per 'train', or add them only once and update their styling every postback

Ehsan Akbar Over a year ago

Thank you i am trying to implemenet your method,one question ,in this part <label id="Label_For_Server_Time" runat="server"></label> i should put my code ?

Banana Over a year ago

anything inside the <ContentTemplate> will be updated. the label is there just for the example. do not use Response.Write as it will just print over everything else, but instead create elements of type HtmlGenericControl myDiv1 = new HtmlGenericControl("div") and add them to UpdatePanel1.Controls.Add() and update their styling as follows: myDiv1.Style["margin-left"]=t.XTrainLocation-8

Banana Over a year ago

you can clean your panel every time by calling UpdatePanel1.Controls.Clear();

Ehsan Akbar Over a year ago

could you please take a liik :stackoverflow.com/questions/24324745/…

Collectives™ on Stack Overflow

pass list of string to javascript that is sent by asp code behind method

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related