Getting a TinyMCE dropdown image list in an MVC3 application - asp.net-mvc-3

Question

I am trying to get an MVC3 app to feed TinyMCE with an external image list javascript file. I have TinyMCE set up so that if I use a static image list file, I get the image list, so I know that part works. But since I need to dynamically create the image list per user, I need something more flexible than a static file. It is down to providing the javascript from the following controller action:
public JavaScriptResult TinyMCEImageList(int id)
{
ListHelper lh = new ListHelper();
string js = "var tinyMCEImageList = new Array(\r\n" + "// Name, URL\r\n";
Dictionary<string, string> dict = lh.GetPetImageURLs(id);
int i = dict.Count();
foreach (var item in dict)
{
js += "['" + item.Key + "', '" + item.Value + "']";
if (i > 1)
{
js += ",\r\n";
}
i--;
}
js += "\r\n);";
return JavaScript(js);
}
The ListHelper.GetPetImageURLs() returns a dictionary object, which is simply a convenient way to hold the caption and URL of each image. When I call this controller from the browser, with the appropriate id parameter, I get what I would think is a workable JS file. In fact, such results are what I used to create the static file I used to test the TinyMCE image list setup, and that got me an actual dropdown image list.
Here is my TinyMCE setup. This is inside the view containing a TinyMCE instance:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "lists,pagebreak,style,table,inlinepopups,advhr,advimage,preview,searchreplace,print,paste,visualchars,nonbreaking",
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor,image",
theme_advanced_buttons3: "tablecontrols,|,visualaid,|,sub,sup,|,advhr,|,preview,print,|,visualchars,nonbreaking,template,blockquote,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
external_image_list_url: "/InstructionDocument/TinyMCEImageList/#ViewBag.PetID"
});
The #ViewBag.PetID is being used elsewhere, so I know it is valid. Even if I hardcode this value, or specifically point to the controller action, I still do not get a dropdown list of images. I'm sure there's something simple I'm missing; can someone point out to me what it is (or at least give me some reasonable guidance)?
[EDIT]
The output from the TinyMCEImageList() action follows:
var tinyMCEImageList = new Array(
// Name, URL
['System Guinea Pig - 4', 'http://www.remindapet.com/Content/images/galler/1_4_970BB64F7C1A4375AF5722B8A62C8708.jpg'],
['System Guinea Pig - 5', 'http://www.remindapet.com/Content/images/gallery/1_4_CBA0D3DDBBED41C583A6E6C46FC9DADF.jpg']
);
Also, here are the headers for the above javascript return from the action:
Server ASP.NET Development Server/10.0.0.0
Date Fri, 23 Dec 2011 00:14:31 GMT
X-AspNet-Version 4.0.30319
X-AspNetMvc-Version 3.0
Cache-Control private
Content-Type application/x-javascript; charset=utf-8
Content-Length 292
Connection Close
So, the action really is returning a JavascriptResult. I just haven't been able to come up with how to get TinyMCE to see it.
Thanks!

Answer 1

Instead of rendering an javascriptresult, create a js file while you are rendering the page.
Controller
public ActionResult Index()
{
MakeJSFile();
return View();
}
MakeJSFile() function will create the jsfile we need, then the page will be rendered.
MakeJSFile() function
public void MakeJSFile()
{
#region declare
var imgPath = Server.MapPath("~/Content/images/gallery/");
var jsPath = Server.MapPath("~/Scripts/image_list.js");
List<string> fileList = populateList(imgPath, ".jpg");
#endregion
#region build jsfile
string content = "var tinyMCEImageList = new Array(";
foreach (var item in fileList)
{
content += "[\"" + item + "\", \"/Content/img/" + item + "\"]";
if (item != fileList.Last())
content += ",";
}
content += ");";
#endregion
#region create file
StreamWriter sw = new StreamWriter(jsPath, false);
sw.Write(content);
sw.Close();
#endregion
}
First declare the path for the directory where the images is, and also the path of the jsfile. Then create a list that contains the filenames and populate it(with populateList function).
Then create a string to build the jsfile.
After that create the file in you server.
You only need to do one more thing, create the populateList function.
PopulateList function
public List<string> populateList(string path, params string[] extensions)
{
List<string> list = new List<string>();
FileInfo fi = new FileInfo(path);
DirectoryInfo di = fi.Directory;
FileSystemInfo[] fsi = di.GetFiles();
foreach (FileSystemInfo info in fsi)
foreach (var ext in extensions)
if (info.Extension == ext)
list.Add(info.Name);
return list;
}
This function requires the path to the directory and file extensions.
If you want a specific list, just change this function.
One more thing, don't forget to change the value of external_image_list_url
tinyMCE.init({
...
external_image_list_url: "/Scripts/image_list.js"
});