CODEWITHSUNDEEP
c#javascriptjqueryasp.net
Ehsan Akbar
Ehsan Akbar

Reputation: 7301

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

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

Upvotes: 0

Views: 471

Answers (1)

Banana
Banana

Reputation: 7463

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();
}

Upvotes: 1

Related Questions