关于javascript：如何通过AJAX调用创建局部视图

How to create partial view via AJAX call

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

链接我从Stack Overflow SO LINK引用

模型

1
2
3
4
5
6

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

家庭控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

位于主文件夹内的主视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@{
ViewBag.Title ="PartialViewContainer";
}

Students

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

"_Student"部分视图位于"共享"文件夹中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

初始页面：

enter image description here

在Ajax Call之后

enter image description here

P.S：我已经加入了jquery插件。

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

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

编辑1

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

试试这个：

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

1
2
3
4
5

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