Question

我开始使用jQuery Widgets，我想用JSON数据填充DataTable。这是我的代码：

<script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var url = '@Url.Action("AjaxGetNewsItems", "News")';
        console.log(url);

        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'title'},
                { name: 'text'},
                { name: 'id'}
            ],
            url: 'News/AjaxGetNewsItems'
            //id: 'id'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        console.log(dataAdapter);

        $("#dataTable").jqxDataTable(
        {
            width: 850,
            source: dataAdapter,
            theme: 'arctic',
            pageSize: 5,
            sortable: true,
            filterable: true,
            pageable: true,
            columns: [
                { text: 'title', dataField: 'title', width: 300 },
                { text: 'text', dataField: 'text', width: 200 },
                { text: 'id', dataField: 'id', width: 200 }
            ]
        });
    });
</script>


<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="dataTable">
    </div>
</div>

这就是我的JSON的样子：

[
    {
        "title": "Tree fungus ID: Inonotus dryadeus",
        "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
        "id": 6
    }
]

最后我的dataAdapter控制台窗口：

enter image description here

我做错了什么？

Answer 1

对于在asp.net mvc中使用任何类型的带有部分视图的jQuery库时遇到问题的人来说，这是我的答案。

我的问题是我想在局部视图中封装我的所有小部件逻辑。我不想在父视图中为它编写我的JavaScript，而是在局部视图中编写HTML。

我的父视图 - index.cshtml

@{
    ViewBag.Title = "Index";
}


<script type="text/javascript">
    $(document).ready(function () {
        //$('#docking').jqxDocking({ orientation: 'horizontal', width: 800, mode: 'docked' });
        $('#docking').jqxDocking({ mode: 'docked' });
        $('#docking').jqxDocking('disableWindowResize', 'window1');
        $('#docking').jqxDocking('disableWindowResize', 'window2');

        //$('#calendar').jqxCalendar({ width: 180, height: 180 });
        //$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 });
        //$('#listbox').jqxListBox({ source: source, width: 375, height: 181 });
        //$('#zodiak').jqxPanel({ width: 375, height: 180 });
    });
</script>


    <div id="docking" style="width:100%">
            <div id="window1" style="width: 35%; padding:20px;">
                <!-- Partial view -->
                @Html.Action("_NewsWidget", "News")
            </div>
            <div id="window2" style="width: 65%;">
                <!-- Partial view -->
                @Html.Action("_ShortcutsWidget", "Dashboard")
            </div>
    </div>

仅对部分视图的引用是将在这些div中返回HTML的Html.Actions。

我的部分观点

 #region Partial Views
        [HttpGet]
        public ActionResult _NewsWidget()
        {
            ViewBag.StartupScript = "initTable();";
            return View("~/PartialViews/News/_NewsWidget.cshtml");
        }
        #endregion

我使用ViewBag作为一种注入javascript来初始化我的脚本的方法。

部分视图

<script>
    function getNewsItems(url) {
        return $.ajax({
            type: "GET",
            url: url,
            contentType: "application/json; charset=utf-8",
            success: function (data) {
            },
            error: function (data) {
            }
        });
    }

    function bindData(data) {
        console.log(data);
        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'title', type: 'string' },
                { name: 'text', type: 'string' },
                { name: 'id', type: 'int' }
            ],
            localData: data,
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#dataTable").jqxDataTable(
        {
            source: dataAdapter,
            showHeader: true,
            autoRowHeight: false,
            columns: [
                { text: 'Title', dataField: 'title', width: 300 },
                { text: 'Body Text', dataField: 'text', width: 200 },
                { text: 'ID', dataField: 'id', width: 200 }
            ]
        });
    }

    function initTable() {
        var url = '@Url.Action("AjaxGetNewsItems", "News")';
        getNewsItems(url).done(bindData);
    }
</script>


    <div id="dataTable">
    </div>


<script type="text/javascript" defer="defer">
    @Html.Raw(ViewBag.StartupScript)
</script>

一旦所有内容都加载完毕，我最后启动了启动脚本。

使用此功能，您可以将所有逻辑封装在局部视图中。

在部分视图中完全封装JavaScript（jQuery Widgets / ASP.NET MVC示例）

1 个答案: