lundi 13 juin 2016

ASP.Net MVC store javascript variables in html.raw(html.action())

Im trying to make a custom marker infoBox for the google maps API. For this box i want to use a partial view.

The content of the infobox is stored as an HTML string, E.G: " < p> Hello < /p> "

I've figured out how to get the raw html string from the partial view by using the following:

var content= '@Html.Raw(Html.Action("_statusOptions", "Maps", new { sectorNr = 1, trackNr = 2 }).ToString().Replace("rn", ""))';

But as you can see, the sectorNr and trackNr are always 1 and 2 right now.

this code is within a loop, and every loop i has a different sectorNr and trackNr that are stored in javascript variables.

So my question is: how can i use those javascript stored variables in my @Html.Action()?

Full code:

 var locations= [];
@foreach(Track track in Model.TrackList)
{
    foreach(Sector sector in track.SectorList)
    {
        @:locations.push({ "trackId": "@track.Number", "sectorNr": "@sector.SectorNumber", "GeoLong": "@sector.Longitude", "GeoLat": "@sector.Latitude", "sectorStatus": "@Sector.GetStatusString(sector.Status)", "tramNr": "@sector.GetTramNumber()" })
    }
}

for (i = 0; i < locations.length; i++) {

    var sectorID = locations[i].sectorNr;
    var trackID = locations[i].trackId;

    var lat = locations[i].GeoLat;
    var long = locations[i].GeoLong;

    var sectorStatus = locations[i].sectorStatus;
    var tramNr = locations[i].tramNr;
    latlngset = new google.maps.LatLng(lat, long);
    var theIcon = getMarkerIcon(sectorID, sectorStatus);

    var marker = new google.maps.Marker({
            map: map,
            title: sectorID,
            position: latlngset,
            icon: {
                anchor: new google.maps.Point(10, 10),
                url: theIcon
            }
        });          

        var content= '@Html.Raw(Html.Action("_statusOptions", "Maps", new { sectorNr = 1, trackNr = 2 }).ToString().Replace("rn", ""))';

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
            return function () {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));

    }

Aucun commentaire:

Enregistrer un commentaire