动态地将控制器返回的选择框值呈现为json

Question

I'm seding ajax request which sends some id. Based on that id i'm querying data and return back to the view as json. Those data is used to populate selectbox inside view.

I have working example which receives list of strings which I use to populate select box, but I want together with those string and it's id values, so I can be able to render inside select box string and it's id. how can I do that.

This is what I use right now

public JsonResult GetKeywords(int id) 
{
    List<string> data = new List<string>();
    var dataKeywords = db.KeyWords.Where(x => x.id == id).ToList();            
    foreach (var item in dataKeywords)
    {
        data.Add(item.Title);                
        // how to pass id?
    }
    return Json(data);
}

on the view

 $(document).ready(function () {
    ...
    options.success = function (dataList) {
        $("#myKeywords").empty();
        for (var i = 0; i < dataList.length; i++) {
            $("#myKeywords").append("<option>" + dataList[i] + "</option>");
        }
        $("#myKeywords").prop("disabled", false);
    };
 });

Answer 1

You can return a collection of anonymous objects as json

var dataKeywords = db.KeyWords.Where(x => x.id == id).Select(x => new
{
  ID = x.id,
  Text = x.Title
};
return Json(dataKeywords); // JsonRequestBehavior.AllowGet?

and in the script

options.success = function(dataList) {
  $.each(dataList, function(index, item) {
    $("#myKeywords").append($('<option></option>').val(item.ID).text(item.Text));
  });
  ....