Syncfusion Treeview 未在 ASP.Net MVC5 中呈现

Syncfusion Treeview not rendering in ASP.Net MVC5

我正在尝试将 Syncfusion Treeview 控件添加到 ASP.Net MVC5 项目,但我不太走运。 (我试过 Syncfusion 论坛,但还没有回复)。

我已经从 Syncfusion 的示例中提取了视图的代码,呈现 Treeview 的行已被简化以尝试显示一些内容。

我正在将数据从数据库加载到 TreeViewFieldsSettings 对象并将其传递给视图。我可以在调试期间看到数据正在进入视图(Model.DataSource 已填充)但控件未呈现(页面的其余部分是)。我在浏览器控制台中没有错误。

我在布局页面中引用了 ej2.min.js 脚本。复选框(出现在我从 Syncfusion 复制的示例中)被呈现,所以我假设 ej2.min.js 是可访问的。

我在控制器构造函数中设置了我的许可证密钥

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("licencekey")

我只是想不通为什么我的数据没有显示。感谢您的任何建议。

这是我的局部视图

@using Syncfusion.EJ2.Navigations
@using Syncfusion.EJ2

@model TreeViewFieldsSettings

@{
    Layout = "~/Areas/MNT/Views/Shared/_Layout.cshtml";
}

<div class="col-lg-8 control-section">
    <div class="control_wrapper">
        @Html.EJS().TreeView("Index").ShowCheckBox(true).Fields(field => field.Id("Id").Text("Name").DataSource(Model.DataSource)).Render()
    </div>
</div>


<div class="col-lg-4 property-section">
    <table id="property" title="Properties">
        <tbody>
            <tr>
                <td style="padding-right: 10px">
                    <div style="padding-left: 0;padding-top: 0">

@Html.EJS().CheckBox("select").Checked(true).Label("Auto Check").Change("onChange").Render()
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>

@*custom code start*@
<style>
.control_wrapper {
    max-width: 500px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

@@media screen and (max-width: 768px) {
    .treeview-control-section {
        margin: 0;
    }
}
</style>
@*custom code end*@

这是我填充 TreeViewFieldsSettings 对象的代码

    public ActionResult Index()
    {
        TreeViewFieldsSettings CheckBoxModel = new TreeViewFieldsSettings();

        // Loads a list of type naSite
        List<naSite> sites = new List<naSite>();
        sites = GetSites(sites).OrderBy(x => x.SiteName).ToList();

        // Builds the DataSource using the list of naSite
        CheckBoxModel.DataSource = BuildTreeview(sites);
        CheckBoxModel.HasChildren = "HasChild";
        CheckBoxModel.Expanded = "Expanded";
        CheckBoxModel.Id = "Id";
        CheckBoxModel.ParentID = "PId";
        CheckBoxModel.Text = "Name";
        return View("index", CheckBoxModel);
    }

BuildTreeview 方法

    public List<TreeviewModel> BuildTreeview(List<naSite> Sites)
    {
        List<TreeviewModel> localData1 = new List<TreeviewModel>();

        var lastParent = "";
        foreach(naSite s in Sites)
        {
            var parent = lastParent;
            localData1.Add(new TreeviewModel { Id = s.SiteID.ToString(), PId = parent, Name = s.SiteName, HasChild = false, Expanded = false });
        }
        return localData1;
    }

通过分析您的查询,正如您所说,数据正在进入视图,我认为这里的问题可能是您错过了包含 @Html.EJS().ScriptManager() 在您的部分视图页面中。

    //View part

<div id="tree">@Html.Action("DisplayOpenResults1", "Home")</div>

//Controller part

public ActionResult DisplayOpenResults1()

{

var tree = treedata.GetTree();

checkboxfields.DataSource = tree;

checkboxfields.HasChildren = "HasChild";

checkboxfields.Expanded = "Expanded";

checkboxfields.Id = "Id";

checkboxfields.ParentID = "PId";

checkboxfields.Text = "Name";

ViewBag.checkboxfields = checkboxfields;

return PartialView("PartialPage");

}

// Partial view page

<div class="col-lg-8 control-section"><div class="control_wrapper">

@Html.EJS().TreeView("checkbox").ShowCheckBox(true).Fields(ViewBag.checkboxfields).Render()

</div>

</div><div class="col-lg-4 property-section"><table id="property" title="Properties"><tbody><tr><td style="padding-right: 10px"><div style="padding-left: 0;padding-top: 10px">@Html.EJS().CheckBox("select").Checked(true).Label("Auto Check").Change("onChange").Render()</div></td></tr></tbody></table></div>

<script>function onChange(args) {var treeObj = document.getElementById('checkbox').ej2_instances[0];treeObj.autoCheck = args.checked;}</script>

@Html.EJS().ScriptManager()

样本:

https://www.syncfusion.com/downloads/support/forum/146642/ze/PartialTree625065695