Question

1-问题：我需要让用户从大量信息中选择一个或多个东西，这些信息被分组为分层结构以供选择，数据输入，数据可以具有4个5个父类别的深度。

我正在寻找2种功能：与eBay类似，在选择项目类别时显示级联列表。显示页面时，您只能获得第一个列表框。在第一个中选择一个后，显示第二个。该过程将继续，直到所选类别没有子类别。

} ebay example

3实际表和查询：表：

-int Id

-string Name

-int ParentId

查询：

public IList<CategoryTable> listcategories(int parentId)

            {
            var query = from c in categorytable
                        where c.ParentId == parentId
                        select c;

                var result= query.ToList();
                return result;
}

4 - 我不知道如何开始，任何指南，现场示例jsfiddle，演示或教程将不胜感激。 brgds

更新：我相信这个功能在webtutorials和问题中并不是很发达。因此，我开始获得一个很好的答案。我将把赏金作为之前评论的功能的实例。谢谢！

Answer 1

通过处理大量数据我学到的是：

不要尝试一次将所有数据加载到客户端
仅加载客户实际需要的数据
在数据库中进行过滤，搜索和排序，例如通过存储过程。特别是对于分布在多个表中的数据。
优化您的数据库查询，索引很好
始终牢记您期望有多少同步查询
linq很好，但处理大数据时并不适用于所有内容
花时间思考和规划真正需要的数据

要在您的网页上显示数据，可以使用许多jQuery插件列出数据，您可以将函数绑定到“选定”的事件。例如，带有MVC4的knockOut.js。您可能不需要完全加载的jQuery“hierachical-data-list-display”-plugin。也许你可以通过使用“seleted”-events，ajax加载和显示/隐藏功能来实现它。

根据你的评论，我会想到jQuery和MVC的组合：

我会创建一个像

这样的空间视图

@model MvcApplication.Models.DataModel

<ol id="@Model.DataCategorieLevel">

@for (var i = 0; Model.Data.Count > i; i++)
{
    <li value="@Model.Data[i].ItemId" onclick="itemSelected(@Model.Data[i].ItemId, @Model.DataCategoryLevel);" >@Model.Data[i].ItemName</li>
}

</ol>

javascript可以是：

    function itemSelected(selectedItemId, itemCategoryLevel) {
        // ajax call to an action which loads the next categorie items into the partial view and returns them
        // on success remove all lists with an category - level lower than itemCategoryLevel
        // append the returned List to the HTML-container which holds the lists
    }

在被调用的MVC-Action中，我将确定它是否是最后一个类别级别。如果它是最后一级，我将返回与其他onclick事件绑定不同的局部视图

在我开始搜索一些插件之前，我会尝试实现这一点

Answer 2

我正在使用knockout和Webapi为我正在开发的应用程序中的级联下拉菜单提供支持。

查看我有一个基本的下拉列表，如下所示。

<select data-bind="options: CurrentList, optionsText: 'name', value: CurrentListSelectedItem, optionsCaption: 'Please Select...'"></select>

查看模型

self.CurrentList = ko.observableArray(CurrentListData); self.CurrentListSelectedItem = ko.observable(); self.CurrentListSelectedItem.subscribe(function () { //ajaxcall to populate list 2 });

服务器端我有一个简单的休息服务，它在树中获取一个点的Id并返回它的所有子节点，这样你就可以将所有这些下拉列表链接在一起（只要你的层次结构）有匹配的水平。

使用模拟数据http://jsfiddle.net/tgriley1/vEBGS/
查看工作示例的小提示

Answer 3

我最近在使用Cascading Drop-down时遇到了类似的问题，我做了类似的事情。

首先，在视图上编写一些jquery，这样当你选择第一个项时，它会向服务器发送一个ajax请求，并带回一个JSON或xml响应。

我做了类似

的事情

<script>
$(function () {
        $("select#ParentId").change(function (evt) {

                $.ajax({
                    url: "/Home/GetChildItems",
                    type: 'Post',
                    data: { ParentId: $("select#ParentId").val() },
                    success: function (data) {
                        var items = "";
                        $.each(data, function (i, val) {
                            items += "<option value='" + val.ChildId + "'>" + val.ChildName + "</option>";
                        });
                        $("select#ChildDropDown").empty().html(items);
                    }
                });

        });
    });
</script>

在控制器上，类似

Public JsonResult GetChildItems(int ParentId)
{
 //code to retrieve the data

  JsonResult result = new JsonResult();
                result.Data = **object that contains the child data**;
                return result;
}

我自己是初学者，所以我不确定这段代码有多好，但是在使用jquery创建级联下拉列表时，它对我有用。

希望它有所帮助。

链接到级联下拉问题：Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON

Answer 4

嗨我有相同的场景，我使用的是带有Web API的自动完成列表，在特定数量的字符后，它调用Web API并加载特定外卡的数据。除此之外，当我发现返回的数据仍然很大时，我在SQL server end添加了分页

Answer 5

telerik演示总是从

学习MVC的好地方

http://demos.telerik.com/aspnet-mvc/razor/combobox/cascadingcombobox

根据您的屏幕截图，这并不完全使用列表框，但可以很容易地将其更改为使用它们。通过一些javascript修改，您可以拥有无限级别。

这是另一个：

http://weblogs.asp.net/raduenuca/archive/2011/04/03/asp-net-mvc-cascading-dropdown-lists-tutorial-part-5-1-cascading-using-jquery-ajax-ajax-and-dom-objects.aspx

使用jQuery＆amp; amp;自动填充选择框asp.net MVC中的AJAX

5 个答案: