Jquery 菜单不显示 mvc 部分视图的子 ul答案

【问题标题】：Jquery menu not show sub ul for mvc partial viewJquery 菜单不显示 mvc 部分视图的子 ul
【发布时间】：2014-09-13 19:14:44
【问题描述】：

我正在尝试将此示例用于我的菜单：

http://jqueryui.com/menu/#default

我的代码：

@model VirtualWebStore.Models.MainProductCategoryModel
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
    $(document).ready(function () {

        $("#menu").menu();

    });

</script>
<div>
    <div class=" pull-right">
        <ul id="menu">
            <li class="ui-state-disabled">MENU</li>
            @foreach (var item in Model.Categorylst)
            {
                <li>
                    <a href="#">
                        @Html.DisplayFor(x => item.CategoryName)
                    </a>
                </li>
                foreach (var subtoCat in Model.CategoryToSub)
                {
                    if (item.CategoryId == subtoCat.CategoryId)
                    {
                        foreach (var sub in Model.SubCategorylst)
                        {
                            if (sub.SubCategoryId == subtoCat.SubCategoryId)
                            {
                <ul>

                    <li>
                        <a href="#">@Html.DisplayFor(x => sub.SubCategoryName)</a>
                    </li>
                </ul>
                            }
                        }
                    }
                }
            }
        </ul>
    </div>
</div>

型号 - 主要产品类别：

public class MainProductCategoryModel
    {
        WebStoreEntities1 db = new WebStoreEntities1();

        public Product product { get; set; }
        public CategoryModel category { get; set; }
        public SubCategoryModel subCategory { get; set; }

        public IEnumerable<CategoryToSubCategory> CategoryToSub
        {
            get
            {
                return db.CategoryToSubCategories.ToList();
            }
        }

        public IEnumerable<SubCategory> SubCategorylst
        {
            get
            {

                return db.SubCategories.ToList();
            }
        }

        public IEnumerable<Product> Productlst
        {
            get
            {
                return db.Products.ToList();
            }
        }

        public IEnumerable<Category> Categorylst
        {
            get
            {
                return db.Categories.ToList();
            }
        }

    }
}

我是 mvc 和 jquery 的新手。我使用 forech lops 因为在我的网站中，用户可以添加动态的类别和子类别，并将其全部保存在 sql 表中。

问题是我只看到类别名称，当我使用 jquery 时我看不到子类别。我看到所有类别和子类别都可以 witout jquery。

此 HTML 是部分视图。

模型从数据库中获取详细信息。

在我拥有的 sql 表中： 1 - 产品 2-分类 3-子类别 4 -Category 到 SubCategory（具有所有这些表 ID）

管理员可以在网站中添加类别、子类别和产品。在主页/经理页面中，他可以看到所有产品，并且可以对其进行编辑。

菜单 HTML 使用此模型从数据库中获取所有类别和子类别。所有这些 html 都是我放入 shard/layout 的部分视图。

【问题讨论】：

查看您的 MainProductCategoryModel 类以及您网站上实际显示的内容会非常有帮助。
您是否在 JavaScript 控制台中看到任何错误？由于您使用的是 jQuery 并且这是部分功能，因此您可能会在实际加载 jQuery 库之前尝试调用菜单函数。
我没有在控制台看到任何错误。在我使用功能菜单之前，我在 beginig 的这个 html 页面上使用 jquery：
那么你是在<head>中加载jQuery，然后呢？
我在部分 html 本身加载。

标签： jquery asp.net-mvc jquery-ui asp.net-mvc-partialview

【解决方案1】：

好的我资助答案。我对 ul 和 il 有点困惑

所以答案是：

   <ul id="menu">
        <li class="ui-state-disabled">menu</li>
        @foreach (var item in Model.Categorylst)
        {
            <li>
                <a href="#">
                    @Html.DisplayFor(x => item.CategoryName)
                </a>
            </li>
            <li>
                <ul>
                    @foreach (var subtoCat in Model.CategoryToSub)
                    {
                        if (item.CategoryId == subtoCat.CategoryId)
                        {

                            foreach (var sub in Model.SubCategorylst)
                            {
                                if (sub.SubCategoryId == subtoCat.SubCategoryId)
                                {

                        <li>
                            <a href="#">@Html.DisplayFor(x => sub.SubCategoryName)</a>
                        </li>

                                }
                            }

                        }
                    }
                </ul>
            </li>
        }
    </ul>

【讨论】：