使用asp.net mvc4 raxzor的树视图结构 [英] Tree view structure using asp.net mvc4 raxzor

问题描述

大家好，



i需要在左边创建一个树视图，当用户点击任何树的节点然后在右窗格上显示一些信息。< br $> b $ b

请帮我怎么做

Hi all,

i need to create a tree view on left had side and when user click on any tree's node then on right pane some information get displayed .

please help me how to do this

推荐答案

你可以在视图中动态构建你的树（或者通过使用剃刀视图代码使用 div ， anchor 标签和CSS类（对于选定或未选定的节点） 。



1.每个树节点都与 div 和 div <相关联/ code>将包含一个锚标记，该标记将包含 href 您单击该节点时要调用的操作/页面的URL。 br />


2.来自同一级别的每个节点将是同一级别的div。



3。如果树节点包含子节点，则每个子节点的 div 将包含在父节点的 div
中


4.您可以测试此解决方案（使用ASP.NET MVC构建），并检查下一个站点中生成的HTML：在线网站 [ ^ ]



5.这是基于给定类别树数据实现树UI（在主布局中）的剃刀代码的主要部分：



You could build your tree dynamically in your view (or layout) by usingdiv , anchor tags, and CSS classes (for selected or unselected nodes) by using razor view code.

1. Each tree node will be associated with a div and the div will contains an anchor tag that will contains as href the URL to the action/page that you want to be invoked when you click on that node.

2.Each node from the same level will be a div at the same level.

3.If a tree node contains children nodes, each children node's div will be contained into the parent node's div

4. You can test this solution (built with ASP.NET MVC), and inspect the HTML generated in the next site: Online Site[^]

5. Here is the main part of the razor code that implements the tree UI (in the main layout) based on the given category tree data:

<div class="list">
                                @{
                                    
                                    int n = categoryList.Count;
                                    bool startList = false;
                                    //
                                    for (int i = 1; i < n; i++)

                                    {

                                        string categoryLongName, nextCategoryName;

                                        int level = Category.GetLevelAndName(categoryList[i].Text, out categoryLongName);

                                        string categoryName = Category.CategoryNameForUI(categoryLongName, 50);

                                        int nextItemLevel = 1;

                                        //

                                        if (i + 1 < n)

                                        {

                                            nextItemLevel = Category.GetLevelAndName(categoryList[i + 1].Text, out nextCategoryName);

                                        }

                                        //

                                        string selectedCategoryValue = categoryID.ToString();

                                        int index = categoryList[i].Text.LastIndexOf(".");

                                        string nodePath = categoryList[i].Text.Substring(0, index + 1);

                                        string action = Url.Content(string.Format("~/WarehouseArticle/QuickSearch/?Category={0}", categoryList[i].Value));

                                        bool isSelected = ((categoryID > 0 && categoryList[i].Value == selectedCategoryValue) || (selectedRoot != null && nextItemLevel > level && selectedNodePosition.StartsWith(nodePath)));
                                        string itemImageUrl = Url.Content(string.Format("~/Content/Images/{0}.png", isSelected ? "item-selected" : "item"));
                                        string itemClass = "link";
                                        string itemSelectorStyle = (level > 1 ? string.Format("padding-left:{0}px;", 20 * (level - 1)) : string.Empty);
                                        string itemClassStyle = (level == 1 ? "width:149px;" : string.Format("width:{0}px;", 150 - 10 * (level - 1)));
                                        string siblingClassItem = (startList ? "item first" : "item");
                                        startList = false;
                                        //
                                        if (categoryList[i].Value == selectedCategoryValue)
                                        {
                                            //
                                            // This is the last item from the selected root in the tree!
                                            //
                                            selectedRoot = null;
                                            itemClass = "selectedCategory";
                                        }
                                        //

                                        //
                                        if (nextItemLevel > level)
                                        {
                                            //
                                            // Next item is a subitem of the current item!
                                            //
                                            startList = true;
                                            <text><div class="item"> <a href="#" class="selector" style="@itemSelectorStyle">
                                                 <img src="@itemImageUrl" /> </a><a href="@action" class="@itemClass" style="@itemClassStyle" title="@categoryLongName">@(categoryName)</a>
                                            </div></text>
                                            if (isSelected)
                                            {
                                                 @:<div class="list" style="display: block">
                                            }
                                            else
                                            {
                                                    @:<div class="list" style="display: none">
                                            }
                                        }
                                        else if (nextItemLevel == level)
                                        {
                                            //
                                            // Next item is a sibling from the same level (so no children)!
                                            //
                                            <text><div class="@siblingClassItem"> <a href="#" class="selector" style="@itemSelectorStyle"> 
                                                </a> <a href="@action" class="@itemClass" style="@itemClassStyle" title="@categoryLongName">@(categoryName)</a>
                                                </div>
                                            </text>
                                        }
                                        else
                                        {
                                            //
                                            // Close all sub-leveles until the next subitem level (so no children)!
                                            //
                                            <text><div class="item last"> <a href="#" class="selector" style="@itemSelectorStyle"> 
                                                </a> <a href="@action" class="@itemClass" style="@itemClassStyle">@(categoryName)</a>
                                                </div>
                                            </text>
                                            for (int k = nextItemLevel; k < level; k++)

                                            {

                                                @:</div></div>
                                            }
                                        }
                                    }
                                }
                                </div>

这篇关于使用asp.net mvc4 raxzor的树视图结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！