MVC C＃如何在同一视图中将项添加到列表中

Question

我想做什么

这是我的第一个MVC项目，我想创建一个页面，允许用户选择具有typeahead的课程，并将选定的课程附加到课程列表中。我可以保存添加的课程，但是我无法确定如何显示添加的课程而无需单击刷新按钮。我对如何实现这一目标表示感谢。

我拥有什么

我的课程：

public class CourseList
{
    public int CourseListID {get; set;}
    public List<Course> Courses {get; set}
}
public class Course
{
    public string CourseID {get; set;}
    public string CourseTitle {get; set;}
}
public class CourseListViewModel
{
    public int CourseListID {get; set;}
    public List<Course> Courses {get; set;}  
}

我的观点（更简单的版本）：

@using Project.Models.Courses;
@model Project.ViewModels.CourseViewModel


@{Html.RenderPartial("_SelectCourse", new CourseList());}

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

<script type="text/javascript">


$(document).ready(function () {

$('#txtCourse .typeahead').typeahead({
    //setting up typeahead source here
}).on('typeahead:select', function(obj, datum){
    var courseListId = @Model.CourseListID
    $.ajax({
        type: "GET",
        url: "/Course/SaveCourse/",
        data: "",
        data: { courseListId: courseListId, courseId: datum.id },
        success: function () { alert("success");}
    });
});

});



</script>

_CourseInlineEdit.cshtml

@{
    //set up grid here using `Model.Courses`
}

<div id="gridContent">
    //set up grid contents here
</div>

我的控制器（更简单的版本）：

public class CourseController : Controller
    {
        public ActionResult Index(int courseListId)
        {
            CourseViewModel data = new CourseViewModel (courseListId);
            return View(data);
        }

        public ActionResult SaveCourse(int courseListId, string courseId)
        {
            new Repository().InsertCourse(courseListId, courseId);

            CourseViewModel data = new CourseViewModel (courseListId);
            return View(data);
            }
            return View();
        }
    }

Answer 1

两个选项：

1. 为网格创建部分页面，然后只刷新部分页面 页。

2. 更改SaveCourse方法以返回您在index中创建的数据。     然后，您可以在成功回调中添加结果，并将结果设置为结果。