Passing data from asp.net MVC controller to the View via Ajax call

Question

Hello guys I have got some trouble with ajax that I try to understand what is going on. Well I have got this controller which is returning list of Guider Model, well here is my Controller:

[HttpGet]
        public JsonResult ShowGuiders(string latitude, string longitude)
        {
            double lat = DataTypeConvert.ConvertToDouble(latitude);
            double lon = DataTypeConvert.ConvertToDouble(longitude);
            GeoCoordinate geoCoordinateFrom = new GeoCoordinate(lat, lon);

            var nearbyGuiders = (from guider in db.Guiders.AsEnumerable()
                                 let distance = geoCoordinateFrom.GetDistanceTo(new GeoCoordinate(guider.Latitude.Value, guider.Longitude.Value))
                                 where distance <= 100000
                                 orderby distance ascending
                                 select guider).ToList();
            return Json(nearbyGuiders, JsonRequestBehavior.AllowGet);

        }

Here is my script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnGet").click(function () {
                var coordinate = {
                    "Latitude": $("#latitude").val(),
                    "Longitude": $("#longitude").val()
                };
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("ShowGuiders", "Guider")',
                    data: { latitude: coordinate.Latitude, longitude: coordinate.Longitude },
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        // Result
                        alert("Succes");
                    },
                    error: function (response) {
                        //do your own thing
                        alert("fail");
                    }
                });
            }); //end .submit()
        });
    </script>

Finally here is my Guider Model:

public class Guider
    {
        [Key]
        [ForeignKey("ApplicationUser")]
        public string GuiderID { get; set; }
        //code...
        public double? Latitude { get; set; }
        public double? Longitude { get; set; }
        public bool IsAccepted { get; set; }

        [ForeignKey("CancellationPolicy")]
        public int? CancellationPolicyID { get; set; }

        [ForeignKey("Premium")]
        public int? PremiumID { get; set; }

        public virtual Premium Premium { get; set; }
        public virtual CancellationPolicy CancellationPolicy { get; set; }
        public virtual ApplicationUser ApplicationUser { get; set; }

        public virtual ICollection<UnavailableDate> UnavailableDates { get; set; }

    }

Well the problem was that whenever I was trying to return List of Guider nothing was happening and event of error function of ajax was raising. So I tried to return just an Object of Guider and evrything was working perfectly. This controller is working perfetcly:

[HttpGet]
        public JsonResult ShowGuiders(string latitude, string longitude)
        {

            myGuider.Country = "Greece";
            return Json(myGuider, JsonRequestBehavior.AllowGet);

        }

So I figured out that Json does not suport my object hierarchy. So I solved my problem with anononymus objects. I modified the controller like this, and I return propperties that I need :

[HttpGet]
        public JsonResult ShowGuiders(string latitude, string longitude)
        {
            double lat = DataTypeConvert.ConvertToDouble(latitude);
            double lon = DataTypeConvert.ConvertToDouble(longitude);
            GeoCoordinate geoCoordinateFrom = new GeoCoordinate(lat, lon);

            var nearbyGuiders = (from guider in db.Guiders.AsEnumerable()
                                 let distance = geoCoordinateFrom.GetDistanceTo(new GeoCoordinate(guider.Latitude.Value, guider.Longitude.Value))
                                 where distance <= 100000
                                 orderby distance ascending
                                 select new { country = guider.Country } ).ToList();
            return Json(nearbyGuiders, JsonRequestBehavior.AllowGet);

        }

Answer 1

 $("#btnGet").click(function () { var coordinate = { "Latitude": $("#latitude").val(), "Longitude": $("#longitude").val() }; $.ajax({ type: 'GET', url: '@Url.Action("ShowGuiders", "Guider")', data: { latitude: coordinate.Latitude, longitude:coordinate.Longitude }, success: function (result) { // Result alert("Succes"); }, error: function (response) { //do your own thing alert("fail"); } });