ajaxcall 后网格不更新

Question

我正在创建自己的过滤器。过滤器有一个下拉列表，当这个下拉列表更改时，jquery 将对相应的 HTTPPOST - 控制器操作进行 ajaxcall。在此操作中，我过滤列表并将其传递给我的视图。

一旦列表到达我的视野，webgrid 就不会更新。这是一些带有一些调试信息的代码，以显示正在发生的事情。

控制器

正常动作

    public ActionResult Projects() 
    {
        IEnumerable<Project> projects = Adapter.ProjectRepository.Get();
        int test = projects.Count();
        List<ProjectsDisplayViewmodel> projectsView = new List<ProjectsDisplayViewmodel>();
        string strCats = "";
        foreach (Project prj in projects)
        {
            strCats = "";
            Mapper.CreateMap<Project, ProjectsDisplayViewmodel>();
            ProjectsDisplayViewmodel newProject = Mapper.Map<Project, ProjectsDisplayViewmodel>(prj);
            foreach (Category cat in prj.Categories) 
            {
                strCats += cat.CategoryName + ", ";
            }
            newProject.strCategories = strCats;
            projectsView.Add(newProject);
        }

        ViewBag.Categories = new SelectList(Adapter.CategoryRepository.Get(), "CategoryID", "CategoryName");

       /*projectsview contains 4 projects now*/
        return View(projectsView);
    }

httppost 操作

[HttpPost]
        public ActionResult Projects(string catID, string strSearch)
        {
            IEnumerable<Project> projects = Adapter.ProjectRepository
                                                        .Get()
                                                        .Where(x => 
                                                            x.Categories.Any(
                                                                c => 
                                                                    c.CategoryID == Convert.ToInt16(19))

                                                    );
        int test = projects.Count();

        List<ProjectsDisplayViewmodel> projectsView = new List<ProjectsDisplayViewmodel>();
        string strCats = "";
        foreach (Project prj in projects)
        {
            strCats = "";
            Mapper.CreateMap<Project, ProjectsDisplayViewmodel>();
            ProjectsDisplayViewmodel newProject = Mapper.Map<Project, ProjectsDisplayViewmodel>(prj);
            foreach (Category cat in prj.Categories)
            {
                strCats += cat.CategoryName + ", ";
            }
            newProject.strCategories = strCats;
            projectsView.Add(newProject);
        }

        ViewBag.Categories = new SelectList(Adapter.CategoryRepository.Get(), "CategoryID", "CategoryName");

       /*projectsview contains 1 project now AND WILL DISPLAY 4*/
        return View(projectsView);
    }

project.cshtml

@model IEnumerable<Freelauncher.Models.ProjectsDisplayViewmodel>
@{
    ViewBag.Title = "Projects";
}

@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 25, 
    selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);
} 

<h2>Alle projecten</h2>

@Html.DropDownList("Categories", (SelectList) ViewBag.Categories)

<div id="gridContent">
    @grid.GetHtml(
            columns: grid.Columns(
            grid.Column("ProjectTitle", "Titel"),
            grid.Column("ProjectDeadlineDate", "project deadline"),
            grid.Column("ProjectEndRegisterDate", "Registreer deadline"),
            grid.Column("ProjectBudget", "Prijs"),
            grid.Column("ProjectIsFixedPrice", "Vaste prijs"),
            grid.Column("strCategories","Categorieën"),
            grid.Column("ProjectID", "meer info", format: (item) => Html.ActionLink("info", "project", new { Id = item.ProjectID} ))
            //grid.Column("ProjectID", "meer info", format: Html.ActionLink("info", "project", new { Id = }
     ))
</div>

我错过了什么，我的视图中的项目列表没有更新，正确的数据被传递给视图....

编辑

ajax 调用

$("#Categories").change(function () {
    var param = $(this).val();

    $.ajax({
        type: "POST",
        url: "/Project/Projects",
        data: { catID: $(this).val(), strSearch: 'test' },
        dataType: "json",
        success: function (response) { console.log("succes"); },
        error: function (xhr, ajaxOptions, thrownError) {console.log("error"); }
    });
});

我刚刚注意到我的 console.log 中没有打印任何内容......不是成功也不是错误功能。

Answer 1

您似乎在 AJAX 请求的 success 回调中没有做任何事情（console.log 调用除外）。因此，没有任何更新是完全正常的。如果您希望发生这种情况，您需要手动更新您的 DOM。

因此您应该修改您的HttpPost 控制器操作，使其返回包含网格的PartialView。然后在你的成功回调中将新收到的部分注入 DOM：

success: function (response) { 
    $('#some_id_of_a_containing_div').html(response);
    console.log("succes"); 
},

在这个例子中，你应该将部分视图包装到一个包含 div 中，该 div 将在此处更新：

<div id="some_id_of_a_containing_div">
    @Html.Partial("Partial_Containing_Your_Grid")
</div>