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

我已经开始使用jQuery小部件，我想用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>

最后，我的dataAdapter控制台窗口：

---

我做错了什么？

对于在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>

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

局部视图

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

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

函数getNewsItems（url）{
返回$.ajax({
键入：“获取”，
url:url，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
},
错误：函数（数据）{
}
});
}
函数绑定数据（数据）{
控制台日志（数据）；
变量源=
{
数据类型：“json”，
数据字段：[
{name:'title'，type:'string'}，
{name:'text'，键入：'string'}，
{name:'id'，type:'int'}
],
localData:data，
};
var dataAdapter=new$.jqx.dataAdapter（源）；
$（“#数据表”）.jqxDataTable(
{
来源：dataAdapter，
showHeader：是的，
自动高度：false，
栏目：[
{文本：'Title'，数据字段：'Title'，宽度：300}，
{text:'Body text'，数据字段：'text'，宽度：200}，
{文本：'ID'，数据字段：'ID'，宽度：200}
]
});
}
函数initTable（）{
var url='@url.Action（“AjaxGetNewsItems”、“News”）；
getNewsItems（url）.done（bindData）；
}
@Html.Raw（ViewBag.StartupScript）

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

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

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