从 AJAX 调用控制器方法后刷新局部视图答案

【问题标题】：Refresh a Partial View after calling a controller method from AJAX从 AJAX 调用控制器方法后刷新局部视图
【发布时间】：2016-03-18 22:50:16
【问题描述】：

这是我的第一个 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 会刷新，但我得到两个如下图所示的文本框。

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

【问题讨论】：

您甚至没有向您展示 ajax 方法。我们怎么可能理解你的代码出了什么问题。
@StephenMuecke 我说保存功能工作正常，所以我不担心 Ajax 部分，也不想让我的问题太长。我编辑了我的问题以添加更简单的版本，所以您可以撤消否决票吗？
我的尝试(1) + $('#listCourses').html(result); 见这里stackoverflow.com/questions/19392212/…
我假设真正的 ajax 代码实际上是附加部分视图你返回到 DOM - 例如$(someElement).append(result); - 你需要展示真实的代码。这表明您在选项 1 中的 __CourseList.cshtml partial 实际上包含输入，因此您重复它。选项 2 将不起作用。 Ajax 调用不会重定向，因此调用 RedirectToAction() 只会返回完整的 Index.cshtml 视图并将其附加到 DOM（这将复制输入。
如果选项 1 没有将部分附加到 DOM（并且您的 alert() 未显示），那么您的控制器方法可能会引发异常。使用您的浏览器工具来调试您的代码。您在控制台中遇到什么错误？

标签： c# asp.net-mvc asp.net-mvc-5

【解决方案1】：

您的 document.ready 函数存在一些问题。 1.你通过了

courseId: datum.id

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

我建议不要写警告行

$('#listCourses').html(结果);

另外，删除 @{Html.RenderPartial("_CourseList");}，因为 _CourseList 部分视图需要列表模型，而您在渲染期间没有提供它。所以页面不会加载。

通过这些更改，我可以达到以下结果。

【讨论】：