How to consume data from API WCF service from different server and load data into combo-box

Question

I might have asked this question previously but am not getting it right. I have a drop-down control which i want to consume the data from WCF web service from different project/server. I wrote a small console app to consume data and it works fine. On my controller i have consume data from API and then pass it to my view and that works fine. however, that's not the requirements, i have to load all the combo-box using ajax call to make things easier.

here is my working code: I have hardcoded the Id and boolen type

Controller

    public ActionResult SearchReports()
    {

        string jsonReq = "http://localhost:50000/Administration.svc/GetAllRoles/17d7b719-7524-4297-a20d-6a6260966aad/true";
        string jsonResp = Portal.Models.JsonWrapper.JsonGET(jsonReq);
        List<Portal.Models.BProcSecurityStructs.Role> listRoles = Models.DeserialiseFromJson<List<Portal.Models.BProcSecurityStructs.Role>>.Deserialise(jsonResp);
        List<GetAllDropdownModel> RolesModelList = new List<GetAllDropdownModel>();
        foreach (BProcSecurityStructs.Role r in listRoles)
        {
            GetAllDropdownModel rm = new GetAllDropdownModel();           
            rm.roleID = r.roleID;
            rm.roleName = r.roleName;
            RolesModelList.Add(rm);
        }
        listRoles.Count();
        ViewBag.List = listRoles;
        return View(RolesModelList);
    }
    }

View

<div class="form-group" >
   <label for="ddlroles">Roles :</label>
   <select class="form-control" name="listbox" id="dllroles">
   @foreach (var item in Model)
   {
      <option value="@item.roleId">
      @item.roleName
      </option>

   }
   </select>
</div>

Ajax call that am trying to call WCF API

  Ajax call that am trying to make WCF API call

    var API_URL = 'http://localhost:50000/Administration.svc/';
    function LoadAdministrator()
    {  
    $.ajax({
    url: API_URL + 'GetAdministratorByID/{loggedID}/{roleId}',
    Type: 'Get',
    DataType: 'jason',
    crossDomain: true,
    sucess: function (data) {
        for (var i = 0; i < data.length; i++) {
            $("#ddlroles").append('<Option value= "' + dat[i].roleId + '">"' + data[i].roleName + '"</Option>').text("-- Select --")
        }
    }
});
}

Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin

I have tried this Code Project Example with no luck. Please help

Answer 1

If you want to load your data Ajax, Simply create new Action that return JsonResult

    [HttpGet]
    public JsonResult SearchReports()
    {

        string jsonReq = "http://localhost:50000/Administration.svc/GetAllRoles/17d7b719-7524-4297-a20d-6a6260966aad/true";
        string jsonResp = Portal.Models.JsonWrapper.JsonGET(jsonReq);
        List<Portal.Models.BProcSecurityStructs.Role> listRoles = Models.DeserialiseFromJson<List<Portal.Models.BProcSecurityStructs.Role>>.Deserialise(jsonResp);
        List<GetAllDropdownModel> RolesModelList = new List<GetAllDropdownModel>();
        foreach (BProcSecurityStructs.Role r in listRoles)
        {
            GetAllDropdownModel rm = new GetAllDropdownModel();
            rm.roleID = r.roleID;
            rm.roleName = r.roleName;
            RolesModelList.Add(rm);
        }

        return Json(yourList, JsonRequestBehavior.AllowGet);
    }

Then Invoke this Action Using Ajax

function LoadAdministrator()
{ 
   $.ajax({
        url: 'Controller/CancelApplication',
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
        $("#ddlroles").append('<Option value= "' + dat[i].roleId + '">"' + data[i].roleName + '"</Option>').text("-- Select --")
    }
        }
    });
}

That's it, I am always trying to find simplest solutions to my problem not hardest.