1

1-问题：我需要使用户能够从大量信息中选择一个或多个事物，这些信息被分组到一个层次结构中进行选择、数据输入，如果数据的深度可以是 4、5 个父类别。

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

}易趣示例

3-实际表和查询：表：

-int ID

-字符串名称

-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

更新：我相信这个功能在网络教程和问题中不是很发达。因此，我开始赏金以获得一个很好的答案。我将为先前评论的功能的实时示例分配赏金。谢谢！

4

5 回答 5

2

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

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

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

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

  • 在 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 事件绑定

在我开始搜索一些插件之前，这就是我要尝试实现的

于 2013-03-30T11:23:15.530 回答
1

我正在使用淘汰赛和 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/

于 2013-04-08T13:26:05.457 回答
1

我最近在使用级联下拉菜单时遇到了类似的问题，我做了类似的事情。

首先，在视图上编写一些 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;
}

I'm a beginner myself, so I'm not sure how good this code is, but it worked for me when creating cascading drop-downs using jquery.

Hope it helps.

Link to the cascading drop down question : Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON

于 2013-04-08T15:54:49.287 回答
1

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

于 2013-05-06T12:40:07.170 回答
0

The telerik demo is always a good place to learn MVC from

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

This does not exactly use listboxes as per your screenshots but it could very easily be changed to use them. With a few javascript modifications you could have unlimited levels.

Here is another one:

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

于 2013-04-08T16:58:47.333 回答