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 action

[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 id="some_id_of_a_containing_div">
    @Html.Partial("Partial_Containing_Your_Grid")
</div>

ajax调用后网格不会更新

控制器

project.cshtml

修改

1 个答案: