CODEWITHSUNDEEP
ajaxasp.net-mvc
CloudyKooper
CloudyKooper

Reputation: 717

How can I load my partial view using ajax call?

I’m trying to load a partial view with an ajax call. I’m trying to follow a solution I found here: Render partial view onclick in asp.net mvc 3 project

My script looks like this:

 $("#174").on("click", function () {

        $.ajax({
            type: "GET",
            url: "/TeacherStudent/StudentInformation",

            data: "174",
            datatype: "html",
            sucess: function (data) {
             $("#theTimes").html(result);

            }
        });
    });

My controller looks like this:

  public ActionResult StudentInformation(string data)
    {
        int id = Convert.ToInt32(data);


        var viewModel = new ScheduleData();

        var attend = from s in db.Assignments where s.teacherId == 7 && s.StudentId == 174 select s;
        var enroll = from s in db.Enrollments where s.InstructorId == 7 && s.StudentID == 174 select s;
        var stdParent = from s in db.Parents select s;

        viewModel.Assignments = attend;
        viewModel.Enrollments = enroll;
        viewModel.Parents = stdParent;
        return PartialView("~/Views/Shared/DisplayTemplates/StudentInformation.cshtml");
         }

     }

Somewhere in my view I have div tag:

 <div id="theTimes"></div>

I confirmed that the program calls the partial view but the view does not get displayed in the div tag. What could I be missing in the ajax call? Thanks for helping out!

Upvotes: 1

Views: 127

Answers (1)

Rowan Freeman
Rowan Freeman

Reputation: 16388

The problem looks like it's on this line.

sucess: function (data) {
    $("#theTimes").html(result);
}

result is undefined and 'sucess' isn't a valid callback.

Try this:

success: function (data) {
    $("#theTimes").html(data);
}

Also, change datatype to dataType (grammar) and change data: "174" to data: {"data": "174"}.

I.e.

$("#174").on("click", function () {
    $.ajax({
        type: "GET",
        url: "/TeacherStudent/StudentInformation",
        data: {"data": "174"},
        dataType: "html",
        success: function (data) {
         $("#theTimes").html(data);

        }
    });
});

Upvotes: 3

Related Questions