How to create partial view via AJAX call

Question

I am in learning phase and I want to create partial view from Ajax call . But for every click the page gets redirected to a altogether New Page . Below is my attempt.

Link I referred from Stack Overflow SO LINK

Model

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Home Controller:

public ActionResult PartialViewContainer()
{
    return View();
}

public PartialViewResult All()
{
    var students = _context.Students.ToList();
    return PartialView("_Student", students);
}

public PartialViewResult Top3()
{
    var students = _context.Students.OrderByDescending(s => s.Age).Take(3);
    return PartialView("_Student", students);
}

public PartialViewResult Bottom3()
{
    var students = _context.Students.OrderBy(s => s.Age).Take(3);
    return PartialView("_Student", students);
}

Main View located inside Home Folder

@{
    ViewBag.Title = "PartialViewContainer";
}
<div style="font-family: Arial">
            <h2>Students</h2>

            @Html.ActionLink("All", "All", new AjaxOptions   {
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
            <span style="color:Blue">|</span>
            @Html.ActionLink("Top3", "Top3", new AjaxOptions{
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
            <span style="color:Blue">|</span>
            @Html.ActionLink("Bottom", "Bottom3", new AjaxOptions{
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
  <div id="divStudents"></div>
</div>

"_Student" Partial view located inside "Shared" folder

@model IEnumerable<WebApplication3.Models.Student>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" style="border: 1px solid black; background-color: silver">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
    </tr>
}
</table>

Initial page:

After Ajax Call

PS: I have included jquery plug in.

But I could not find jquery.unobstrusice-ajax.js in my ASP.Net MVC 5 project template, so I have not included it.

Please guide me what am I doing wrong here.

EDIT 1

Replaced @html.ActionLink with @Ajax.ActionLink , but still it's getting redirected to a new page.

Answer 1

try this:

Replace @html.ActionLink with @Ajax.ActionLink

 @Ajax.ActionLink("All", "All", new AjaxOptions   {
        HttpMethod = "GET",
        UpdateTargetId = "divStudents",
        InsertionMode = InsertionMode.Replace
    })

Answer 2

Keep in mind. AJAX CANNOT change the page.

I personally steered away from the unobtrusive ajax framwork . I just used good ole AJAX What is happening is that ajax is not actually working and it is actually just doing an html GET .

Invoke a function like this when you press a button. This is how I solved the similar problem that I had.

This code may not be a direct cut and paste, but it is pretty close.

function CallAjax(actionPath) {
    $.ajax({
        url: actionPath,
        type: 'POST',
        success: function (partialView) {
            $("#sampleContainer").html(partialView);
        },
        error: function () {
            alert('error');
        }
    });
}