Showing DataTable results into DropDown list using ajax

Description: Following Code retrieve all program details by calling store procedure. But here I want display Id and name field into the dropdown where Id is used as a value field of dropdown and name is the text field of the dropdown. Here in ajax I passed two arguments which are mandatory for Sp.

Action which is called through ajax:

  public JsonResult GetProgramme(string channelId, string date)



 {



GraphicsEntities db = new GraphicsEntities();



List<channel_master> channels;







DataTable dtProgrammes=bizGraphicsClipMap.GetAllProgrammes(channelId,date);



List<string> id=dtProgrammes.AsEnumerable().Select(x => x[4].ToString()).ToList();



List<string> names = dtProgrammes.AsEnumerable().Select(x => x[8].ToString()).ToList();











var result = (new { Id = id, Name = names });



return Json(result, JsonRequestBehavior.AllowGet);



 }










MCV4 View:





 @Html.DropDownList("Programme", new List<SelectListItem> { }, new { Id = "ddlProgramme" })



Ajax Call:





 $.ajax({



url: '@Url.Action("GetProgramme", "GraphicsClipMap")',



       data: JSON.stringify({ channelId: $('#ddlChannels option:selected').val(), date: $('#selectDate').val() }),



 dataType: 'json',



 type: 'POST',



contentType: "application/json",



async: false,



success: function (programmes) {



$("#ddlProgramme").empty();



$("#ddlProgramme").append("<option value=" + 0 + ">" + "--Select Programme--" + "</option>");



for (var j = 0; j < programmes.Id.length; j++) 


$("#ddlProgramme").append("<option value=" + programmes.Id[j] + ">" + programmes.Name[j] + "</option>");



 }







},



 Error: function () {


 alert("Unable to retrive programme..");


 }

 })