Question

这是我的第一个MVC项目，我一直试图弄清楚如何在从AJAX调用控制器方法后刷新部分视图。

我的课程看起来像这样，我想在一个视图中添加一个学期的课程。

    public class CourseViewModel
    {
        public int SemesterID {get; set;}
        public List<Course> Courses {get; set;}  
    }
    public class Course
    {
        public string CourseID {get; set;}
        public string CourseTitle {get; set;}
    }

示例页面如下所示：

在我看来，我为“课程”文本框设置了一个预先输入。当用户从先行建议列表中选择一个课程时，我会调用控制器中的SaveCourse方法并成功保存。问题是保存发生后我无法刷新部分视图。

我的观点（Index.cshtml）：

@using Project.ViewModels;
@model Project.ViiewModels.CourseViewModel


<div id="divCourseTypeahead">
    <input class="typeahead form-control" type="text" />
</div>

<div id="listCourses">
    @{Html.RenderPartial("_CourseList");}
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#divCourseTypeahead .typeahead').typeahead({
            //setup typeahead
        }).on('typeahead:select', function(obj, datum){
        var semesterId = @Model.SemesterID
        $.ajax({
            type: "GET",
            url: "/Course/SaveCourse/",
            data: { semesterId: semesterId, courseId: datum.id },
            success: function (result) {
                alert(result);
            }
        });
    });

 </script>

我尝试过的（1）：

我尝试从SaveCourse返回一个PartialVeew。

public PartialViewResult SaveCourse(int semesterId, string courseId)
{
    //Insert course

    CourseViewModel data = new CourseViewModel(semesterId);
    return PartialView("_CourseList", data);
}

当我这样做时，PartialView不会刷新，并且不会调用ajax成功函数中的alert(result);。

我尝试过的（2）：

public ActionResult SaveCourse(int semesterId, string courseId)
{
    //Insert course

    return RedirectToAction("Index", "Course", new {id=semesterId});
    //in Index, I return `CourseViewModel`

}

当我这样做时，AJAX成功函数中的alert(result);被调用，所以我在成功函数中添加了$('#listCourses').html(result);，然后PartialView会刷新，但我得到两个文本框，如下图所示。

我尝试了很多其他选择，但我很困惑。有人可以帮助我如何实现我想做的事情吗？

Answer 1

你的document.ready函数有几个问题。你正在通过

courseId: datum.id

但是，javascript函数中的任何地方都无法看到基准对象。也许你在其他地方定义它。

而不是警示线我建议写

$（ '＃listCourses'）HTML（结果）;

此外，删除@ {Html.RenderPartial（“_ CourseList”）;}，因为_CourseList局部视图需要列表模型，而您在渲染期间不提供它。所以页面不会加载。

我可以通过这些更改获得以下结果。

从AJAX调用控制器方法后刷新部分视图

我尝试过的（1）：

我尝试过的（2）：

1 个答案: