使用来自控制器的 Json 数据重新绑定 Telerik TreeView答案

【问题标题】：Rebind Telerik TreeView with Json data from controller使用来自控制器的 Json 数据重新绑定 Telerik TreeView
【发布时间】：2015-07-31 10:31:02
【问题描述】：

我正在使用 Telerik Extensions for MVC。

我有一个 TreeView 并想使用它：

打开站点时仅显示根元素，并在扩展时使用 Ajax 按需加载子元素 - 这很有效！
搜索节点，然后重新绑定树宽结果数据。

我无法让第 2 点起作用。一些代码：

查看：

@(Html.Telerik().TreeView()
   .Name("OuTree")
   .DataBinding(dataBinding =>
       {
           dataBinding.Ajax()
               .Enabled(true)
               .Select("NodePreview", "OrganizationalStructure");
       })
   )

控制器上第 1 点的扩展方法（有效！）

public JsonResult NodePreview(int? Value)
    {
        int nodeId = Value.HasValue == false ? 0 : Value.Value;
        var request = OrganizationTreeNodeRequestCreate(nodeId);
        var service = _ProductSetupService;
        var response = service.OrganizationTreeNodeGet(request);

        var tree = from ou in response.Children
                   select new
                   {
                       Value = ou.Id,
                       Text = ou.OrganizationUnit.Name,
                       LoadOnDemand = ou.Subordinates.Count > 0
                   };
        return Json(tree, JsonRequestBehavior.AllowGet);
    }

现在是困难的部分。我希望能够搜索节点，然后用结果数据重新绑定树。我已经有一个返回层次结构的搜索服务。问题在于绑定。

第 2 点的控制器操作：

public JsonResult Search(SearchModel model)
    {
        var request = OrganizationTreeSearchRequestCreate(model);
        var service = _ProductSetupService;
        var response = service.OrganizationTreeSearch(request);

        var treeViewItem = new TreeViewItem();
        treeViewItem.BindTo(response.Results, mappings =>
            {
                mappings.For<OrganizationUnitTree>(binding => binding
                    .ItemDataBound((item, group) =>
                    {
                        item.Text = group.OrganizationUnit.Name;
                        item.Value = group.Id.ToString();
                        item.LoadOnDemand = true;
                    })
                    .Children(group => group.Subordinates));
            });

        return Json(treeViewItem, JsonRequestBehavior.AllowGet);

    }

然后在客户端：

function ReloadTree(data) {
var treeview = $('#OuTree').data('tTreeView');
treeview.dataBind(data);

}

但是dataBind不起作用。

感谢您的帮助。

【问题讨论】：

标签： c# json telerik treeview

【解决方案1】：

让它工作。

基本上我创建了一个模型：

public class OrganizationUnitTreeViewModel
{
    public string Text { get; set; }

    public string Value { get; set; }

    public List<OrganizationUnitTreeViewModel> Items { get; set; }

    public bool Expanded = true;

    public bool LoadOnDemand = true;
}

那么在我的行动中：

    public JsonResult Search(SearchModel model)
    {
        var request = OrganizationTreeSearchRequestCreate(model);
        var service = _ProductSetupService;
        var response = service.OrganizationTreeSearch(request);

        List<OrganizationUnitTreeViewModel> treeModelList = ConvertOrganizationUnitTree(response.Results);

        string json = JsonConvert.SerializeObject(treeModelList);

        return Json(json, JsonRequestBehavior.AllowGet);
    }

转换方法从层次类结构创建模型：

private List<OrganizationUnitTreeViewModel> ConvertOrganizationUnitTree(List<OrganizationUnitTree> tree)
    {
        List<OrganizationUnitTreeViewModel> treeModelList = new List<OrganizationUnitTreeViewModel>();
        foreach (OrganizationUnitTree ou in tree)
        {
            OrganizationUnitTreeViewModel treeModel = new OrganizationUnitTreeViewModel();
            treeModel.Text = ou.OrganizationUnit.Name;
            treeModel.Value = ou.Id.ToString();
            if (ou.Subordinates != null && ou.Subordinates.Count > 0)
            {
                List<OrganizationUnitTreeViewModel> items = new List<OrganizationUnitTreeViewModel>();
                items.AddRange(ConvertOrganizationUnitTree(ou.Subordinates));
                treeModel.Items = items;
            }
            treeModelList.Add(treeModel);
        }
        return treeModelList;
    }

最后但并非最不重要的 JS：

function ReloadTree(data) {
     var json = JSON.parse(data);
     var treeview = $('#OuTree').data('tTreeView');
     treeview.dataBind(json);}

就是这样。希望这对某人有用。

【讨论】：