Question

我有2个表课程目录和课程，我想用Kendoui Panelbar显示它们，我该如何实现？

面板栏标题的内容将是动态的，每个面板都是动态的

希望我能清楚地解释我的需求

这里有一个代码示例

public class CourseCatalog
{
    public int CatalogId{get; set;}
    public string Name {get; set;}
}

public class Course
{
    public int CourseId{get; set;}
    public int CatalogId{get; set;}
    public string CourseName{get; set;}
    public int Hours{get; set;}
}

控制器

public class AvailableCourses:Controller
{
    public ActionResult Index()
    {
         return View();
    }

    public ActionResult Courses(int id)
    {
         return PartialView();
    } 
}

视图

@(Html.Kendo().PanelBar().Name("avaliableCoursesPanelBar")
       .Items(i=>{
             i.Add().Text("Training Courses").LoadContentFrom(Url.Action("Courses","AvailableCourses",new {id=1}));
       });
  )

我的问题是我可以手动将项目添加到面板栏并手动分配参数id = 1，但如何完全自动化此过程？

Answer 1

您可以执行以下操作：

1-你的控制器假设您正在使用entityframework和名为db

的上下文

// function to return the course catalog list
public List<CourseCatalog> GetCourseCatalogs()
{
    var details=db.CourseCatalogs.ToList();
    return details;
}

// your index action
public ActionResult Index()
{
    ViewBag.Catalogs=GetCourseCatalogs();
    return View();
}

// partial view for your Course details with parameter id to filter the course catalog

public ActionResult CourseDetails(int id)
{
    var details = db.Courses.Where(t=>t.CatalogId==id).ToList();
    return PartialView(details);
}

2-你的索引视图

 Html.Kendo()
    .PanelBar()
    .Name("catalogBar")
    .ExpandMode(PanelBarExpandMode.Single)
            .Items(items =>
            {
                // here is the trick to add the items dynamically
                foreach (YourApplication.Models.Catalog detail in ViewBag.Catalogs)
                {
                    items.Add()
                        .Text(detail.Name)
                        .LoadContentFrom(Url.Action("CourseDetails", "YourController", new { id = detail.Id }));
                }

            })
)

3-您的课程详情视图

内容取决于您将如何显示它，在这里我将假设您将以ul

显示它

  @model IEnumerable<YourApplication.Models.Course>


      <ul>
        @foreach(YourApplication.Models.Course detail in Model)
        {
           <li>@detail.Name</li>
        }
        </ul>

希望这会对你有所帮助

Kendo Ui PanelBar动态加载

1 个答案: