从 ajax Partial View 获取数据以在父 View 中使用答案

【问题标题】：Getting data from ajax Partial View to use in the parent View从 ajax Partial View 获取数据以在父 View 中使用
【发布时间】：2013-08-20 18:54:45
【问题描述】：

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

这是我的控制器...

    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>
}

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

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

我认为我设置 ajax 和视图的方式是正确的；只是有点难以理解如何干净地实现这一点，即不求助于存储静态变量。

【问题讨论】：

标签： c# asp.net-mvc razor

【解决方案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 可能就是这样考虑的。如果您向我提供更多详细信息，我很乐意尝试给您一些建议。

【讨论】：

非常感谢，我会试一试。就“AddCategory”而言，我只是计划在 ManageCategories 页面上有一个表单，该表单具有输入文本框（用于类别名称），并且我需要将用户选择的 parentCategoryId 绑定到表单路由值，因此当我提交它时，两者都会得到作为参数传递给“AddCategory”方法。如何在 ManageCategories 视图中访问 s_currentCategory 并在表单提交值中使用它？

【解决方案2】：

我似乎没有意识到控制器是在每个 HTTP 请求之间重建的，所以我设置的任何私有值都丢失了。 TempData 类允许我在“GetCategories”操作中的请求之间保存最后选择的 Id。

【讨论】：