Question

我正在尝试构建一个导航系统，用户可以通过该系统导航类别/子类别结构，然后允许用户添加新的结构。

这是我的控制器......

    public ActionResult ManageCategories()
    {
        var categoryService = new CategoryService(_unitOfWork);
        CategoryListViewModel model = categoryService.GetCategories(null);
        return View("ManageCategories", model);
    }


    public PartialViewResult GetCategories(int? parentCategoryId)
    {
        var categoryService = new CategoryService(_unitOfWork);
        CategoryListViewModel model = categoryService.GetCategories(parentCategoryId);

        return PartialView("GetCategories", model);
    }

    [HttpPost]
    public ActionResult AddNewCategory(string newCategoryName, int? parentCategoryId)
    {
        ...code to add new category to database...

        // just redirect for now...
        return RedirectToAction("ManageCategories", parentCategoryId);
    }

这是我的（简化）视图......

        @model CategoryListViewModel

        <ul id="category-explorer">
            @Html.Action("GetCategories", new { parentCategoryId = Model.ParentCategoryId })
        </ul>

这是我的部分视图，它只显示给定父类别的子类别列表...

@model CategoryListViewModel

@{

AjaxOptions ajaxOpts = new AjaxOptions 
{
    UpdateTargetId = "category-explorer",
};

}


@foreach(Category category in Model.Categories)
{    
    <li>@Ajax.ActionLink(@category.Name, "GetCategories", new {parentCategoryId = category.CategoryId}, ajaxOpts)</li>
}

parentCategoryId为null表示该类别是顶级类别。在我的局部视图中，我使用ajax再次调用相同的局部视图，但将所选类别作为parentCategoryId传递，因此它是一个递归结构。

我的问题是我的ManageCategories视图如何获取用户嵌套到的parentCategoryId的最终值？我的主视图上有一个表单，需要使用此值，以便它可以适当地调用'AddCategory'。

我认为我设置ajax和视图的方式是正确的;只是有点难以理解如何干净利落地实现这一目标，即不需要存储静态变量。

Answer 1

你可以通过做一些手动JavaScript编程而不是回到asp.net中的Ajax类来解决这个问题。通过使用jQuery（或其他库，我只是喜欢jquery，因为它被广泛使用并且倾向于大部分时间完成工作），您可以像使用asp.net ajax一样轻松地执行Ajax调用，此外还存储变量和东西。

您可以先将其放入局部视图

@foreach(Category category in Model.Categories)
{    
    <li><a href="#" onclick="return loadCategory('@category.CategoryId');">@category.Name</a></li>
}

点击该链接现在将使浏览器调用loadCategory JavaScript函数，您可以在下面找到它

<script type="text/JavaScript">
    var s_currentCategory = -1;
    var loadCategory = function(categoryId){

       $.get("/GetCategories?parentCategoryId=" + categoryId, // hard coded url
             function(data){ // Callback to handle the Ajax response
                 $("#category-explorer").html(data);
                 s_currentCategory = categoryId; 
             }

       return false; // to cancel the link click event, preventing the browser to follow the link

    }

</script>

此时您可以引用上次使用Ajax检索的categoryId。我不确定这正是你想要的，但至少它应该指向你的大方向。

我建议您在使用此代码之前阅读jquery api，因为它没有提供完整的工作示例。例如，您可能希望在Ajax调用失败的情况下添加错误处理程序。

http://api.jquery.com/

如果没有看到您计划如何连接AddCategory功能，这是我能做的最好的事情。你说你想避免使用静态变量，我的s_currentCategory可能会被这样说。如果您向我提供更多详细信息，我很乐意尝试给您一些建议。

Answer 2

似乎我不知道在每个HTTP请求之间重建控制器，因此我设置的任何私有值都丢失了。 TempData课程允许我在“GetCategories”操作中的请求之间保存最后选择的ID。

从ajax Partial View获取数据以在父视图中使用

2 个答案: