1

I am just beginning learning .NET MVC 4 framework and am having troubles with some basic CRUD operations yielding errors. I have a select element that upon change, sends an Ajax request to my server to find the Course given the id. Here is the ajax call:

 $('.courseSelect').change(function () {
                $.ajax({
                    url: "@Url.Action("Find", "Roster")",
                    data: {
                        courseId: $('.courseSelect').val()
                    },
                    dataType : 'json',
                    type: "GET",
                    success: function (data) {
                        console.log(data);
                    },
                    error: function (xhr, err, type) {
                        console.log(xhr);
                        console.log(err);
                        console.log(type);
                    }
                });
            });

This correctly send a request in the form of http://localhost:62020/Roster/Find?courseId=2

I then have a Find ActionRequest in my Roster controller:

        [HttpGet]
        public ActionResult Find(int? courseId)
        {
            StudentsViewModel selectedCourse = new StudentsViewModel();
            List<Course> courses = Db.Courses.Where(s => s.Id >= 0).ToList();
            foreach (Course c in courses)
            {
                selectedCourse.AllCourses.Add(c);
            }

            selectedCourse.currentCourse = Db.Courses.Find(courseId);

            selectedCourse.AllStudents = Db.Students.Where(s => s.Id >= 0).ToList();

            return View(selectedCourse);

        }

However, even though the controller logic seems correct when doing a run-time debug of each line, the Ajax fails with a 500 Internal Server Error.

Matt Hintzke
  • 6,737
  • 14
  • 47
  • 102
  • I think it has to do with the fact that I have an Index ActionResult in the same Controller that returns a View() with a table on it that shows all Students in a Course. But I am not sure to to handle it when we only want specific Students or Courses. – Matt Hintzke Feb 10 '14 at 21:11
  • The example you have shown here returns an ActionResult but your Ajax function expects Json. Instead of return View(selectedCourse) you should return Json(selectedCourse). That would be my first guess. – Mike C. Feb 10 '14 at 21:33
  • What if I want to just send back a partial HTML View like a table that displays the new data that is being requested? – Matt Hintzke Feb 10 '14 at 21:41
  • Then you would change your controller to return a string that contains your html and set your dataType to 'text' in the Ajax Call (you might want to double check the proper value, that was from memory). Then what you'll get back is a string and you can just display your string however you want (if say it's formatted HTML). – Mike C. Feb 10 '14 at 21:44
  • [I'd recommend using Chrome and inspecting the http request](http://stackoverflow.com/questions/1820927/request-monitoring-in-chrome). Or Firebug for Firefox, or Dev Tools in IE, or [Fiddler2](http://www.telerik.com/download/fiddler). – Erik Philips Feb 10 '14 at 21:50

1 Answers1

2

You can try to change:

ActionResult Find(int? courseId)
return View(selectedCourse);

To:

JsonResult  Find(int? courseId)
return Json(selectedCourse, JsonRequestBehavior.AllowGet);

Also, I would check the data response to make sure the framework is successful in parsing the JSON.

beautifulcoder
  • 9,006
  • 3
  • 16
  • 26
  • Thanks, that worked correct. However, in .NET MVC framework, is it more standardized to send a JSON object and have the client deal with placing the JSON data into the DOM, or is it better to return an HTML partial of a table with the data already in it? – Matt Hintzke Feb 10 '14 at 21:53
  • I highly recommend JSON. 1) It is lightweight. 2) HTML has a security risk associated with it since you are fully trusting that the server and any user input is fully sanitize. – beautifulcoder Feb 11 '14 at 15:10