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

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 控制台窗口：

我做错了什么？

Answer 1

对于在 asp.net mvc 中使用带有 Partial Views 的任何类型的 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>

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

我的部分观点

 #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>

加载完所有内容后，我最后启动启动脚本。

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