c# - 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);
    }

项目.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

You don't seem to be doing anything in the success callback of your AJAX request (other than a console.log call). So it's perfectly normal that nothing updates. You need to manually update your DOM if you want this to happen.

So you should modify your HttpPost controller action so that it returns a PartialView containing the grid. And then in your success callback inject the newly received partial into the DOM:

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

In this example you should wrap the partial view into a containing div which will get updated here:

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