passing a list to javascript in mvc - asp.net-mvc

Question

I have a list of image urls that I am trying to display. I am passing the list from the controller to the view. I know that the list is being created successfully. But when it gets to the view, javascript interprets it as "*System.Collections.Generic.List1[System.String]*`" not as the actual list. This causes the images not to be displayed.
Here is the line of code that I am using to assign the list to js variable:
var imageUrls = '#Model.PicUrls';
and the controller
public ActionResult Index()
{
var pics = _ctx.Image.Select(m => m).Take(10).ToList<ImageModel>();
var picUrls = new List<string>();
for (int i = 0; i <= pics.Count - 1; i++)
{
picUrls.Add(pics[i].ImageUrl);
}
var outModel = new ViewPostViewModel
{
PicUrls = picUrls
};
return View(outModel);
I tried to return a Json object but then the page literally only displayed was the completed list.
return Json(outModel.PicUrls, JsonRequestBehavior.AllowGet);
So, the Json advice worked somewhat but it is not quite there

Answer 1

try it
public ActionResult Index()
{
var pics = _ctx.Image.Select(m => m.ImageUrl)
.Take(10).ToList();
var picUrls = new List();
for (int i = 0; i <= pics.Count - 1; i++)
{
picUrls.Add(pics[i]);
}
var outModel = new ViewPostViewModel
{
PicUrls = picUrls
};
return Json(outModel.PicUrls, JsonRequestBehavior.AllowGet);
}

Answer 2

Getting
System.Collections.Generic.List`1[System.String]
because you're model value PicUrls default ToString() implementation is to return its type.
You could store PicUrls as a JSON string, then parse to javascript array in your js.
public ActionResult Index()
{
var pics = _ctx.Image.Select(m => m).Take(10).ToList();
var picUrls = String.Empty;
for (int i = 0; i <= pics.Count - 1; i++)
{
picUrls += (picUrls != String.Empty ? ", " : "") + #"""" + pics[i].ImageUrl + #"""";
}
var outModel = new ViewPostViewModel
{
PicUrls = #"[" + picUrls + "]";
};
return View(outModel);
In your js, use
var imageUrls = JSON.parse('#Model.PicUrls');