Comment convertir une liste C # <string []> en un tableau Javascript?
J'ai un datatable que je convertis en liste, le sérialisant et le passant à ma vue en utilisant un modèle de vue.
Mon viewmodel ressemble à ceci:
public class AddressModel
{
public string Addresses { get; set; }
}
Mon action de contrôleur ressemble à ce qui suit:
AddressModel lAddressGeocodeModel = new AddressGeocodeModel();
List<string[]> lAddresses = new List<string[]>();
string lSQL = " select Address1, CityName, StateCode, ZipCode " +
" from AddressTable ";
// Convert the data to a List to be serialized into a Javascript array.
//{
...data retrieval code goes here...
//}
foreach (DataRow row in AddressTable.Rows)
{
string[] lAddress = new string[5];
lAddress[1] = row["Address1"].ToString();
lAddress[2] = row["CityName"].ToString();
lAddress[3] = row["StateCode"].ToString();
lAddress[4] = row["ZipCode"].ToString();
lAddresses.Add(lAddress);
}
lAddressGeocodeModel.UnitCount = lAddresses.Count().ToString();
// Here I'm using the Newtonsoft JSON library to serialize my List
lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(lAddresses);
return View(lAddressModel);
Ensuite, à mon avis, j'obtiens la chaîne d'adresses suivante:
[["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]]
Comment suis-je censé obtenir cette chaîne sérialisée résidant dans un modèle de rasoir dans un tableau javascript?
Vous pouvez directement injecter les valeurs dans JavaScript:
//View.cshtml
<script type="text/javascript">
var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)');
</script>
Voir JSON.parse , Html.Raw
Sinon, vous pouvez obtenir les valeurs via Ajax:
public ActionResult GetValues()
{
// logic
// Edit you don't need to serialize it just return the object
return Json(new { Addresses: lAddressGeocodeModel });
}
<script type="text/javascript">
$(function() {
$.ajax({
type: 'POST',
url: '@Url.Action("GetValues")',
success: function(result) {
// do something with result
}
});
});
</script>
Voir jQuery.ajax
Beaucoup de chemin à Json Parse mais j'ai trouvé le moyen le plus efficace de
@model List<string[]>
<script>
function DataParse() {
var model = '@Html.Raw(Json.Encode(Model))';
var data = JSON.parse(model);
for (i = 0; i < data.length; i++) {
......
}
</script>
Beaucoup de ces réponses fonctionnent, mais j'ai trouvé que le moyen le plus simple était de loin d'envoyer des données via ViewData ou ViewBag et de laisser JSON.Net les sérialiser.
J'utilise cette technique lorsque Javascript est nécessaire pour la génération HTML avant le chargement de la page ou lorsque AJAX surcharge doit être évitée:
Dans le contrôleur:
public ActionResult MyController()
{
var addresses = myAddressesGetter();
ViewData["addresses"] = addresses ;
return View();
}
Dans la vue:
@section scripts {
<script type="text/javascript">
var MyjavascriptAddresses: @Html.Raw(JsonConvert.SerializeObject(ViewData["addresses"])),
</script>
}
Vous pouvez toujours compter sur JSON.NET alors que certains navigateurs ne prennent pas en charge la désérialisation JSON. Un autre avantage par rapport à certaines méthodes est que vous pouvez voir le Javascript en utilisant le navigateur View --> Source, car il s’agit simplement de texte généré côté serveur.
Notez que dans la plupart des situations, les API Web constituent un moyen plus élégant d’obtenir JSON sur le client.
Cela a fonctionné pour moi dans ASP.NET Core MVC.
<script type="text/javascript">
var ar = @Html.Raw(Json.Serialize(Model.Addresses));
</script>
Pour ceux qui essaient de le faire sans utiliser JSON, voici comment je l’ai fait:
<script>
var originalLabels = [ '@Html.Raw(string.Join("', '", Model.labels))'];
</script>
Je dirais que c'est davantage un problème de modélisation de vos données. Au lieu d'utiliser des tableaux de chaînes pour les adresses, il serait beaucoup plus propre et plus facile de faire quelque chose comme ceci:
Créez une classe pour représenter vos adresses, comme ceci:
public class Address
{
public string Address1 { get; set; }
public string CityName { get; set; }
public string StateCode { get; set; }
public string ZipCode { get; set; }
}
Ensuite, dans votre modèle de vue, vous pouvez renseigner ces adresses comme suit:
public class ViewModel
{
public IList<Address> Addresses = new List<Address>();
public void PopulateAddresses()
{
foreach(DataRow row in AddressTable.Rows)
{
Address address = new Address
{
Address1 = row["Address1"].ToString(),
CityName = row["CityName"].ToString(),
StateCode = row["StateCode"].ToString(),
ZipCode = row["ZipCode"].ToString()
};
Addresses.Add(address);
}
lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(Addresses);
}
}
Ce qui vous donnera un JSON qui ressemble à ceci:
[{"Address1" : "123 Easy Street", "CityName": "New York", "StateCode": "NY", "ZipCode": "12345"}]
Voici comment vous accomplissez cela:
//View.cshtml
<script type="text/javascript">
var arrayOfArrays = JSON.parse('@Html.Raw(Json.Encode(Model.Addresses))');
</script>
JSON est quand même un objet JavaScript valide, même si vous imprimez du JavaScript lui-même, vous n'avez pas besoin d'encoder/décoder JSON une fois converti au format JSON.
<script type="text/javascript">
var addresses = @Html.Raw(Model.Addresses);
</script>
La suite sera imprimée et il s'agit d'une expression JavaScript valide.
<script type="text/javascript">
var addresses = [["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]];
</script>
Pour un tableau de dimension
Manette:
using Newtonsoft.Json;
var listOfIds = _dbContext.Countries.Where(x => x.Id == Country.USA).First().Cities.Where(x => x.IsCoveredByCompany).Select(x => x.Id).ToList();
string strArrayForJS = JsonConvert.SerializeObject(listOfIds); // [1,2,6,7,8,18,25,61,129]
//Now pass it to the view through the model or ViewBag
Vue:
<script>
$(function () {
var myArray = @Model.strArrayForJS;
console.log(myArray); // [1, 2, 6, 7, 8, 18, 25, 61, 129]
console.log(typeof (myArray)); //object
});
</script>