如何通过 AJAX 调用创建局部视图

Question

我正处于学习阶段，我想从 Ajax 调用创建部分视图。但是对于每次点击页面都会重定向到一个全新的页面。以下是我的尝试。

我从 Stack Overflow SO LINK 引用的链接

型号

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

家庭控制器：

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);
}

主视图位于主文件夹内

@{
    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”部分视图位于“共享”文件夹中

@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>

初始页面：

Ajax 调用之后

P.S：我已经包含了jquery插件。

但我在 ASP.Net MVC 中找不到 jquery.unobstrusice-ajax.js 5项目模板，所以我没有收录。

请指导我在这里做错了什么。

编辑 1

替换了@html.ActionLink with @Ajax.ActionLink，但它仍然是 被重定向到新页面。

Answer 1

试试这个：

将@html.ActionLink 替换为@Ajax.ActionLink

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

Answer 2

请记住。 AJAX 不能更改页面。

我个人避开了unobtrusive ajax framwork。我只是用了好的 oleAJAX 发生的事情是 ajax 实际上并没有工作，它实际上只是在做一个 html GET。

按下按钮时调用这样的函数。这就是我解决类似问题的方法。

这段代码可能不是直接剪切粘贴的，但已经很接近了。

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