我正在创建表示ul和li的局部视图 [英] I am creating a partial view thats rendered ul and li

问题描述

我正在创建表示ul和li的局部视图
动态，但输出将显示错误，我需要在输出下面.

i am creating a partial view thats rendered ul and li
dynamically but output will be display wrong i need below output.

sale
 Add sale
 View Sale
 Delete Sale
Product
 Add Product
 View Product

@model IEnumerable<partialpageexample.models.permission>

@if (Model.Any())
{
    var result = TreeView(Model);
    @Html.Raw(result)
}

@functions
    {
    public string TreeView(IEnumerable<partialpageexample.models.permission> Model)
    {
        string Htmlstring = string.Empty;

        if (Model.Count() > 0)
        {
            Htmlstring += "<ul>";
            foreach (var parentNode in Model)
            {
                
                Htmlstring += "<li>" + parentNode.DisplayName;

                Htmlstring += TreeView(Model.Where(x => x.ParentId.Equals(parentNode.PermisionId)));

                Htmlstring += "</li>";

            }
            Htmlstring += "</ul>";

        }
        return Htmlstring;

    }

}

推荐答案

这完全是错误的MVC方法.您的控制器将数据传递到视图，然后由视图决定如何呈现数据，您不会在控制器中生成html，因为这完全破坏了范例.

因此，创建一个代表您的数据的数据模型(例如子\父对象的列表)，并使用视图将它们表示为html.

模型

That''s completely the wrong way of doing MVC. Your controller passes data to the view and it is up to the view to decide how that data is rendered, you don''t generate html in your controller as that completely breaks the paradigm.

So create a data model that represents your data (like a list of child\parent objects) and use the view to represent them as html.

Model

public class MenuModel
{
    public string Name { get; set; }
    public List<MenuModel> Children { get; set; }
}

控制器

Controller

public ActionResult Index()
{
    List<MenuModel> model = new List<MenuModel>();

    model.Add(new MenuModel { Name = "Sale", Children = new List<MenuModel> {
        new MenuModel { Name = "Add sale" },
        new MenuModel { Name = "View sale" },
        new MenuModel { Name = "Delete sale" } } });
            
    model.Add(new MenuModel { Name = "Product", Children = new List<MenuModel> {
        new MenuModel { Name = "Add product" },
        new MenuModel { Name = "View product" } } });

    return View(model);
}

查看

View

@model List<MenuModel>

<ul>
    @foreach (var menuItem in Model)
    {
        <li>@menuItem.Name</li>
        if(menuItem.Children != null && menuItem.Children.Any())
        {
            <ul>
                @foreach (var childItem in menuItem.Children)
                {
                    <li>@childItem.Name</li>
                }
            </ul>
        }
    }
</ul>

这篇关于我正在创建表示ul和li的局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！