从ajax部分视图获取数据以在父视图中使用

本文关键字：视图 数据 ajax 获取 | 更新日期: 2023-09-27 18:28:32

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

这是我的控制器。。。

    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和视图的方式是正确的；只是有点困惑于如何干净地实现这一点，即不需要存储静态变量。

从ajax部分视图获取数据以在父视图中使用

您可以通过手动进行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的引用。我不确定这是否正是你想要的，但至少它应该为你指明一个大致的方向。

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

http://api.jquery.com/

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

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

相关文章：