Asp net core MVC：在javascript中将字符串列表作为参数传递

Question

我正在使用 google api 来显示地图。在我的控制器中，我编写了以下 c# 代码：

var sedi = new List<string>();
sedi.Add("Via Gavinana, 19, Roma");
sedi.Add("Val de Seine, 94600 Choisy le Roi");
sedi.Add("Street 21,Shuwaikh, Kuwait");
ViewBag.sediList = sedi;
return View(ViewBag.sediList);

在我看来：

@{
    var vb  = (List<string>)ViewBag.sediList;
}
function GetLatLon (address, callback) {
    console.log(address);
    var location = new Array();
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == 'OK') {
            location = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
            callback(location);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

function addMarker (location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
}

function initMap() {
    GetLatLon("@vb", function(location) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: location
        });
        for (var i = 0; i < 3; i++) {
           addMarker(location, map);
        }
    });
  }

我想在地图上显示三个标记，对应于列表中写入的位置vb 但是地址有System.Collections.Generic.List1[System.String] 值而不是地址的实际值。 如何将列表作为参数传递给 Javascript 中的 GetLatLon 函数？我该如何解决？

编辑

我需要在地图上显示三个标记，foreach 地址。 我写：

function GetLatLonByAddress (address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == 'OK') {
            location = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
            return location;
            console.log (location);
        } 
        return;
    });
}

function initMap() {
    GetLatLon('@(new Microsoft.AspNetCore.Html.HtmlString(Newtonsoft.Json.JsonConvert.SerializeObject(Model‌​.Maps)))', function(location) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: location
        });
        for (var i = 0; i < 3; i++) {
           addMarker('@(new Microsoft.AspNetCore.Html.HtmlString(Newtonsoft.Json.JsonConvert.SerializeObject(Model‌​.Maps)))', map, i);
        }
    });
  }

function addMarker (location, map, count) {
    var locationArr = JSON.parse(location);
    var marker = new google.maps.Marker({
        position: GetLatLonByAddress(locationArr[count]),
        map: map
    });
}

有可能是这样的吗？我该如何解决？

Answer 1

所以你可以创建：

型号

public class MapsModel
{
    public MapsModel(string[] maps)
    {
        Maps = maps;
    }

    public string[] Maps { get; private set; }
}

控制器

public class MapsController : Controller
{
   // GET: MapsModel
   public ActionResult Index()
   {
        var model = new MapsModel(
                new[]
                {
                    "Via Gavinana, 19, Roma",
                    "Val de Seine, 94600 Choisy le Roi",
                    "Street 21,Shuwaikh, Kuwait"
                } 
            );

      return View(model);
   }
}

查看

@model WebApplication1.Models.MapsModel

...

function initMap() {
   GetLatLon('@Html.Raw(Json.Encode(Model.Maps))', function (location) {

...

在这种情况下，您不需要 ViewBag。

Answer 2

您没有遵循最佳方法，但您可以使用此快速解决方案。

控制器：=>

var sedi = new List<string>();
sedi.Add("Via Gavinana, 19, Roma");
sedi.Add("Val de Seine, 94600 Choisy le Roi");
sedi.Add("Street 21,Shuwaikh, Kuwait");
ViewBag.sediList = Json.Encode(sedi);

// No need to pass the viewbag in View param
return View();

查看：=>

 var vb = @ViewBag.sediList;
 for(var i=0;i<vb.length;i++){
  GetLatLon (vb[i],function(){});
 }

 function GetLatLon (address, callback) {
    console.log(address);
    var location = new Array();
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == 'OK') {
            location = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
            callback(location);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

function addMarker (location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
}

function initMap() {
    GetLatLon("@vb", function(location) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: location
        });
        for (var i = 0; i < 3; i++) {
           addMarker(location, map);
        }
    });
  }

Answer 3

你必须像这样使用它： 在您的控制器中：

var sedi = new List<string>();
sedi.Add("Via Gavinana, 19, Roma");
sedi.Add("Val de Seine, 94600 Choisy le Roi");
sedi.Add("Street 21,Shuwaikh, Kuwait");
var sediString = JsonConvert.SerializeObject(sedi);
ViewBag.sediList = sediString;
return View();

在您的视图中隐藏以在 java 脚本中使用它：

<input type="hidden" id="sediString" name="sediString" value="@ViewBag.sediList">

并在您的 java 脚本中像这样使用它：

var data = JSON.parse($("#sediString").val());

你可以将你的数据放在数组中，并在每个函数中使用它：

$.each(data, function (i, item) {
//enter your code
}

编辑1： 对于 javascript 不是 jquery 使用：

var data = JSON.parse(document.getElementById(sediString).val());

而不是

var data = JSON.parse($("#sediString").val());

并使用 normal 代替 $.each

for (var i = 0; i < data.length; i++) {
       addMarker(data[i], map);
    }

编辑2：

您不需要隐藏输入来访问 java 脚本中的视图包。 你可以在javascript中使用它：

var data = JSON.parse(@ViewBag.sediList);