如何通过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>

“_学生”位于“共享”文件夹

内的部分视图

@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。我刚刚使用了好的AJAX 发生的事情是ajax实际上并没有工作，它实际上只是在做一个html GET。

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

此代码可能不是直接剪切和粘贴，但它非常接近。

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